我在这个tablesorter jquery中非常新。现在我使用一些javascript代码生成表.Below是我的代码：
$(document).ready(function() {
$.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>');
}
}
});
});
//jquery tablesorter
$("#cdcTracking-list").tablesorter({
widthFixed: false,
showProcessing: true,
headerTemplate: '{content} {icon}',
widgets: ['zebra','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'
}
}).tablesorterPager(pagerOptions);
var pagerOptions = {
// target the pager markup - see the HTML block below
container: $("#pager"),
ajaxUrl: null,
ajaxProcessing: function(ajax){
if (ajax && ajax.hasOwnProperty('data')) {
// return [ "data", "total_rows" ];
return [ ajax.data, ajax.total_rows ];
}
},
output: '{startRow} to {endRow} ({totalRows})',
updateArrows: true,
page: 0,
size: 10,
fixedHeight: true,
removeRows: false,
cssNext: '.next', // next page arrow
cssPrev: '.prev', // previous page arrow
cssFirst: '.first', // go to first page arrow
cssLast: '.last', // go to last page arrow
cssGoto: '.gotoPage', // select dropdown to allow choosing a page
cssPageDisplay: '.pagedisplay', // location of where the "output" is displayed
cssPageSize: '.pagesize', // page size selector - select dropdown that sets the "size" option
cssDisabled: 'disabled' // Note there is no period "." in front of this class name
};
这是html的寻呼机
<table id="cdcTracking-list" class="tablesorter-blue" 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>
</tr>
</thead>
<tbody>
</tbody>
</table>
<table>
<tr><td>
<div id="pager" class="pager">
<form>
<img src="../cdc/table/mottie-tablesorter/addons/pager/icons/first.png" class="first"/>
<img src="../cdc/table/mottie-tablesorter/addons/pager/icons/prev.png" class="prev"/>
<input type="text" class="pagedisplay"/>
<img src="../cdc/table/mottie-tablesorter/addons/pager/icons/next.png" class="next"/>
<img src="../cdc/table/mottie-tablesorter/addons/pager/icons/last.png" class="last"/>
<select class="pagesize">
<option selected="selected" value="5">5</option>
<option value="10">10</option>
<option value="20">20</option>
<option value="30">40</option>
</select>
</form>
</div>
</td></tr>
</table>
我不知道为什么来自jquery tablesorter的寻呼机插件不适用于我的桌子。我在这里错过了什么？请帮助我，我可以为我的错误学习。
答案 0 :(得分：1)
您在定义之前使用了 pagerOptions 。 所以试着把
var pagerOptions = ....
在你订购它之前。它会帮助
答案 1 :(得分：1)
代码存在两个问题。
pagerOptions尚未定义。