如何在单个页面中使用来自两个 REST API 的数据表显示两个表？

如何解决如何在单个页面中使用来自两个 REST API 的数据表显示两个表？

我正在研究 Sharepoint REST API，以在 HTML 页面中使用数据表显示列表项。我想在同一页面中显示两个表格。所以，我有两个 REST API，我可以在第一个表中显示第一个 REST API 数据。但无法在第二个表中显示第二个休息 api 数据。如果在下面的代码中发现我的错误，请清除我的错误：

file.js


$(document).ready(function () {
    loadTableItems();
    loadCountItems();
 });

function loadTableItems() {

    var oDataUrl = _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getbytitle('abc')/items?$select=Title,Count,Modified,OData__x0075_hb9";
    $.ajax({
        url: oDataUrl,type: "GET",dataType: "json",headers: {
            "accept": "application/json;odata=verbose"
        },success: mySuccHandler,error: myErrHandler
    });
}

function mySuccHandler(data) {
    try {
        var dataTable = $('#table_id').DataTable();
        if (dataTable != 'undefined') {
            dataTable.destroy();
        }
        dataTable = $('#table_id').DataTable({
            responsive: true,"lengthChange": false,paging: true,bAutowidth: false,columnDefs: [
                { className: "dt-head-center","targets": [0,1,2,3] },],"aaData": data.d.results,"aoColumns": [{
                "mData": "OData__x0075_hb9",},{
                "mData": "Title",sWidth: '30%'
            },{
                "mData": "Count","sClass": "column-align"
            },{
                "mData": "Modified","sClass": "column-align","render": function (mData) {
                    var date = moment(mData);
                    return (date.format('ddd DD-MM-YYYY hh:mm A'));
                }

            }],"dom": 'lBftipr',buttons: [
                {
                    extend: 'excelHtml5',text: 'Export to Excel',title: 'Analytics',}]
        });
    }
    catch (e) {
        alert(e.message);
    }
}

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


function loadCountItems() {

    var restUrl = _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getbytitle('xyz')/items?$select=vmmm,zpdq,zlvx,t75f";
    $.ajax({
        url: restUrl,error: myErrHandler
    });
}

function mySuccHandler(data) {
    try {
        var countTable = $('#art_id').DataTable();
        if (countTable != 'undefined') {
            countTable.destroy();
        }
        countTable = $('#art_id').DataTable({
            responsive: true,"aoColumns": [{
                "mData": "vmmm",{
                "mData": "zpdq",{
                "mData": "zlvx",{
                "mData": "t75f",}
            ],});
    }
    catch (e) {
        alert(e.message);
    }
}

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

file.html

<body>
    <div>
        <table id="table_id" class="display" cellspacing="0" width="100%">
            <thead>
                <tr>
                    <th>Practice</th>
                    <th>Title</th>
                    <th>Visits</th>
                    <th>Last Visited</th>
                </tr>
            </thead>
        </table>
    </div>
    <br>
    <br>
    <br>
    <h3 style="text-align:left; color:rgb(0,112,173)">Artifacts per Practice</h3>
    <br>
    <div>
       <table id="art_id" class="display" cellspacing="0" width="100%">
            <thead>
                <tr>
                    <th>Engagement</th>
                    <th>Process</th>
                    <th>Practice</th>
                    <th>Artifact Count</th>
                </tr>
            </thead>
        </table>

    </div>

</body>

解决方法

解决了。两个表应该有不同的成功和错误函数。