使用Repeater填充jQuery DataTable在IE中加载缓慢问题求助

Hey there! Let's break down your two main issues: the glacial IE load time for your Repeater-rendered table, and that initial Ajax/Web Service problem that had you stuck.

1. Fixing IE's 1-Minute Load Time for 2000 Rows #

IE is notoriously bad at handling large DOM batches and JavaScript-heavy operations compared to modern browsers. Here are actionable fixes tailored to your setup (with UpdatePanel and existing script requirements):

Option 1: Enable Server-Side Processing (Best Long-Term Fix) #

Instead of rendering all 2000 rows upfront, let DataTable fetch only the rows needed for the current page. This drastically cuts down on the DOM elements IE has to process.

Modify Your Client-Side Script:

Update your bindDataTable function to enable server-side processing. You'll need to point it to a backend endpoint that handles pagination, sorting, and search:

function bindDataTable() {
    var adminUsersDT = $('#tblFacCert').DataTable({
        'bDestroy': true,
        "bStateSave": true,
        dom: 'lfrtip',
        "serverSide": true, // Turn on server-side processing
        "ajax": {
            "url": "YourPage.aspx/GetTableData", // Replace with your actual backend method
            "type": "POST",
            "contentType": "application/json; charset=utf-8",
            "dataType": "json",
            "data": function (d) {
                // Pass DataTable's server-side params to your backend
                return JSON.stringify(d);
            },
            "dataSrc": function (json) {
                // Parse response to match DataTable's expected format
                return JSON.parse(json.d).data; // Adjust based on your Web Service's response structure
            }
        },
        "columns": [ // Map columns to your JSON data keys
            { "data": "Area" },
            { "data": "District" },
            { "data": "MPOO" },
            { "data": "FacilityName" },
            { "data": "FacilityType" },
            { "data": "FacilitySubType" },
            { "data": "ResponseDueDate" },
            { "data": "Completed" },
            { "data": "UserName" },
            { "data": "ResponseDate" }
        ],
        "fnStateSave": function (oSettings, oData) {
            localStorage.setItem('tblFacCert', JSON.stringify(oData));
        },
        "fnStateLoad": function (oSettings) {
            return JSON.parse(localStorage.getItem('tblFacCert'));
        }
    });
}

Update Your Backend:

Modify your GetTableData method to accept server-side parameters (like start, length, search, order) and return paginated data in DataTable's required format:

[WebMethod]
public static object GetTableData(int draw, int start, int length, string searchValue, List<Order> order, List<Column> columns)
{
    DataTable dtCompliance = GetTableData(); // Your existing data retrieval logic
    // Apply pagination, sorting, filtering based on incoming params
    var filteredData = dtCompliance.AsEnumerable()
        .Where(row => row["Area"].ToString().Contains(searchValue) || /* Add other search fields */)
        .OrderBy(row => /* Apply sorting based on order params */)
        .Skip(start)
        .Take(length)
        .ToList();
    
    return new {
        draw = draw,
        recordsTotal = dtCompliance.Rows.Count,
        recordsFiltered = filteredData.Count,
        data = filteredData
    };
}

Option 2: Optimize Client-Side Rendering (Quick Win) #

If you can't switch to server-side processing right now, use DataTable's deferRender option to delay rendering rows that aren't visible in the viewport:

function bindDataTable() {
    var adminUsersDT = $('#tblFacCert').DataTable({
        'bDestroy': true,
        "bStateSave": true,
        dom: 'lfrtip',
        "deferRender": true, // Delay rendering off-screen rows
        "scrollY": "600px", // Add vertical scrolling to limit visible rows
        "scrollCollapse": true,
        "paging": true, // Ensure pagination is enabled
        "fnStateSave": function (oSettings, oData) {
            localStorage.setItem('tblFacCert', JSON.stringify(oData));
        },
        "fnStateLoad": function (oSettings) {
            return JSON.parse(localStorage.getItem('tblFacCert'));
        }
    });
}

This cuts down the initial DOM load in IE by only rendering rows that fit in the scrollable area.

Option 3: Tweak UpdatePanel Behavior #

Since your DataTable is inside an UpdatePanel, every partial postback re-renders the entire table. To minimize impact:

• Avoid wrapping the entire table in the UpdatePanel if possible; only wrap the parts that need partial updates.
• Ensure that after the UpdatePanel refreshes, DataTable initializes as efficiently as possible (the deferRender option above helps here).

2. Troubleshooting the Initial Ajax/Web Service Issue #

You mentioned JSON returned normally but the table wouldn't load. The most common culprits here are:

• Missing columns configuration: DataTable needs explicit mapping between JSON keys and table columns.
• Incorrect dataSrc setting: If your Web Service returns JSON wrapped in a property (like { "d": [...] }), you need to specify dataSrc: "d" in the Ajax config.
• Mismatched data types: Ensure dates and other values are formatted correctly for DataTable.

For example, if your Web Service returns JSON like:

{ "d": [ { "Area": "North", "District": "A1", ... }, ... ] }

Your Ajax config should include:

"ajax": {
    "url": "YourWebService.asmx/GetData",
    "type": "POST",
    "contentType": "application/json; charset=utf-8",
    "dataType": "json",
    "dataSrc": "d" // Point to the array inside the 'd' property
},
"columns": [
    { "data": "Area" },
    { "data": "District" },
    // ... rest of the columns
]

内容的提问来源于stack exchange，提问作者NoBullMan