如何快速将大量SharePoint列表数据加载至jQuery DataTable？

毫无疑问，分页获取数据（服务器端分页）是更适合的方案，原因如下：

一、分页获取的核心优势 #

• 性能可控：一次性加载10万条数据会直接拖垮前端，不仅加载时间超长，还会导致浏览器内存溢出、页面卡顿。而分页每次只请求当前页（比如10/20条）的数据，带宽和前端内存占用都能维持在合理范围。
• 适配SharePoint特性：SharePoint的REST API/OData原生支持$skip（跳过条目数）和$top（获取条目数）参数，能轻松实现分页查询，还可以配合$count获取总条目数，为DataTable提供分页依据。
• 完美兼容jQuery DataTable：DataTable自带serverSide: true配置，开启后会自动在请求中传递分页参数（起始位置、每页条数），你只需要对接SharePoint API返回对应页的数据和总条数，DataTable会自动渲染分页控件并处理分页切换逻辑，开发成本低。
• 用户体验更稳定：用户打开页面就能看到内容，不需要等待全量数据加载，分页切换的响应速度也远快于全量加载。

二、延迟加载的局限性 #

延迟加载（滚动加载）看似也是分批获取，但对于10万条数据的场景存在明显短板：

• DOM膨胀问题：随着用户不断滚动，前端会累积渲染越来越多的DOM元素，最终还是会出现页面卡顿、响应变慢的情况。
• 数据一致性风险：如果SharePoint列表数据在用户滚动过程中发生变更，延迟加载可能出现重复加载或漏加载数据的情况，而分页每次查询都是基于最新数据，一致性更有保障。
• 内存占用不可控：已加载的数据会一直保存在前端内存中，滚动次数越多内存占用越高，极端情况下还是会导致浏览器崩溃。

简单实现思路示例 #

配置DataTable开启服务器端处理，对接SharePoint REST API：

$('#example').DataTable({
    serverSide: true,
    ajax: function(data, callback, settings) {
        // 转换DataTable的分页参数为SharePoint API参数
        const skip = data.start;
        const top = data.length;
        // 调用SharePoint REST API
        fetch(`/_api/web/lists/getbytitle('YourList')/items?$skip=${skip}&$top=${top}&$count=true`, {
            headers: {
                'Accept': 'application/json;odata=nometadata'
            }
        })
        .then(response => response.json())
        .then(result => {
            callback({
                draw: data.draw,
                recordsTotal: result['@odata.count'],
                recordsFiltered: result['@odata.count'],
                data: result.value
            });
        });
    },
    columns: [
        { data: 'Title' },
        // 其他列配置
    ]
});

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