I have tables that are dynamically loaded via AJAX. Every time a new table loads, I want to reset the page size to the default value. However, currently it is being set to the previously chosen drop-down value.
Currently, every time a new table is loaded I am doing the following:
$(".pagesize").val(20);
$("#data_table").tablesorter().tablesorterPager({container: $("#pager"), size:20});
However, the page size is being set to the last selected value. For e.g. with the options 20, 40, 80 and All, if I choose 80 for a table and then load a new table along with the above lines of codes, it is still being set to 80 instead of 20.
Does tablesorter store the previously used values? Why am I not able to reset the value.
I tried changing the value of dropdown in tablesorter pager example, and noticed that the selected option does not change in the select tag. In the attached image, I changed the page size from 10 to 20, however it did not change the selection option in the select tag as can be seen in the Google Dev Tool.
The original version of tablesorter does not have methods in place to allow this... if you switch to my fork of tablesorter, you can use the following command to set the page size.
$('table').trigger('pageSize', 15);
There is also a savePages
option (default set to true
) which saves the user set page size.
Updating requires a minimal amount of option changes, if any, to make it work.