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

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

venkatsaivenkatsai Posts: 1Questions: 1Answers: 0

Hi Tech Experts! I'm using Data tables plugin to display Sharepoint list items in the table using Sharepoint REST API. So, I have two different APIs. 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. I have mentioned two tables in html with two different ids and used them in js accordingly with jQuery selector.
Please rectify my mistakes if found in the below code.

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>

Answers

  • colincolin Posts: 11,300Questions: 0Answers: 1,931

    Looks like you've named the functions the same, two lots of mySuccHandler and two lots of myErrHandler. Either define them within the function that makes the ajax call, to reduce the scope, or name them uniquely.

    Colin

Sign In or Register to comment.