No data available in table when using Datatable js and Sharepoint List [closed]

Question

Closed. This question needs details or clarity. It is not currently accepting answers.

---

Want to improve this question? Add details and clarify the problem by editing this post.

Closed 3 years ago.

Improve this question

Any ideas below why i'm getting this lessgae displayed and the sort,search etc isn't working. THanks in Advance

        <script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script> 
    <link rel="stylesheet" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css"/> 
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css"/>

    <script type="text/javascript">
        $(document).ready(function () {
            $('#example').dataTable({

            }); 
        }); 
    </script>
    <script type="text/javascript">

            SP.SOD.executeFunc('sp.js', 'SP.ClientContext', intialiseAnnouncements);

            var maxAnnouncementItems = 5;

            function intialiseAnnouncements() {
                var clientContext = new SP.ClientContext.get_current();

                var web = clientContext.get_web();
                var list = web.get_lists().getByTitle("Media");

                var camlQuery = new SP.CamlQuery();

                var caml = "<View><Query><OrderBy><FieldRef Name=\"Modified\" Ascending=\"false\" /></OrderBy></Query><RowLimit>" + maxAnnouncementItems + "</RowLimit></View>";

                camlQuery.set_viewXml(caml);

                var announcementListItems = list.getItems(camlQuery);
                clientContext.load(announcementListItems);
                clientContext.executeQueryAsync(
                    function (sender, args) { // success
                        var listItemEnumerator = announcementListItems.getEnumerator();

                        //var html = "</tbody>";
                       var html="";
                        while (listItemEnumerator.moveNext()) {
                            var listItem = listItemEnumerator.get_current()
                            var id = listItem.get_id();
                            var title = listItem.get_item("Title");
                            var Body = listItem.get_item("Body");



                            html +=  "<tr><td>" + id + "</td><td>" + title + "</td></tr>";


                        }




                        $("#example tbody").append(html);

                    },
                    function (sender, args) { // failure
                        $("#example").html("Request failed. " + args.get_message() + "<br />\n" + args.get_stackTrace());
                    }
                );

                //setTimeout(intialiseAnnouncements, 10 * 60 * 1000); // referesh every 10 mins
            }

        </script>

    <table id="example" class="display" width="100%">
        <thead>
            <tr>
                <th>ID</th>
                <th>Title</th>


            </tr>
        </thead>
        <tbody>

        </tbody>
        <tfoot>
            <tr>
                <th>ID</th>
                <th>Title</th>


            </tr>
        </tfoot>

</table>

Answer 1

You should basically not append data to the datatable in a html manner, because DataTables will not be able to operate on it (it is not a real datasource for the table).

What you can do, is to use DataTables option ajax, where you can specify an asynchronous method to get table data (your jsom call for list items fits in this scenario). Data fetched from SP can be easily converted to array of js objects an afterwards you call callback(yourDataArray) within ajax method - this will inform DataTables that datasource has been refreshed and all data will be rendered properly. I would also suggest you specyfing columns option for DataTables, so that columns are available from the very beginning:

var getDataAsync = function (params, callback) {
 fetchSPData() //use jQuery.Deferred in method where you fetch SP data
    .done(function (data) {
        callback(data);
    });
};

var tableOptions = {
 ajax: getDataAsync, //your function which fetches SP data and calls callback method
 columns: [{
    data: "id",
    name: "id",
    title: "Id"
 }, 
 {
    data: "title",
    name: "title",
    title: "Title"
 },
 {
    data: "body",
    name: "body",
    title: "Body"
 }]
};