DataTables: Adding a row dynamically

Question

I am 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 I am fetching 5 more records using jQuery Ajax and append these record in <tbody>.

After that:

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

So it works fine but the problem is that I am using DataTables and the search bar of DataTables doesn't work after Ajax fetch.

Users are unable to search data that was fetched using Ajax.

Screenshot 1:

Screenshot 2:

Answer 1

Use row.add() to add rows to the table:

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

$('#example').DataTable() will return DataTables API instance.

row.add() accepts array or object consisting of data for every column. Since you have only one column, I put one array element '<b>Sample content here</b>' demonstrating that you can use string containing HTML as well.