Mottie / tablesorter

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

Pager: Select only in a page #226

Closed dmaglio closed 11 years ago

dmaglio commented 11 years ago

Hi, i have created a table with a checkbox for any row. I want to create a checkbox to select/unselect all checkbox, but the result is all row of table instead of all row in a page. it's possible, maybe with an option, to select easly all checkbox in a page? to select all i used this function

$(".checkbox").each( function() { $(this).attr("checked",status); })

where "status" is "checked" or null. I tried to see to select only in pager but don't work. Thank's for the help.

Mottie commented 11 years ago

Hi @dmaglio!

I have additional demos on the home wiki page, one of which includes this demo which I think is what you desire. It uses the following code:

// add parser through the tablesorter addParser method
$.tablesorter.addParser({
    id: 'checkbox',
    is: function(s) {
        return false;
    },
    format: function(s, table, cell, cellIndex) {
        var $t = $(table),
            $tb = $t.children('tbody'),
            $c = $(cell),
            c, check,

            // resort the table after the checkbox status has changed
            resort = false;

        if (!$t.hasClass('hasCheckbox')) {

            // update the select all visible checkbox in the header
            check = function($t) {
                var $v = $tb.children('tr:visible'),
                    $c = $v.filter('.checked');
                $t.find('.selectVisible').prop('checked', $v.length === $c.length);
            };

            $t
            .addClass('hasCheckbox')
            // update select all checkbox in header
            .bind('pageMoved', function() {
                check($t);
            })
            // make checkbox in header set all others
            .find('thead th:eq(' + cellIndex + ') input[type=checkbox]')
            .addClass('selectVisible')
            .bind('change', function() {
                c = this.checked;
                $tb.find('> tr:visible td:nth-child(' + (cellIndex + 1) + ') input')
                    .each(function() {
                        this.checked = c;
                        $(this).trigger('change');
                    });
            }).bind('mouseup', function() {
                return false;
            });
            $tb.children('tr').each(function() {
                $(this).find('td:eq(' + cellIndex + ')').find('input[type=checkbox]')
                    .bind('change', function() {
                        $t.trigger('updateCell', [$(this).closest('td')[0], resort]);
                        check($t);
                    });
            });
        }
        // return 1 for true, 2 for false, so true sorts before false
        c = ($c.find('input[type=checkbox]')[0].checked) ? 1 : 2;
        $c.closest('tr')[c === 1 ? 'addClass' : 'removeClass']('checked');
        return c;
    },
    type: 'numeric'
});

$(function() {
    $('table').tablesorter({
        theme: 'blackice',
        widgets: ['zebra', 'stickyHeaders'],
        headers: {
            0: {
                sorter: 'checkbox'
            }
        }
    }).tablesorterPager({
        container: $(".pager"),
        size: 5
    });
});
dmaglio commented 11 years ago

Thank's, i trying this parser but don't work for me.... i don't known why...I never understood how to operate the function addparser ... UPDATE: Now working. thank's :) I was wrong where I wrote the function addparser :)

Mottie commented 11 years ago

That's great to hear! :)