html - JQuery Table Sorter with AJAX, Rowspan, and Colspan -

currently working jquery table sorter sort html table.

but, table kinda complex. here description:

• when page load, run ajax script data database
• when data received, displayed table
• for table, use jquery table sorter plugin sort table
• the table itself, contain rowspan , colspan thead

i have read several same question, should use 'trigger' function. don't know why, not solve problem.

here structure of table:

here 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 , 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 solve problem? in advance.

tablesorter works collecting of content of table , putting cache. when sort table, sorts cache, updates table putting rows in correct sort order.

if change content, cache not automatically update. if sort table, still pulling stored rows cache , overwrites newly added rows or of rows if using ajax.

so, after script updates table fresh ajax data, trigger "update" event on table signal tablesorter plugin contents of table have changed. this:

$.ajax({   datatype: "json",   url: url,   data: data,   success: function(){     // process, add table contents     $('table')         .find('tbody').html( newstuff )         // tell tablesorter new stuff added         // triggered on tbody,         // event bubbles table         .trigger('update');   } }); 

additionally, since of table contents changing, make sure use delegated events on buttons or form elements within table. example:

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