DataTables：动态添加一行

Question

我在转发器绑定了5条记录

 <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>

然后 1 分钟后，我使用 jQuery Ajax 获取了另外 5 条记录，并将这些记录附加到 <tbody>。

之后：

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

所以它工作正常但问题是我正在使用 DataTables 和 DataTables 的搜索栏在 Ajax 提取后不起作用。

用户无法搜索使用 Ajax 获取的数据。

截图一：

截图二：

Answer 1

使用 row.add() 添加行到 table:

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

$('#example').DataTable() 将 return DataTables API 实例。

row.add() 接受由每一列的数据组成的数组或对象。因为你只有一列，所以我放了一个数组元素 '<b>Sample content here</b>' 来证明你也可以使用包含 HTML 的字符串。

DataTables：动态添加一行

DataTables: Adding a row dynamically

asp.net

ajax

jquery

datatables