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

【问题标题】：Search and page size selection with jQuery Datatable disappear on postback使用 jQuery Datatable 进行搜索和页面大小选择在回发时消失
【发布时间】：2017-10-10 00:13:52
【问题描述】：

我正在使用一个查询数据表，包装一个引导样式的表。使用 .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'));
        }
    });
}

【问题讨论】：

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

标签： jquery asp.net datatables

【解决方案1】：

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

【讨论】：