Pager+Ajax : ajax fired double on startup

[pungitopo]

Hi @Mottie ,

opening or refreshing the page I got a double fired ajax call to ajaxUrl.
I am using verion 2.18.0.
Here my configuration below.

Thank you very much.

---

$.extend($.tablesorter.themes.bootstrap, {
            // these classes are added to the table. To see other table classes available,
            // look here: http://twitter.github.com/bootstrap/base-css.html#tables
            table: 'table table-bordered',
            caption: 'caption',
            header: 'bootstrap-header', // give the header a gradient background
            footerRow: '',
            footerCells: '',
            icons: '', // add "icon-white" to make them white; this icon class is added to the <i> in the header
            sortNone: 'bootstrap-icon-unsorted',
            sortAsc: 'icon-chevron-up glyphicon glyphicon-chevron-up',     // includes classes for Bootstrap v2 & v3
            sortDesc: 'icon-chevron-down glyphicon glyphicon-chevron-down', // includes classes for Bootstrap v2 & v3
            active: '', // applied when column is sorted
            hover: '', // use custom css here - bootstrap class may not override it
            filterRow: '', // filter row class
            even: '', // odd row zebra striping
            odd: ''  // even row zebra striping
        });

        pagerOptions = {
            // **********************************
            //  Description of ALL pager options
            // **********************************

            // target the pager markup - see the HTML block below
            container: $("#pager"),

            // use this format: "http:/mydatabase.com?page={page}&size={size}&{sortList:col}"
            // where {page} is replaced by the page number (or use {page+1} to get a one-based index),
            // {size} is replaced by the number of records to show,
            // {sortList:col} adds the sortList to the url into a "col" array, and {filterList:fcol} adds
            // the filterList to the url into an "fcol" array.
            // So a sortList = [[2,0],[3,0]] becomes "&col[2]=0&col[3]=0" in the url
            // and a filterList = [[2,Blue],[3,13]] becomes "&fcol[2]=Blue&fcol[3]=13" in the url
            // ajaxUrl: 'IndexGenXSort?page={page}&size={size}&{sortList:col}&{filterList:fcol}',

            ajaxUrl: 'Protocolli/ProtocolliSort?page={page}&size={size}&{sortList:col}&{filterList:fcol}',

            //processAjaxOnInit: true,

            // modify the url after all processing has been applied
            customAjaxUrl: function (table, url) {
                // manipulate the url string as you desire
                // url += '&cPage=' + window.location.pathname;
                // trigger my custom event
                $(table).trigger('changingUrl', url);
                // send the server the current page
                return url; //+= '&currentUrl=' + window.location.href;
            },

            // add more ajax settings here
            // see http://api.jquery.com/jQuery.ajax/#jQuery-ajax-settings
            ajaxObject: {
                dataType: 'json',
                type: 'POST',
                data: { __RequestVerificationToken: token}
            },

            // process ajax so that the following information is returned:
            // [ total_rows (number), rows (array of arrays), headers (array; optional) ]
            // example:
            // [
            //   100,  // total rows
            //   [
            //     [ "row1cell1", "row1cell2", ... "row1cellN" ],
            //     [ "row2cell1", "row2cell2", ... "row2cellN" ],
            //     ...
            //     [ "rowNcell1", "rowNcell2", ... "rowNcellN" ]
            //   ],
            //   [ "header1", "header2", ... "headerN" ] // optional
            // ]
            // OR
            // return [ total_rows, $rows (jQuery object; optional), headers (array; optional) ]
            ajaxProcessing: function (data) {
                //console.log(data);
                if (data && data.hasOwnProperty('rows')) {
                    //console.log("2");
                    //var ttt = data.totalunfiltered;
                    //console.log("ttt = " + ttt);
                    var r, row, c, d = data.rows,
                    // total number of rows (required)
                    total = data.total_rows,
                    // array of header names (optional)
                    headers = data.headers,
                    // all rows: array of arrays; each internal array has the table cell data for that row
                    rows = [],
                    // len should match pager set size (c.size)
                    len = d.length;
                    // this will depend on how the json is set up - see City0.json
                    // rows
                    for (r = 0; r < len; r++) {
                        //console.log("dentro");
                        row = []; // new row array
                        // cells
                        for (c in d[r]) {
                            if (typeof (c) === "string") {
                                //console.log("dentro2");
                                row.push(d[r][c]); // add each table cell data to row array
                            }
                        }
                        rows.push(row); // add new row array to rows array
                    }
                    // in version 2.10, you can optionally return $(rows) a set of table rows within a jQuery object
                    return [total, rows, headers];
                }
            },

            // output string - default is '{page}/{totalPages}'; possible variables: {page}, {totalPages}, {startRow}, {endRow} and {totalRows}
            output: 'Pagina {page} di {totalPages} ({totalRows})',

            // apply disabled classname to the pager arrows when the rows at either extreme is visible - default is true
            updateArrows: false,

            // starting page of the pager (zero based index)
            page: 0,

            // Number of visible rows - default is 10
            size: 20,

            // if true, the table will remain the same height no matter how many records are displayed. The space is made up by an empty
            // table row set to a height to compensate; default is false
            fixedHeight: false,

            // remove rows from the table to speed up the sort of large tables.
            // setting this to false, only hides the non-visible rows; needed if you plan to add/remove rows with the pager enabled.
            removeRows: false,

            // 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
            cssPageDisplay: '.pagedisplay', // location of where the "output" is displayed
            cssPageSize: '.pagesize', // page size selector - select dropdown that sets the "size" option
            cssErrorRow: 'tablesorter-errorRow', // error information row

            // class added to arrows when at the extremes (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
        };


        $("#ProtocolliTable")
                .tablesorter({
                    headerTemplate: '{content} {icon}',
                    //initWidgets: true,
                    showProcessing: true,
                    sortLocaleCompare: true,
                    //widthFixed: true,
                    serverSorting : true,
                    //emptyTo: 'bottom',
                    headers: {

                        0: { sorter: 'itDate' },
                         headerTemplate: '{content} {icon}'
                    },
                    widgets: ['zebra', 'filter', 'uitheme','resizable' ],
                    theme: ['bootstrap'],
                    widgetOptions: {
                        //filter_liveSearch: 3,
                        filter_columnFilters: true,
                        filter_serversideFiltering: true,
                        filter_hideFilters: false,
                    }
                })
                .tablesorterPager(pagerOptions);

