Pagination does not work correctly when data is changed


Topic: Pagination does not work correctly when data is changed

Titanium asked 2 months 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 2 months ago

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


Titanium commented 2 months 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.


Titanium answered 2 months 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.
Status

Resolved

Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: jQuery
  • MDB Version: 4.8.0
  • Device: HP
  • Browser: Chrome
  • OS: Windows 10
  • Provided sample code: No
  • Provided link: No