JQuery Table Sorter with AJAX, Rowspan, and Colspan

Question

currently I am working with JQuery table sorter to sort my HTML table.

But, my table is kinda complex. Here is the description:

• When the page load, it will run AJAX script to get data from the database
• When the data received, it will be displayed as table
• For this table, I would like to use JQuery Table Sorter plugin to sort the table
• The table itself, contain rowspan and colspan for the thead

I have read several same question, which say that I should use 'trigger' function. But I don't know why, it does not solve my problem.

Here is the structure of my table:

Here is my code:

HTML

<div class = "container content" role = "main">
    <div id = "form">
        <h1 id = title>Check-Out</h1>
        <div id= datum></div>
        <div id = "table-checkout">
        </div>
    </div>
</div>

JavaScript and JQuery

$('document').ready(function(){
today = new Date();
dd = today.getDate();
mm = today.getMonth() + 1;
yy = today.getFullYear();
$("#datum").html("Datum: " + dd + "-" + mm + "-" + yy);
//$('#table-checkout').tablesorter();
checkout();
//$('#table-checkout').trigger('update');
});

function checkout()

{
    $.post("func/checkout.php",
    {

    },


function(data)
    {
        con = "<table id='table-modify' border=1>";
        con += "<tr>";
        con += "<th colspan = 2>Gastgeber</th>";
        con += "<th colspan = 2>Besucher</th>";
        con += "<th class=small rowspan = 2>Int.</th>";
        con += "<th class=small rowspan = 2>Ext.</th>";
        con += "<th class=small rowspan = 2>DP</th>";
        con += "<th rowspan = 2>Uhr Parkticket</th>";
        con += "<th colspan = 2>Check-In</th>";
        con += "<th colspan = 3>Check-Out</th>";
        con += "</tr>";
        con += "<tr>";
        con += "<th>Name</th>";
        con += "<th>Org.-Einheit</th>";
        con += "<th>Name</th>";
        con += "<th>KFZ-Kennzeichen</th>";
        con += "<th>MA</th>";
        con += "<th>Uhrzeit</th>";
        con += "<th>MA</th>";
        con += "<th>Uhrzeit</th>";
        con += "<th>Stunden</th>";
        con += "</tr>";

        row = data.split("_");
        for(i=0,j=row.length-1;i<j;i++)
        {
            col = row[i].split("#");
            con += "<tr>";
            for(k=0,m=col.length;k<m;k++)
            {
                if(col[k] == "internal" || col[k] == "external" || col[k] == "dp")
                {
                    if(col[k] == "internal")
                    {
                        con += "<td class=small><input id = int type =radio checked disabled></td>";
                        con += "<td class=small></td>";
                        con += "<td class=small></td>";
                    }
                    else if(col[k] == "external")
                    {
                        con += "<td class=small></td>";
                        con += "<td class=small><input id = int type =radio checked disabled></td>";
                        con += "<td class=small></td>";
                    }
                    else
                    {
                        con += "<td class=small></td>";
                        con += "<td class=small></td>";
                        con += "<td class=small><input id = int type =radio checked disabled></td>";
                    }
                }
                else
                {
                    con += "<td>"+col[k]+"</td>";
                }
            }
            con += "</tr>";
        }

        con += "</table>";
        $("#table-checkout").html(con);
    });
}

So, how could I solve my problem? Thanks in advance.

Answer 1

Tablesorter works by collecting all of the content of the table and putting it into a cache. When you sort a table, it actually sorts the cache, then updates the table by putting the rows back in the correct sort order.

If you change any content, the cache does not automatically update. So if you sort the table, it is still pulling the stored rows from the cache and overwrites any newly added rows or all of the rows if you are using ajax.

So, after your script updates the table with fresh ajax data, trigger an "update" event on the table to signal to the tablesorter plugin that the contents of the table have changed. It would look something like this:

$.ajax({
  dataType: "json",
  url: url,
  data: data,
  success: function(){
    // process, then add the table contents
    $('table')
        .find('tbody').html( newStuff )
        // tell tablesorter that new stuff was added
        // this is triggered on the tbody,
        // but the event bubbles up to the table
        .trigger('update');
  }
});

Additionally, since all of the table contents are constantly changing, make sure to use delegated events on any buttons or form elements within the table. For example:

$('table').on('click', '.checkout-button', function(){
    // do something
});