Question

我正在尝试设置我的第一个jQuery数据表并遇到一些问题。最初，我尝试使用Web服务API和ajax来填充表并遇到一个问题，其中正确返回了json数据但是表没有填充。我为此开了一篇SO帖here，但仍未开始工作。

所以，我决定在等待这个问题的解决方案时尝试另一个approcah并使用Repeater来填充表格。这种方法工作正常，但有一个问题：当返回的数据包含大约2000行和10列时，它需要IE（我们组织的默认浏览器）大约一分钟才能显示（太长时间）而在Chrome和FF中它大约需要3秒钟。

有谁知道为什么会发生这种情况，以及是否有修复或解决方法？我搜索过这个主题但没有找到任何解决方案。

页面正在使用母版页和数据表位于更新面板中。

需要此脚本来阻止“搜索”文本框和列排序在页面重新加载时消失：

<script type="text/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 = $('#tblFacCert').DataTable({
            'bDestroy': true,
            "bStateSave": true,
            dom: 'lfrtip',
            "fnStateSave": function (oSettings, oData) {
                localStorage.setItem('tblFacCert', JSON.stringify(oData));
            },
            "fnStateLoad": function (oSettings) {
                return JSON.parse(localStorage.getItem('tblFacCert'));
            }
        });
    }
</script>

的.aspx：

<div runat="server" id="divFacCert" ClientIDMode="Static" style="padding:15px">
    <asp:Repeater runat="server" ID="rptFacCert">
        <HeaderTemplate>
            <div class="table-responsive">
                <table id="tblFacCert" class="table table-striped table-bordered table-hover">
                    <thead>
                        <tr class="info">
                            <th>Area</th>
                            <th>District</th>
                            <th>MPOO </th>
                            <th>Facility</th>
                            <th>Type</th>
                            <th>Sub-Type</th>
                            <th>Response Due Date</th>
                            <th>Completed?</th>
                            <th>Completed By</th>
                            <th>Completed On</th>
                        </tr>
                    </thead>
                    <tbody>
        </HeaderTemplate>
        <FooterTemplate>
                    </tbody>
                </table>
            </div>
        </FooterTemplate>
        <ItemTemplate>
                    <tr>
                    <td><%# ((System.Data.DataRowView)Container.DataItem)["Area"] %></td>
                    <td><%# ((System.Data.DataRowView)Container.DataItem)["District"] %></td>
                    <td><%# ((System.Data.DataRowView)Container.DataItem)["MPOO"] %></td>
                    <td><%# ((System.Data.DataRowView)Container.DataItem)["FacilityName"] %></td>
                    <td><%# ((System.Data.DataRowView)Container.DataItem)["FacilityType"] %></td>
                    <td><%# ((System.Data.DataRowView)Container.DataItem)["FacilitySubType"] %></td>
                    <td><%# ((System.Data.DataRowView)Container.DataItem)["ResponseDueDate"] %></td>
                    <td><%# ((System.Data.DataRowView)Container.DataItem)["Completed"] %></td>
                    <td><%# ((System.Data.DataRowView)Container.DataItem)["UserName"] %></td>
                    <td><%# ((System.Data.DataRowView)Container.DataItem)["ResponseDate"] %></td>
                    </tr>
        </ItemTemplate>
    </asp:Repeater>
</div>

代码背后：

private void PopulateTable()
{
    dtCompliance = GetTableData();
    rptFacCert.DataSource = dtCompliance;
    rptFacCert.DataBind();
}

jQuery datatale使用Repeater来填充

0 个答案: