tablesorter icon indicating copy to clipboard operation
tablesorter copied to clipboard

Problemp with pager plugin when reload tablesorter

Open LLazyness opened this issue 5 years ago • 1 comments

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;

LLazyness avatar Jun 20 '20 18:06 LLazyness

Hi @LLazyness!

Sorry for taking so long to respond!

Maybe setting the savePages option to false would work for you?

Mottie avatar Aug 01 '20 18:08 Mottie