Default Pager Size with .tablesorter.storage

[invisiblekid]

Hey guys,

Really enjoying using this great app. Very much looking forward to seeing what v3 brings, but in the mean time I have a small issue really.

I have my tablesorterPager settings referencing size in local storage:

size: $.tablesorter.storage( $table[0], 'tablesorter-pagesize')

If this isn't set I get an empty Pager (even if the default is set). Is there a way I can check for local storage entries and if it is empty I can set a default size in the app?

I have written a small if statement checking if tablesorter-pagesize is null, and while it kinda worked it wasn't robust enough to use, nor did it work where I had multiple tables either on the same page, or on the same site.

Any help would be much appreciated.

[Mottie]

The easiest way would be to add an or (||) after the check:

size: $.tablesorter.storage( $table[0], 'tablesorter-pagesize') || 25

So if the size isn't saved in storage, it'll automatically set itself to 25

[invisiblekid]

Hey Mottie,

Thanks for getting back to me so quickly. Unfortunately, this isn't working for me.

var size = $.tablesorter.storage( $table[0], 'tablesorter-pagesize') || 25;
document.write(size);

This still outputs: "[object Object]".

Many Thanks for the work you're putting in to this.

[Mottie]

Hmm, that means that either you need to clear out your local storage or somehow the variable is being saved incorrectly. Try running this code in the console:

$.tablesorter.storage( $('table')[0], 'tablesorter-pagesize', 25 );

then run the script. If it still doesn't work, share the code you are using so that I can help troubleshoot the problem.

[invisiblekid]

Hey,

That code seems to break the pager.

Here is my Table Sorter code:

$("table").tablesorter({
    widgets :['uitheme', 'zebra', 'saveSort', 'filter'], 
    widgetOptions: {filter_searchDelay: 500, filter_ignoreCase: true, filter_reset : '.reset' },
    filter_reset : ".reset",
    uitheme : 'jui',
    headers: {7: {sorter:'priority'}}
    })
    .tablesorterPager({container: $("#pager"), size: $.tablesorter.storage( $table[0], 'tablesorter-pagesize') || 20
    });

Pager HTML:

        <select class="pagesize">
            <option id="result" value=""></option>
            <option value="10">10</option>
            <option value="20">20</option>
            <option value="30">30</option>
            <option value="40">40</option>
            <option value="50">50</option>
            <option value="60">60</option>
            <option value="70">70</option>
            <option value="80">80</option>              
        </select>

[Mottie]

Hmm ok,

I think the problem might be that $table isn't defined. Also are you including the pager size code from issue #122?

Try this:

$(function(){

    var $table = $('table');

    $table.tablesorter({
        widgets : ['uitheme', 'zebra', 'saveSort', 'filter'],
        widgetOptions: {
            filter_searchDelay: 500,
            filter_ignoreCase: true,
            filter_reset : '.reset',
            uitheme : 'jui'
        },
        headers: {
            7: {sorter:'priority'}
        }
    })
    .bind('pagerChange', function(){
        // save pager size
        $.tablesorter.storage( this, 'tablesorter-pagesize', this.config.pager.size );
    })
    .tablesorterPager({
        container: $("#pager"),
        size: $.tablesorter.storage( $table[0], 'tablesorter-pagesize') || 20
    });

});

[invisiblekid]

Sorry Mottie, the full code is here - table is defined below :

    $.tablesorter.addParser({ 
        // set a unique id 
        id: 'priority', 
        is: function(s) { 
            // return false so this parser is not auto detected 
            return false; 
        }, 
        format: function(s) { 
            // format your data for normalization 
            return s.toLowerCase().replace(/low/,0).replace(/medium/,1).replace(/high/,2); 
        }, 
        // set type, either numeric or text 
        type: 'numeric' 
    }); 


