How to reload table data using DataTables, Ajax call & Json response?

Question

I have a table that is generated through Thymeleaf. I would like to refresh the contents of the table using jQuery.

    <table class="table table-hover" id="main-table">
        <thead class="thead-inverse">
            <tr>
                <th class="col-md-2 text-center">Network Id</th>
                <th class="col-md-2 text-center">Rep date</th>
                <th class="col-md-2 text-center">Hashrate [KH/s]</th>
            </tr>
        </thead>
        <tbody>
            <tr th:each="networkHashrate : ${networkHashrates}" th:onclick="'javascript:openPoolModal(\''+ ${networkHashrate.id} + '\');'">
                <td class="text-center" id="hashrateId" th:text="${networkHashrate.id}"> Sample id</td>
                <td class="text-center" id="repDate" th:text="${@findAndDisplayDataService.formatDate(networkHashrate.repDate)}">Sample rep-date</td>
                <td class="text-center" id="hashrate" th:text="${@findAndDisplayDataService.formatHashrate(networkHashrate.hashrate)}">Sample hashrate</td>
            </tr>
        </tbody>
    </table>

I have come up with such function to update table contents every 8s:

$(document).ready(function() {
var table = $('#main-table').DataTable({
           ajax: {
                url: '/refresh',
                dataSrc:''

            },
           paging: true,
           lengthChange: false,
           pageLength: 20,
           stateSave: true,
           info: true,
           searching: false,
           "aoColumns": [
             { "orderSequence": [ "asc", "desc" ] },
             { "orderSequence": [ "asc", "desc" ] },
             { "orderSequence": [ "desc", "asc" ] }
           ],
           "order": [[ 0, "asc" ]]
});


setInterval(function(){
table.ajax.reload();
}, 8000);
});

Here's the JSON response:

[{  
  "id":1,
  "repDate":{  
     "offset":{  },
     "nano":880042000,
     "year":2018,
     "monthValue":4,
     "dayOfMonth":25,
     "hour":12,
     "minute":58,
     "second":53,
     "month":"APRIL",
     "dayOfWeek":"WEDNESDAY",
     "dayOfYear":115
  },
  "hashrate":5114926.0
},...more entries
]

An empty table prints and I keep getting an error:

Uncaught TypeError: Cannot read property 'reload' of undefined

There's also an alert pop-up saying:

Data Tables warning: table id=main-table - Requestem unknown parameter '0' for row 0 column 0. For more information about this error, please see: http://datatables.net/tn/4

EDIT

I moved table declaration outside the function. Now I just keep getting the warning.

EDIT 2

I did as you stated, the data keeps refreshing, but there are still few issues.

First of all, my stateSave: true property stopped working, so when the table is reloaded it always gets back to the first page.
Secondly, I lost all my styling (class="text:center" for example) and on:click property that were originally in my html file.

The error message suggests that table.ajax is undefined. Try moving the declaration of table outside any functions. — user5734311
– user5734311, Commented Apr 26, 2018 at 10:02
That helped. Thanks. I still get no values. Any ideas what could possible be wrong? — Maciaz
– Maciaz, Commented Apr 26, 2018 at 10:04
I checked your code as-is, and I'm not getting the undefined error. Are you sure the JSON response is located at /refresh? Is that the entire response? — user5734311
– user5734311, Commented Apr 26, 2018 at 10:15

Mabrouki Fakhri · Accepted Answer · 2018-04-26 10:13:58Z

2

Try to declare the table before the $(document).ready :

var table;
$(document).ready(function() {
  table = $('#main-table').DataTable({"serverSide": true, ...})
  setInterval(function(){
     table.ajax.reload();
   }, 8000);
})

The error is related to your column definition, try this way to define columns :

 "columnDefs": [
                    {
                        "targets": 0,
                        "data": "id",
                    },
                    {
                        "targets": 1,
                        "data": "repDate",
                    },
                    {
                        "targets": 2,
                        "data": "repDate",
                    }
                ]

answered Apr 26, 2018 at 10:13

Mabrouki Fakhri

2291 silver badge7 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Maciaz Over a year ago

That pretty much works, but could you please check my Edit 2 as there are some more issues related to your solution.

Mabrouki Fakhri Over a year ago

Hi ! sorry for being late ! With jquery handle the click event : $('#main-table tbody').on('click', 'tr', function () { var data = table.row( this ).data(); //do whatever you want with the data (you can get all the data you get from the server not only those shown in the DataTable } ); if this didn't work I have another solution for you ! best of luck

Collectives™ on Stack Overflow

How to reload table data using DataTables, Ajax call & Json response?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related