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 () {
            $('#dtBasicExample').DataTable();
            $('.dataTables_length').addClass('bs-select');
        });

        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.

Thanks


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.

FREE CONSULTATION

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

Status

Resolved

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