$(function(){ 
        $('table')

    .bind('pagerChange', function(){
        // save pager size
        $.tablesorter.storage( this, 'tablesorter-pagesize', this.config.pager.size );
        });

    $('table')
    .bind('filterInit', function() {
        // check that storage ulility is loaded
        if ($.tablesorter.storage) {
            // get saved filters
            var f = $.tablesorter.storage(this, 'tablesorter-filters') || [];
            $(this).trigger('search', [f]);
        }
    })
    .bind('filterEnd', function(){
        if ($.tablesorter.storage) {
            // save current filters
            var f = $(this).find('.tablesorter-filter').map(function(){
                return $(this).val() || '';
            }).get();
            $.tablesorter.storage(this, 'tablesorter-filters', f);
        }
    });
    var $table = $('table');

    // Extend the themes to change any of the default class names ** NEW ** 
    $.extend($.tablesorter.themes.jui, { 
    // change default jQuery uitheme icons - find the full list of icons here: http://jqueryui.com/themeroller/ (hover over them for their name) 
    table    : 'ui-widget ui-widget-content ui-corner-all', // table classes 
    header   : 'ui-widget-header ui-corner-all ui-state-default', // header classes 
    footer   : 'ui-widget-header ui-corner-all ui-state-default', // header classes 
    icons    : 'ui-icon', // icon class added to the <i> in the header 
    sortNone : 'ui-icon-carat-2-n-s', 
    sortAsc  : 'ui-icon-carat-1-n', 
    sortDesc : 'ui-icon-carat-1-s', 
    active   : 'ui-state-active', // applied when column is sorted 
    hover    : 'ui-state-hover',  // hover class 
    filterRow: '', 
    even     : 'ui-widget-content', // odd row zebra striping 
    odd      : 'ui-state-default'   // even row zebra striping 
  }); 


    $("table").tablesorter({
        widgets :['uitheme', 'zebra', 'saveSort', 'filter'], 
        widgetOptions: {filter_searchDelay: 500, filter_ignoreCase: true, filter_reset : '.reset' },
        filter_reset : ".reset",
        uitheme : 'jui',
        headers: {7: {sorter:'priority'}}
        })
        .tablesorterPager({container: $("#pager"), size: $.tablesorter.storage( $table[0], 'tablesorter-pagesize') || 20
        });

    }); 

The Pager works as expected other than the fact that if the Local Storage is empty the Pager value is blank. I just wanted a default fall back.

[Mottie]

In the lastest version 2.6.1, I've added a new pager event, pagerBeforeInitialized which then allows you to use this widget:

$.tablesorter.addWidget({
    id: 'savePagerSize',
    init: function(table, thisWidget){
        var $t = $(table),
        d = $.tablesorterPager.defaults, // change defaults (maybe not the best idea)
        s = $.tablesorter.storage,
        c = table.config,
        name = 'tablesorter-pagesize';
        if (d && s) {
            $t
            .bind('pagerBeforeInitialized', function(){
                c.pager.sizeName = name;
                d.size = s( this, name) || d.size;
                $.data(table, 'pagerLastSize', d.size);
            })
            .bind('pagerChange', function(){
                // save pager size
                s( this, name, c.pager.size );
            });
        }
    },
    remove: function(table, c, wo){
        // clear storage
        if ($.tablesorter.storage) {
            $.tablesorter.storage( table, c.pager.sizeName, '' );
            $.data(table, 'pagerLastSize', 0);
        }
    }
});

Just make sure the jquery.tablesorter.widget.js (or min version) is loaded because this widget needs the $.tablesorter.storage() function.

Use this widget as follows:

$(function(){

    $('table').tablesorter({
        theme: 'blue',
        widgets: [ 'savePagerSize' ]
    }).tablesorterPager({
        container: $(".pager")
    });

});

* Note: I tried making a jsFiddle but it just didn't seem to want to cooperate.

[invisiblekid]

Thanks again Mottie! Will give this a go over the next few days and let you know how it goes.

[Mottie]

I'm guessing this issue has been resolved, so I'm closing it. Please feel free to reopen it if you continue to have problems.

[Portekoi]

Hello,

I'm using this widget and it's ok on IE 9.

But, with Chrome and FireFox, the table looks empty.

When i load the page, i see the lines results of my table and when the page finish to load, they disappear.

When i look the code with Firebug, i have a "Display: none" on each tr.

If i comment this part of widget code :

            .bind('pagerBeforeInitialized', function () {
            c.pager.sizeName = name;
            d.size = s(this, name) || d.size;
            $.data(table, 'pagerLastSize', d.size);                 
            })

It's working. I think, it's because, there is not a default value.

Can you help me?

Thank's

Portekoi

[Portekoi]

I have add this code :

            $t
            .bind('pagerBeforeInitialized', function () {
                c.pager.sizeName = name;
                d.size = s(this, name) || d.size;
                /*Here*/
                if (typeof (d.size) == 'object') {
                    d.size = 10;
                }
                /*Here*/
                $.data(table, 'pagerLastSize', d.size);

            })

It's working :)

[Mottie]

Hi @Portekoi!

Sorry for taking so long to respond. I'm not sure how I missed your messages.

Instead of using the above code, try out the new pager savePages option. :)

[Portekoi]

Great ! Thanks a lot !

[airthomas]

Hello,

In http://jsfiddle.net/tomChai/zr14L69w/2/, I have added 2 buttons in tablesorter for some actions with jquery. One button called "onPopup" is worked to alert the message, but another one called "choose" is not work..... any idea ?

Many thanks,
Thomas

[Mottie]

Hi @airthomas!

If you want to bind to elements within the table, you need to use delegated event bindings.

Updated demo

$('table').on('click', '.choose', function(){
    alert("b");
});

[airthomas]

many thanks Mottie.