I implemented the widget-scroller and widget column Selector in my table using the table sorter plugin in jQuery.
Has anyone encountered a problem like the one shown in this picture? It seems that my table headers do not align with the columns properly and are mixed up. I am currently using the latest version and applying theme.blue. Could I be overlooking something here? Despite extensive searches on Google, I have yet to find a solution to my issue.
Your assistance would be greatly appreciated. Thank you in advance for any help provided.
[Update] Here is the code snippet used to generate the table:
$.ajax({
type:"POST",
url:"../cdc/load/jsonTrack.php?",
data:dataString,
dataType: 'json',
success: function(data){
if(data.status === "success") {
var elements = data.elements;
if(elements.length === 0) {
$('#cdcTracking-list tbody').append( '<tr>' +
'<td colspan="7">No session to display</td>' +
'</tr>');
}
for( var i = 0; i < elements.length; i++){
var element = elements[i];
//console.log('session id:' + element.vesselCode);
$('#cdcTracking-list tbody').append( '<tr>' +
'<td style="color: green;">' + element.vesselCode + '</td>' +
'<td style="color: black;">' + element.voyage + '</td>' +
'<td style="color: black;">' + element.chasisNo + '</td>' +
'<td style="color: blue;">' + element.plateNo + '</td>' +
'<td style="color: blue;">' + element.bookingRef + '</td>' +
'<td style="color: blue;">' + element.serviceTerm +'</td>'+
'</tr>'
);
}
}else {
$('#cdcTracking-list tbody').append( '<tr><td colspan="7">No session to display</td></tr>');
}
}
});
HTML header :
<table id="cdcTracking-list" class="tablesorter-blue custom-popup" border="0" data-mode="columntoggle">
<thead>
<tr>
<th align="center">Vessel </th>
<th align="center">Voyage </th>
<th align="center">Chasis No</th>
<th align="center">Plate</th>
<th align="center" >Booking Ref</th>
<th align="center" >Service Term</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
Additionally, this is the tablesorter Javascript being used:
$("#cdcTracking-list").tablesorter({
widthFixed: false,
showProcessing: true,
headerTemplate: '{content} {icon}',
widgets: ['zebra', 'scroller', 'columnSelector'],
widgetOptions: {
columnSelector_container: $('#columnSelector'),
columnSelector_columns: {
0: ['disable'] /* set to disabled; not allowed to unselect it */
},
columnSelector_saveColumns: true,
columnSelector_layout: '<label><input type="checkbox">{name}</label>',
columnSelector_name: 'data-selector-name',
columnSelector_mediaquery: true,
columnSelector_mediaqueryName: 'Auto: ',
columnSelector_mediaqueryState: true,
columnSelector_breakpoints: ['20em', '30em', '40em', '50em', '60em', '70em'],
columnSelector_priority: 'data-priority',
scroller_height: 300,
scroller_barWidth: 18,
scroller_upAfterSort: true,
scroller_jumpToHeader: true,
scroller_idPrefix: 's_'
}
}).tablesorterPager(pagerOptions);