Mottie / tablesorter

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

Default Pager Size with .tablesorter.storage #197

Closed invisiblekid closed 11 years ago

invisiblekid commented 11 years ago

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 commented 11 years ago

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 commented 11 years ago

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 commented 11 years ago

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 commented 11 years ago

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 commented 11 years ago

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 commented 11 years ago

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 commented 11 years ago

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 commented 11 years ago

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

Mottie commented 11 years ago

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 commented 11 years ago

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 commented 11 years ago

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 commented 11 years ago

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 commented 11 years ago

Great ! Thanks a lot !

airthomas commented 9 years ago

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 commented 9 years ago

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 commented 9 years ago

many thanks Mottie.