递归 RestAPI 调用在 Datatables 循环错误上呈现数据

Recursive RestAPI call render data on Datatables looping error

我需要进行递归 RestAPI 调用以克服 SharePoint Online 的 5000 次查看阈值。下面的代码在生成前 5000 个条目后进入循环。它生成数据表,然后递增以循环显示相同的数据。我的 SharePoint 列表中总共只有 8800 个条目。

我只需要使用递归调用生成第一批 5000 个条目,然后生成第二批 3800 个条目,并在 Jquery 数据表中显示 concat 数据。

$(document).ready(function() {
        var table = $('#table_id').DataTable({
            "pageLength": 100,
            "dom": 'Bfrtip',
            "buttons": [searchBuilder, copy],
            "aoColumns": [{"mData": "Created"}, {"mData": "EncodedAbsUrl"}]
        });
        
var response = response || [];

var listURL = "SPO_Site/_api/web/lists/getbytitle('List_Name')/items?$top=5000&$select=Created,EncodedAbsUrl";
GetListItemsRecursive(listURL);

function GetListItemsRecursive() {
    $.ajax({
        url: listURL,
        type: "GET",
        dataType: "json",
        headers: {
            "accept": "application/json;odata=verbose"
        },
        success: mySuccHandler,
        error: myErrHandler
    });
}

function mySuccHandler(data) {
    response = response.concat(data.d.results);
    console.log(data);
    if (data.d.__next) {GetListItemsRecursive(data.d.__next);}
    try {table.rows.add(response).draw();} 
    catch (e) {alert(e.message);}
}

function myErrHandler(data, errMessage) {alert("Error");}
});

我的测试代码供大家参考:

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.24/css/jquery.dataTables.css">
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.24/js/jquery.dataTables.js"></script>
<script>
    $(document).ready(function () {
    
        var response = response || [];

        var listURL = _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getbytitle('testn')/items?$top=5000&$select=ID,Title";
        GetListItemsRecursive(listURL);

        function GetListItemsRecursive(listURL) {
            $.ajax({
                url: listURL,
                type: "GET",
                dataType: "json",
                async: false,
                headers: {
                    "accept": "application/json;odata=verbose"
                },
                success: mySuccHandler,
                error: myErrHandler
            });
        }

        function mySuccHandler(data) {

            console.log(data)
            response = response.concat(data.d.results.map(e=>[e.ID,e.Title]));
            
            console.log(response);
            if (data.d.__next) { GetListItemsRecursive(data.d.__next); }
            // try { table.rows.add(response).draw(); }
            // catch (e) { alert(e.message); }

        }
        function myErrHandler() {

        }
        $('#table_id').DataTable({
                data: response,
                columns: [
                    { title: "ID" },
                    { title: "Title" }
                ]
            });
    })
</script>
<table id="table_id" class="display"></table>

测试结果: