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

Question

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

这是在 .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>

在 .aspx 中，page_load():

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

解决方案

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

我的解决方案是这样的(添加了以下 JavaScript 代码):

$(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'));
        }
    });
}

Answer 1

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