使用jQuery Datatable进行搜索和页面大小选择在回发时消失

我正在使用一个查询数据表，包装一个引导样式的表。使用.net repeater控件填充行。 最初，将显示搜索文本框和页面大小选择下拉列表。当我导致回发时，表中的数据会更新，但搜索文本框和页面大小选择dropddown会消失

这是在.aspx中：

<asp:UpdatePanel runat="server" ID="upnlPC" RenderMode="Block">
    <ContentTemplate>
        <div runat="server" id="divTRP" style="display:block">
            <table id="fcTRPTable" class="table table-striped table-bordered table-hover table-responsive">
                <thead>
                    <tr>
                        <th>Area</th>
                        <th>District</th>
                        <th>Plant</th>
                    </tr>
                </thead>

                <tbody>
                    <asp:Repeater runat="server" ID="rptTRPTableData">
                        <ItemTemplate>
                            <tr>
                                <td runat="server" id="tdArea"><%# Eval("Area") %></td>
                                <td runat="server" id="tdDistrict"><%# Eval("District") %></td>
                                <td runat="server" id="tdFacility"><%# Eval("Plant") %></td>
                        </ItemTemplate>
                    </asp:Repeater>
                </tbody>
            </table>
        </div>
    </ContentTemplate>
</asp:UpdatePanel>

<script>
    $(document).ready(function () {
        // DataTable, save state
        var adminUsersDT = $('#fcTRPTable').DataTable({
            'bDestroy':true,
            "bStateSave": true,
            dom: 'lfrtip',
            "fnStateSave": function (oSettings, oData) {
                localStorage.setItem('fcTRPTable', JSON.stringify(oData));
            },
            "fnStateLoad": function (oSettings) {
                return JSON.parse(localStorage.getItem('fcTRPTable'));
            }
        });
    });
</script>

解决方案

最初的问题是数据表位于更新面板中。它与搜索文本框或页面大小选择下拉列表无关；整个jQuery数据表将不会重新绘制

我的解决方案是（添加了以下javascript代码）：

---

我在上面编辑的问题中发布了我问题的解决方案；希望它能帮助人们节省几个小时的时间和几缕头发。

我意识到，不仅仅是搜索和页面大小选择消失了；整个jQuery数据表都消失了。我丢失了所有jQuery数据表功能。不确定如何在重新加载时重建datatable。我注意到问题是由于表位于更新面板内，而jQuery脚本位于更新面板外。部分回发不会强制脚本再次运行。如果我删除更新面板，它可以正常工作。你知道如何同时使用更新面板和jQuery数据表吗？在更新面板中移动脚本也没有帮助。

DataTable dtVD = someBLL.GiveMeTableData();
rptTRPTableData.DataSource = dtVD;
rptTRPTableData.DataBind();

$(function () {
    bindDataTable(); // bind data table on first page load
    // bind data table on every UpdatePanel refresh
    Sys.WebForms.PageRequestManager.getInstance().add_endRequest(bindDataTable);
});

function bindDataTable() {
    var adminUsersDT = $('#fcTable').DataTable({
        'bDestroy': true,
        "bStateSave": true,
        dom: 'lfrtip',
        "fnStateSave": function (oSettings, oData) {
            localStorage.setItem('fcTable', JSON.stringify(oData));
        },
        "fnStateLoad": function (oSettings) {
            return JSON.parse(localStorage.getItem('fcTable'));
        }
    });
}