javascript - 加速 Ajax 成功 DOM 操作

Question

我在我的页面上使用 AJAX 调用返回表格行，成功后将它们添加到页面中的表格中。以下是目前使用的代码:

function GetDPRecords(Perso) {
        //alert(Perso);
        $Records = $('#DPRecords');

        //alert($PersoFileName.val()+" | "+$ProcFromDate.val()+" | "+$ProcToDate.val());
        $.ajax({
            type: "GET",
            url: "SelectDPRecords.jsp",
            data: $('form#Search_Form').serialize() + "&Personalized=" + Perso,
            beforeSend: function () {
                $Records.find("tr:gt(0)").remove();
                $("<tr><td colspan='4'><h3 style='margin: 4px 10px'> Loading... </h3></td></tr>").hide().appendTo($Records).show(400);
            },
            success: function (data) {
                $Records.find("tr:gt(0)").remove();
                $(data).hide().appendTo($Records).show(400);
            }
        });
    }

问题是我有时期望返回大量行 (1,000-5,000)。我做了一个测试运行，返回了 4,000 行数据，它导致浏览器在大约 20 秒内没有响应。

有什么方法可以优化代码并减少加载时间？

Answer 1

一种可能的解决方案是使用分页系统:不是返回 1,000-5,000 行，而是将结果分成几页，例如每页 50 个结果，并且一次只返回一页。然后，您将在表格的顶部/底部为用户提供加载其他页面的按钮。

有关我所说内容的示例，请参阅 http://luis-almeida.github.io/jPages/defaults.html .它使用图片而不是行，但它是相同的基本概念。