jquery - DataTables: Adding a row dynamically -

i binding 5 records in repeater

 <asp:repeater id="repeater1" runat="server">             <headertemplate>                 <table id="example" class="table table-hover" cellspacing="0" width="100%">                     <thead>                         <tr>                             <th> <h3 style="font-size:24px;margin-top: 20px;margin-bottom: 20px;  margin-left: 40px;"><b>teacher posts</b></h3></th>                         </tr>                     </thead>                      <tbody id="examplecontent">             </headertemplate>             <itemtemplate>                  <tr>                     <td>                          <div class='col-md-12'>                               <div class='col-xs-10'>                                 <div class='media'>                                     <div class="pull-left">                                         <a href='#'>                                              <img src='<%#eval("picture") %>' style='height: 100px; width: 100px;' runat="server" />                                          </a>                                     </div>                                     <div class="p-lg-left media-body">                                        <h4 class="oprofiletiletitle media-heading">                                                  <a href='<%#eval("teacher_id","~/pages/teacher/tprofile.aspx?recid={0}") %>' runat="server" class="jsshortname" title="nicolas baud"><%#eval("teachername") %></a>                                               </h4>                                                  <p class="jstitle lead ng-binding m-md-bottom"><%#eval("title") %></p>                                                  <span class="glyphicon glyphicon-map-marker"></span><strong class="jscountry"><%#eval("countryadd") %></strong><span class="text-muted">                             -                             <span class="jslastactivity"><%#eval("created_date") %>                             </span>                                                     -                             <span class="jstests">class: <span class="btn-link fw-200"><%#eval("class") %></span></span>                                                     -                             <span class="jsportfolios">subject: <span class="btn-link fw-200"><%#eval("subname") %></span></span></span>                                              <p class="odescription ng-isolate-scope">                                                 <!-- ngif: !open -->                                                 <span class="ng-binding ng-scope"><%#eval("description") %></span>                                             </p>                                       </div>                                 </div>                             </div>                          </div>                       </td>                   </tr>              </itemtemplate>             <footertemplate>                 </tbody>         </table>             </footertemplate>           </asp:repeater> 

then after 1 min fetching 5 more records using jquery ajax , append these record in <tbody>.

after that:

$("#examplecontent").append(content); 

so works fine problem using datatables , search bar of datatables doesn't work after ajax fetch.

users unable search data fetched using ajax.

screenshot 1:

screenshot 2:

use row.add() add rows table:

$('#example').datatable()    .row    .add(['<b>sample content here</b>'])    .draw(); 

$('#example').datatable() return datatables api instance.

row.add() accepts array or object consisting of data every column. since have 1 column, put 1 array element '<b>sample content here</b>' demonstrating can use string containing html well.