我正在使用寻呼机插件进行tableorter。我成功地整合了这个。我正在尝试为此实现AJAX分页。因此,每当用户点击next / pre按钮时,基本上都会从服务器端加载内容。我在tablesorter中遇到{page}和{size}的问题。表分类器中的这两个变量将替换为空值而不是正确的页面和大小值。任何人都能帮助我吗?
var ajax = "{f:uri.action(action: 'getAllFiles',noCacheHash: 1 )}";
$(function() {
$("table")
.tablesorter({ theme: 'blue', widthFixed: true, widgets: ['zebra', 'filter', 'pager'],})
// ****************************
// initialize the pager plugin
// ****************************
.tablesorterPager({
container: $(".pager"),
ajaxUrl : ajax+'&page={page}&size={size}& {sortList:col}&{filterList:fcol}',
customAjaxUrl: function(table, url) {
// manipulate the url string as you desire
//url += '&currPage=' +$('.curentpage').text();
//console.log(table);
// trigger a custom event; if you want
$(table).trigger('changingUrl', url);
// send the server the current page
return url;
},
ajaxError: null,
// add more ajax settings here
// see http://api.jquery.com/jQuery.ajax/#jQuery-ajax-settings
ajaxObject: {
dataType: 'json'
},
ajaxProcessing: function(data){
console.log(data)
if (data && data.hasOwnProperty('rows')) {
var indx, r, row, c, d = data.rows,
// total number of rows (required)
total = data.total_rows,
// array of header names (optional)
headers = data.headers,
// cross-reference to match JSON key within data (no spaces)
headerXref = headers.join(',').replace(/\s+/g,'').split(','),
// 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") {
// match the key with the header to get the proper column index
indx = $.inArray( c, headerXref );
// add each table cell data to row array
if (indx >= 0) {
row[indx] = d[r][c];
}
}
}
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];
}
},
// Set this option to false if your table data is preloaded into the table, but you are still using ajax
processAjaxOnInit: true,
// output string - default is '{page}/{totalPages}';
// possible variables: {size}, {page}, {totalPages}, {filteredPages}, {startRow}, {endRow}, {filteredRows} and {totalRows}
// also {page:input} & {startRow:input} will add a modifiable input in place of the value
output: '<div class="curentpage">{page}</div> {startRow} to {endRow} ({totalRows})',
// apply disabled classname (cssDisabled option) to the pager arrows when the rows
// are 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: 3,
// Saves the current pager page size and number (requires storage widget)
savePages: true,
// Saves tablesorter paging to custom key if defined.
// Key parameter name used by the $.tablesorter.storage function.
// Useful if you have multiple tables defined
storageKey: 'tablesorter-pager',
// Reset pager to this page after filtering; set to desired page number (zero-based index),
// or false to not change page at filter start
pageReset: 0,
// 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,
// If true, child rows will be counted towards the pager set size
countChildRows: 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
cssGoto : '.gotoPage', // page select dropdown - select dropdown that set the "page" option
cssPageDisplay : '.pagedisplay', // location of where the "output" is displayed
cssPageSize : '.pagesize', // page size selector - select dropdown that sets the "size" option
// class added to arrows when at the extremes; see the "updateArrows" option
// (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
cssErrorRow : 'tablesorter-errorRow' // error information row
});
});
</script>