Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Pager AJAX server-side ordering/filtering - paging (between pages) reorders all columns #1218

Closed
pdtdev opened this issue May 18, 2016 · 4 comments

Comments

@pdtdev
Copy link

pdtdev commented May 18, 2016

It appears the 'pager' row/column is now set as a header column?
Therefore on each subsequent 'next/prev page' the order is changed.

Version: tablesorter-2.26.1

image

After next page:

image

Code (HTML and CSS) is the same as Pager plugin - AJAX example:
http://mottie.github.io/tablesorter/docs/example-pager-ajax.html

What am I doing wrong and how can this be fixed?

$("#tblpasskeys")
            .tablesorter({
            theme: 'default',
            widthFixed: true,
            sortLocaleCompare: true, // needed for accented characters in the data
            sortList: sorting,
            widgets: ['zebra', 'filter']
        })
        .tablesorterPager({
            container: $(".pager"),
            ajaxUrl: 'mypasswords_tblsort.php?page={page}&size={size}&{sortList:col}&{filterList:fcol}',
            ajaxError: null,
            ajaxObject: {
                dataType: 'json'
            },
            ajaxProcessing: function(data){
                console.log(data.debug);
                var total, rows, headers;
                total   = data.total_rows;
                headers = data.headers;
                rows    = data.rows;
                return [ total, rows, headers ];
            },
            processAjaxOnInit: true,
            output: '{startRow} to {endRow} ({totalRows})',
            updateArrows: true,
            page: 0,
            size: 10,
            savePages: true,
            pageReset: 0,
            // css class names of pager arrows
            cssNext        : '.next',  // next page arrow
            cssPrev        : '.prev',  // previous page arrow
            cssFirst       : '.first', // go to first page arrow
            cssLast        : '.last',  // go to last page arrow
            cssGoto        : '.gotoPage', // page select dropdown - select dropdown that set the "page" option

            cssPageDisplay : '.pagedisplay', // location of where the "output" is displayed
            cssPageSize    : '.pagesize', // page size selector - select dropdown that sets the "size" option

            // class added to arrows when at the extremes; see the "updateArrows" option
            // (i.e. prev/first arrows are "disabled" when on the first page)
            cssDisabled    : 'disabled', // Note there is no period "." in front of this class name
            cssErrorRow    : 'tablesorter-errorRow' // error information row
        });
@Mottie
Copy link
Owner

Mottie commented May 18, 2016

Hi @pdtdev!

To prevent the pager from behaving in that manner, add a "tablesorter-ignoreRow" class to the row (ref):

<tr class="tablesorter-ignoreRow">

This makes tablesorter ignore all of the contents in that row, but this only applies to <thead> rows.

@pdtdev
Copy link
Author

pdtdev commented May 18, 2016

Hi @Mottie

Excellent, that worked just fine!

Seems I need to read and absorb your documentation a little better ...

Thanks

@pdtdev pdtdev closed this as completed May 18, 2016
@Mottie
Copy link
Owner

Mottie commented May 18, 2016

Well, that class name was missing in the example HTML... I just added it.

@pdtdev
Copy link
Author

pdtdev commented May 18, 2016

Correct, the 'pager ajax' example does leave out that class.

But, just checked the page source and the working example has it in, should've worked that out.

Thanks for the quick response.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants