Mottie / tablesorter

Github fork of Christian Bach's tablesorter plugin + awesomeness ~
https://mottie.github.io/tablesorter/docs/
2.61k stars 754 forks source link

Problemp with pager plugin when reload tablesorter #1744

Open LLazyness opened 4 years ago

LLazyness commented 4 years ago

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;
Mottie commented 4 years ago

Hi @LLazyness!

Sorry for taking so long to respond!

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