jquery - 如何一次加载 HTML 表格部分

Question

我有一个表，每次从下拉列表中选择一个新选项时，它都会异步重建。我能够调用电话并且正确生成了 HTML，但是当它通过网络发回时，如果尺寸太大，它就会中断。

我在想一个解决方案是查询表的各个部分，直到通过每次单独调用返回所有行。然后我想到了 Twitter 如何处理他们的提要并在用户滚动到列表底部时添加更多内容。

有什么建议吗？

以下是我正在尝试做的一些代码示例:

$('[id$=ddCorpIngredientClasses]').change(function () {

        callScriptMethod(
        'IngredientProperties.aspx/ReBuildCorpIngredientTable',

        { 'ingredientClass': $(this).val() },
        function (result) {
            $('[id$=_SlideOutPanelBodyTable]').empty();
            $(result).each(function () {

                var row = this.toString();

                $('[id$=_SlideOutPanelBodyTable]').append(row);

            });
            adjustBodytable();
        });

    });


function callScriptMethod(url, jsonObject, callback, async) {

    callback = callback || function () { };
    async = (async == null || async);

    $.ajax({
        type: 'POST',

    contentType: 'application/json; charset=utf-8',
    url: url,
    data: JSON.stringify(jsonObject),
    dataType: 'json',
    async: async,
    success: function (jsonResult) {
        if ('d' in jsonResult)
            callback(jsonResult.d);
        else
            callback(jsonResult);
    },
    error: function () {
        alert("Error calling '" + url + "' " + JSON.stringify(jsonObject));
        callback([]);
    }
});
}

Answer 1

使用SlickGrid使用 AJAX 数据源。 ( Demos here. )

基本上，您一次只能加载 50 行。当用户滚动时，将请求并无缝呈现接下来的 50 行。此外，SlickGrid 会在用户滚动时动态创建和删除 DOM 元素，因此实际行数永远不会超过屏幕上的行数。这意味着 SlickGrid 可以毫不费力地处理 数百万 行。