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

问题描述

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

文件.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,
        type: "GET",
        dataType: "json",
        headers: {
            "accept": "application/json;odata=verbose"
        },

        success: mySuccHandler,
        error: myErrHandler
    });
}

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

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

文件.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>

标签： javascriptdatatablesrestsharepoint-rest-api

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

问题描述

解决方案

推荐阅读