[Mottie]

Hi @pungitopo!

That appears to be a bug in the pager, I just pushed a fix that should fix the problem in the working branch (e8452da).

Please try it out and report if there are still issues with the update.

Thanks!

[pungitopo]

Hi @Mottie

I tried your fix (e8452da), but it did not worked.
I think the problem is with the filter widget....when I disable it, all goes well.

Sometimes (i did not figure out the reason) ajax is not fired twice, but in this case the pager output string is not generated.

I got the old pager version 3/31/2014 (v2.15.12), and the problem does not apear.

I hope these info can give you a clue to solve the problem.

Thank you.

Nic

[Mottie]

Actually, I've made a few more updates since that one. Please check the current version in the working branch.

[pungitopo]

Hi @Mottie

I tried the last update of the pager (983a05e#diff-db7f67ca0dc6e9040f3b5e97ee3c329c).
It does not fire ajax on startup anymore.
As before if i disable filter, all goes well.

Thank you,

Nic

[Mottie]

Thanks for checking it... I'll try to get this fixed soon.

[Mottie]

Oh, please make sure you're using the updated jquery.tablesorter.widgets.js file as well, because I am seeing ajax fire off on startup.

[pungitopo]

Hi @Mottie

updated also jquery.tablesorter.widgets.js with the working one. Same behavior, ajax does not fire on statup...and the pager does not show the output string.

Thank you,
Nic

[Mottie]

This demo uses the pager addon & filter widget code from the working branch and it is loading ajax and updating the output properly. Would you please check to make sure your browser is loading the same versions.

I really want to push the next update and this is the limiting factor.

[pungitopo]

Hi @Mottie

I updated my js files drom your demo. No more twice ajax fire on startup (good), but the fileter column has strange behavior. It does not fire correctly (the search parameter is one step back).
You can see in your demo if you insert the filter and {filterList:fcol} parameter.

Do you see it ?

Bye,
Nic

[Mottie]

Ahh, thank you for that nugget of information! I think I finally have the problem resolved 🎆

Please try the latest code.

[pungitopo]

Hi @Mottie

it's perfect now. Thank you for your support.

Bye,
Nic

[Mottie]

Thanks, v2.18.1 is available.