Is it possible to programmatically access rows from different pages within a TablePress table that utilizes pagination?

22 views Asked by At

I have a tablepress table on my WordPress website. I am performing a filtering action based on row data using JavaScript on a button click. I am doing that by accessing the class of the rows and I am getting the results for the first page. But when I click next on the pagination the second page results are not manipulated because those classes are not caught by the query selector.
Here is my code for reference:

var table = document.getElementById('table-1');
for (var i = 1; i < table.rows.length; i++) 
{
    var available = table.rows[i].cells[1].innerText;
    if(available==="True")
    {
      console.log("Found")
    }
                
}

In the above code, the no.of rows is 13 because only 13 rows are visible on the current page of the pagination. I want to select all the rows of my table that are present on the other pages as well.

How can I select all the rows in my tablepress? Even the rows which are on page 2 and page 3 to perform the filter action?

1

There are 1 answers

0
Atakan Au On BEST ANSWER

The HTML content of the page contains all the rows of your table. But after the page loads, the javascript code runs and deletes those rows (and the table). Then, the table seen with pagination is created dynamically. It is not possible to access all the initial table rows after the table is destroyed. For this reason; Your code needs to run before the plugin's code.

<table id="table-1" class="tablepress">
    ...
</table>
...
<script src="path/my-custom-code.js" id="tablepress-backup-js"></script>
<script src="path/jquery.datatables.min.js" id="tablepress-datatables-js"></script>

The content of 'my-custom-code.js' will be:

(function ($) {
    // Select table element and clone it
    var originalElement = $('#table-1');
    var clonedElement = originalElement.clone();

    // Change the id attribute
    clonedElement.attr('id', 'table-1-backup');

    // Append the clone to the page and hide it
    clonedElement.hide().appendTo('body');
})(jQuery);

You can backup a clone of the table with this code. You can access all data through this cloned table. You will need to do other filtering and conditioning operations yourself.