Topic: Pagination does not work correctly when data is changed

Titanium free asked 5 years ago

Expected behavior

Pagination should let me see the latest updated data instead of the old one

Actual behavior

After updating table data, when I use pagination, it does not show me the latest updated data, instead it reverts to the previous table data, more information is explained below in code.

Resources (screenshots, code snippets etc.)

I am using following code to update the datatable:

$(document).ready(function () {

        var tableData = JSON.parse(jsonDataIsPlacedHere);

        function source(type) {

            document.getElementById("tableBody").innerHTML = "";

            for (i = 0; i < Object.keys(tableData[type]).length; i++) {

                document.getElementById("tableBody").insertAdjacentHTML('beforeend', '<tr><td>' + tableData[type][i].Username + '</td><td>' + tableData[type][i].site + '</td><td>' + tableData[type][i].counter + '</td></tr>');


But after this code when it updates the data, the 1st page is shown correctly, however the moment I use the pagination to go to next page, it reverts back to previous data and deletes the update.

So my question is, how to update datatable source in jquery datatables ? I am assuming that I am doing something wrong here because in vue if we update the data source, DOM is updated automatically but here there must be a different method.


Krzysztof Wilk staff commented 5 years ago

Hello, can you make a snippet with your problem? I want to see it with my on eyes

Titanium free commented 5 years ago

Hi I added button code, basically when the page loads, I call the 1st button onclick, however if I use 2nd button to update data into different one, it loads the 1st page correctly but when use pagination then it reverts back to old data.

Krzysztof Wilk staff answered 5 years ago

Titanium free answered 5 years ago

<button class="btn btn-unique waves-effect m-0" type="button" onclick="source(0)">Absolute Source</button>
<button class="btn btn-unique waves-effect m-0" type="button" onclick="source(1)">Unified Source</button>

Please insert min. 20 characters.


Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.



Specification of the issue

  • ForumUser: Free
  • Premium support: No
  • Technology: MDB jQuery
  • MDB Version: 4.8.0
  • Device: HP
  • Browser: Chrome
  • OS: Windows 10
  • Provided sample code: No
  • Provided link: No