我有这个代码 一切正常
<script type="text/javascript">
$(function() {
// Initialize tablesorter
// ***********************
$("table")
.tablesorter({
theme: 'blue',
widthFixed: true,
sortLocaleCompare: true, // needed for accented characters in the data
sortList: [ [0,1] ],
widgets: ['zebra', 'filter']
})
// initialize the pager plugin
// ****************************
.tablesorterPager({
// **********************************
// Description of ALL pager options
// **********************************
// target the pager markup - see the HTML block below
container: $(".pager"),
// use this format: "http:/mydatabase.com?page={page}&size={size}&{sortList:col}"
// where {page} is replaced by the page number (or use {page+1} to get a one-based index),
// {size} is replaced by the number of records to show,
// {sortList:col} adds the sortList to the url into a "col" array, and {filterList:fcol} adds
// the filterList to the url into an "fcol" array.
// So a sortList = [[2,0],[3,0]] becomes "&col[2]=0&col[3]=0" in the url
// and a filterList = [[2,Blue],[3,13]] becomes "&fcol[2]=Blue&fcol[3]=13" in the url
ajaxUrl : 'ajaxServlet?page={page}&{filterList:filter}&{sortList:column}',
// modify the url after all processing has been applied
customAjaxUrl: function(table, url) {
// manipulate the url string as you desire
// url += '&cPage=' + window.location.pathname;
// trigger my custom event
$(table).trigger('changingUrl', url);
// send the server the current page
return url;
},
// add more ajax settings here
// see http://api.jquery.com/jQuery.ajax/#jQuery-ajax-settings
ajaxObject: {
dataType: 'json'
},
// process ajax so that the following information is returned:
// [ total_rows (number), rows (array of arrays), headers (array; optional) ]
// example:
// [
// 100, // total rows
// [
// [ "row1cell1", "row1cell2", ... "row1cellN" ],
// [ "row2cell1", "row2cell2", ... "row2cellN" ],
// ...
// [ "rowNcell1", "rowNcell2", ... "rowNcellN" ]
// ],
// [ "header1", "header2", ... "headerN" ] // optional
// ]
// OR
// return [ total_rows, $rows (jQuery object; optional), headers (array; optional) ]
ajaxProcessing: function(data){
if (data && data.hasOwnProperty('rows')) {
var r, row, c, d = data.rows,
// total number of rows (required)
total = data.total_rows,
// array of header names (optional)
headers = data.headers,
// all rows: array of arrays; each internal array has the table cell data for that row
rows = [],
// len should match pager set size (c.size)
len = d.length;
// this will depend on how the json is set up - see City0.json
// rows
for ( r=0; r < len; r++ ) {
row = []; // new row array
// cells
for ( c in d[r] ) {
if (typeof(c) === "string") {
row.push(d[r][c]); // add each table cell data to row array
}
}
rows.push(row); // add new row array to rows array
}
// in version 2.10, you can optionally return $(rows) a set of table rows within a jQuery object
return [ total, rows, headers ];
}
},
// output string - default is '{page}/{totalPages}'; possible variables: {page}, {totalPages}, {startRow}, {endRow} and {totalRows}
output: '{startRow} to {endRow} ({totalRows})',
// apply disabled classname to the pager arrows when the rows at either extreme is visible - default is true
updateArrows: true,
// starting page of the pager (zero based index)
page: 0,
// Number of visible rows - default is 10
size: 25,
// if true, the table will remain the same height no matter how many records are displayed. The space is made up by an empty
// table row set to a height to compensate; default is false
fixedHeight: false,
// remove rows from the table to speed up the sort of large tables.
// setting this to false, only hides the non-visible rows; needed if you plan to add/remove rows with the pager enabled.
removeRows: false,
// css class names of pager arrows
cssNext : '.next', // next page arrow
cssPrev : '.prev', // previous page arrow
cssFirst : '.first', // go to first page arrow
cssLast : '.last', // go to last page arrow
cssPageDisplay : '.pagedisplay', // location of where the "output" is displayed
cssPageSize : '.pagesize', // page size selector - select dropdown that sets the "size" option
cssErrorRow : 'tablesorter-errorRow', // error information row
// class added to arrows when at the extremes (i.e. prev/first arrows are "disabled" when on the first page)
cssDisabled : 'disabled' // Note there is no period "." in front of this class name
});
});
HTML：
<body>
<div class="content">
<table class="tablesorter">
<thead>
<tr>
<td class="pager" colspan="5">
<img src="tablesorter-master/addons/pager/icons/first.png" class="first"/>
<img src="tablesorter-master/addons/pager/icons/prev.png" class="prev"/>
<span class="pagedisplay"></span> <!-- this can be any element, including an input -->
<img src="tablesorter-master/addons/pager/icons/next.png" class="next"/>
<img src="tablesorter-master/addons/pager/icons/last.png" class="last"/>
<select class="pagesize">
<option selected="selected" value="10">10</option>
<option value="20">20</option>
<option value="30">30</option>
<option value="40">40</option>
</select>
</td>
</tr>
<tr>
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
</tr>
</thead>
<tfoot>
<tr>
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
</tr>
<tr>
<td class="pager" colspan="5">
<img src="tablesorter-master/addons/pager/icons/first.png" class="first"/>
<img src="tablesorter-master/addons/pager/icons/prev.png" class="prev"/>
<span class="pagedisplay"></span> <!-- this can be any element, including an input -->
<img src="tablesorter-master/addons/pager/icons/next.png" class="next"/>
<img src="tablesorter-master/addons/pager/icons/last.png" class="last"/>
<select class="pagesize">
<option selected="selected" value="10">10</option>
<option value="20">20</option>
<option value="30">30</option>
<option value="40">40</option>
</select>
</td>
</tr>
</tfoot>
<tbody> <!-- tbody will be loaded via JSON -->
</tbody>
</table>
</div>
</body>
所有记录都显示在表格中！ 我遇到的问题是，我的所有记录都只显示在一个站点上（在本例中为200条记录），因此寻呼机和过滤器无法正常工作。 我能做些什么来解决这个问题？
谢谢
答案 0 :(得分：0)
只是为了确认，因为上面的代码没有显示加载了jQuery和tablesorter - 除非你单独加载它们，否则你需要使用script标记加载它们。