Dynamically display the row as data becomes available

rthesman

I am trying to use DataTables to display data coming from SharePoint list using SPServices library.

I am trying to use the "async" option from SPServices but could not figure it out how to display the rows as they become available. The DataTables loaded with empty row message and the rest of the rows were added underneath it.

Here is the codes which I am using:

    $(document).ready(function() {      
        getListItems();
        $('theTable').DataTable({});
    });

    function getListItems() {
        $().SPServices({
            operation: "GetListItems",
            listName: listName,
            async: true
            completefunc: function (xData, Status) {
                // construct the row
                var row = $(this).attr('Title');
            }
            $('theTable').append(row);
        });
    }

Any help would be appreciated.