tablesorter
tablesorter copied to clipboard
Problemp with pager plugin when reload tablesorter
I have one table that reloading with route changing. But after reloading the table, my pager shows the wrong page's information probably from the previous load when I start to flip pages. I tried to fix it, but nothing helps.
click route 1:
click route 2: 3\7 at start, shoud be 1\7
Then click next page and get 3\3, actualy shoud be 4\7 page. Information at table is not changed.

my code
<div id="pagerEl" class="pagerEl">
<form>
<img src="\tablesorter\pager\icons\first.png" class="first"/>
<img src="\tablesorter\pager\icons\prev.png" class="prev"/>
<span class="pagedisplay" data-pager-output-filtered="{page:input} / {totalPages}"></span>
<img src="\tablesorter\pager\icons\next.png" class="next"/>
<img src="\tablesorter\pager\icons\last.png" class="last"/>
<select class="pagesize">
<option value="50">50</option>
<option value="100">100</option>
<option value="150">150</option>
<option value="200">200</option>
<option value="250">250</option>
<option value="300">300</option>
<option value="all">Все РК</option>
</select>
</form>
</div>
var pagerOptions = {
container: $(".pager"),
ajaxUrl: null,
customAjaxUrl: function(table, url) { return url; },
ajaxError: null,
ajaxObject: { dataType: 'json' },
ajaxProcessing: null,
processAjaxOnInit: true,
output: '{page:input} / {totalPages} страниц',
updateArrows: true,
page: 0,
size: 100,
pageReset: 0,
fixedHeight: true,
removeRows: true,
countChildRows: false,
cssNext: '.next',
cssPrev: '.prev',
cssFirst: '.first',
cssLast: '.last',
cssGoto: '.gotoPage',
cssPageDisplay: '.pagedisplay',
cssPageSize: '.pagesize',
cssDisabled: 'disabled',
cssErrorRow: 'tablesorter-errorRow'
};
var renderTable = function() {
$(".myTable").tablesorter({
theme: 'blue',
widgets: ['saveSort', 'zebra', 'resizable', 'stickyHeaders', 'filter'],
widgetOptions: {
storage_useSessionStorage : true,
filter_hideEmpty : true,
filter_onlyAvail : 'filter-onlyAvail',
},
dateFormat: 'dd.mm.YYYY',
headers: {
0: {
sorter: false
},
1: {
sorter: "text"
},
2: {
sorter: "image"
},
3: {
sorter: "image"
},
4: {
sorter: "image"
},
5: {
sorter: "text"
},
6: {
sorter: "text"
},
7: {
sorter: "text"
},
8: {
sorter: "text"
},
9: {
sorter: "shortDate",
dateFormat: "ddmmyyyy"
},
10: {
sorter: "shortDate",
dateFormat: "ddmmyyyy"
},
11: {
sorter: "shortDate",
dateFormat: "ddmmyyyy"
},
12: {
sorter: "text"
},
13: {
sorter: "text"
},
14: {
sorter: "text"
}
},
sortList: [
[9, 2]
]
}).tablesorterPager(pagerOptions);
};
//here I render table. Id is router-id. My browser window is not reloaded when the route is changed, changes only data of the table.
switch (id) {
case 1:
renderTable();
break;
case 2:
renderTable();
break;
case 3:
renderTable();
break;
Hi @LLazyness!
Sorry for taking so long to respond!
Maybe setting the savePages option to false would work for you?