How to make TableSorter.js working with the table

Question

I have a table that I want to make sortable. The problem is that this table has been loaded from the external file (inc.php) via some JS (filter-data.js) function. To be more precisely, I have a main.php page with the Submit button. When I click on it, that triggers some JS code which calls inc.php file to populate my table with its data on demand from MySQL base and then puts them both (table + data) back to the main page:

This is the table placeholder on the main page.

<div id="tableData"></div>

This is the submit button on the main page:

 <input type="submit" onclick="genTable()" value="Populate users data">

This is what I am geting form the table.inc.php page:

<table id="my-table">
   <thead>
       <tr>
           <th>Column 1</th>
           <th>Column 2</th>
       </tr>
    </thead>
   <tbody>
       <tr>
           <td>45</td>
           <td>34</td>
       </tr>
       <tr>
           <td>23</td>
           <td>17</td>
       </tr>
   </tbody>
</table>

I am not sure how and where to call TS function - should it be on the main.php page or table.inc.php page? I tried almost everything but with no success.

$("#my-table").tablesorter();

If I skip JS and just require my table.inc.php file from main.php page, it works properly.

Thank you!

Answer 1

It is better practice to separate the HTML from scripting, so to do this, add this to your page (or even better, move the stuff inside the script tag into an external file):

<script>
// dom ready
$(function(){
    // do something when the submit button is clicked
    $('input[type=submit]').click(function(){
        // generate table
        genTable();
        // add sorting
        $("#my-table").tablesorter();
    });
});
</script>

Then modify your submit button code by removing the onclick attribute:

<input type="submit" value="Populate users data">

If that doesn't work, could you share the genTable(); code with us?

---

Sadly, I'm about to go out of town for a week... hopefully I can help you before then.

What I would recommend doing is download my fork of tablesorter because it has an option to disable client-side sorting: serverSideSorting (reference).

Then you can bind to tablesorter's sortEnd function:

$("#my-table").on("sortEnd", function(e, table) {

    // get sorting information
    // [[0,0]] means sort the first column (zero-based index) in ascending direction
    // [[0,1]] means sort the first column in a descending direction
    // [[0,0], [2,0]] means sort the first and third columns, both in the ascending direction
    var sortList = table.config.sortList,
        // set the sort direction
        // this is why I need to know what is stored in the #sort element,
        // or how the server knows how to sort the data
        d = 'something';

    $('#sort').val( d );
    genTable();
    // initialize tablesorter again, because the entire table is being replaced
    // Otherwise if you only update the tbody, use:
    // $("#my-table").trigger('update');
    $("#my-table").tablesorter({
        theme : 'blue', // required theme option (tablesorter fork)
        serverSideSorting : true
    });

});