Search code examples
javascriptdatatablesrestsharepoint-rest-api

How to display two tables using Data Tables from two REST APIs in a single page?

I am working on Sharepoint REST API to show list items using Data Table in a HTML page. I wanted to show two tables in same page. So, I have two REST APIs and I'm able to show the first rest api data in first table. But unable to show the second rest api data in second table. Please clear my mistakes if found in the code below:

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,
        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);
}

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>
Solution

  • It's Solved. Two tables should have different success and error functions.