I am using jQuery Tablesorter with its pager. What I am trying to do is load the content bit by bit using AJAX for each page. The problem is that each time when the table is loaded two AJAX requests are sent. When I try to change the page displayed from the dropdown menu I get one request for the new page and immediately after that I get another AJAX request for the first page which overrides the content. Some code for reference:
$(function(){
// Initialize tablesorter
// ***********************
$("#request-table")
.tablesorter({
theme: 'blue',
widthFixed: true,
sortLocaleCompare: true, // needed for accented characters in the data
sortList: [ [0,1] ],
widgets: ['zebra', 'filter', 'pager'],
}).tablesorterPager({
container: $(".pager"),
// use this url format "http:/mydatabase.com?page={page}&size={size}"
ajaxUrl: '<?php echo $this->url(); ?>?page={page}&{filterList:filter}&{sortList:column}&size={size}',
pager_ajaxUrl: 'assets/City{page}.json?{filterList:filter}&{sortList:column}',
// process ajax so that the data object is returned along with the
// total number of rows; example:
// {
// "data" : [{ "ID": 1, "Name": "Foo", "Last": "Bar" }],
// "total_rows" : 100
// }
ajaxProcessing: function(ajax) {
if (ajax && ajax.hasOwnProperty('data')) {
$('#request-table')
.find('tbody')
.empty();
$(ajax.data).each(function(rowIndex, row) {
var tr = '<tr data-toggle="modal">';
tr += '<input type="hidden" class="requestId" data-request-id="' + row['id'] + '"/>' ;
tr += '<td>' + row['name'];
if(row['message_count'] > 0) {
tr += '<span class="badge pull-right">' + row['message_count'] + '</span>';
}
tr += '</td>';
tr += '<td>' + row['start_date'] + '</td>';
tr += '<td>' + row['end_date'] + '</td>';
tr += '<td class="status" data-status="' + row['status'] + '">' + row['status'] + '</td>';
tr += '<td>' + row['is_printed'] + '</td>';
tr += '</tr>';
$row = $(tr),
$('#request-table')
.find('tbody')
.append($row)
.trigger('addRows', [$row]);
});
}
initRequests();
return [ajax.total_rows];
},
// 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: 1,
// Number of visible rows - default is 10
size: 100,
// 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: true,
// 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
// next page arrow
cssNext: '.next',
// previous page arrow
cssPrev: '.prev',
// go to first page arrow
cssFirst: '.first',
// go to last page arrow
cssLast: '.last',
// select dropdown to allow choosing a page
cssGoto: '.gotoPage',
// location of where the "output" is displayed
cssPageDisplay: '.pagedisplay',
// dropdown that sets the "size" option
cssPageSize: '.pagesize',
// class added to arrows when at the extremes
// (i.e. prev/first arrows are "disabled" when on the first page)
// Note there is no period "." in front of this class name
cssDisabled: 'disabled'
});
});
Tell me if more code/information is needed. Thank you in advance!
I have fixed my problem. Apparently the part where I was appending the resulting rows to the table was a mistake. Here is the correct AJAX processing segment:
ajaxProcessing: function(ajax) {
if (ajax && ajax.hasOwnProperty('data')) {
$('#request-table')
.find('tbody')
.empty();
var tr = '';
$(ajax.data).each(function(rowIndex, row) {
tr += '<tr data-toggle="modal">';
tr += '<input type="hidden" class="requestId" data-request-id="' + row['id'] + '"/>' ;
tr += '<td>' + row['name'];
if(row['message_count'] > 0) {
tr += '<span class="badge pull-right">' + row['message_count'] + '</span>';
}
tr += '</td>';
tr += '<td>' + row['start_date'] + '</td>';
tr += '<td>' + row['end_date'] + '</td>';
tr += '<td class="status" data-status="' + row['status'] + '">' + row['status'] + '</td>';
tr += '<td>' + row['is_printed'] + '</td>';
tr += '</tr>';
});
}
$row = $(tr),
initRequests();
return [ajax.total_rows, $row];
},
I hope this will be of help to others having similar problems :)