Using tablesorter custom parser only for filtering with Checkboxes - working example needed

问题

I am trying to implement filtering my checkbox checked status similar to (or exactly like?) Ivan when he posted "Using tablesorter custom parser only for filtering". I've gone back and forth on custom parsers and text extraction and every permutation from the examples provided in the docs to no avail. Could someone look at my example posted at http://jsfiddle.net/5fLr7c4o/14/ and help me get it working? I'm using the headers and textExtraction function provided in that and other examples:

            headers: {
            0: {
                sorter: 'false',
                filter: 'parsed'
            }
        },
        textExtraction: {
            0: function (node, table, cellIndex) {
                return $(node).find('.MyCheckbox').prop('checked') ? 'True' : 'False';
            }
        }

To boil it down, I have two buttons. One will filter anything without the checkbox checked, the other resets the filter. The reset is working fine. The filter (in my local file) filters everything. jsfiddle doesn't work at all.

回答1:

The jsFiddle isn't working because jQuery is being loaded after the plugin. And the framework is set to load jQuery v1.11.0, so jQuery is actually being loaded twice. The second copy overrides the first and the tablesorter is associated to the first copy. Lots of stuff break - here is the demo updated to remove the second copy - but it still doesn't work!

If you use the parser-input-select.js file included in the repository, it has a checkbox parser that updates the cell after changing so the sort updates properly. Anyway, there are four versions of the code, the older ones don't use the mentioned parser. The demo you might be interested in is this one: http://jsfiddle.net/abkNM/6163/ You probably don't need the pager, so just don't include that code:

$(function() {
    var $table = $('table').tablesorter({
        theme: 'blue',
        widgets: ['zebra', 'filter'],
        widgetOptions : {
            group_checkbox: [ "checked", "unchecked" ]
        },
        headers: {
            0: { sorter: 'checkbox' }
        }
    })
    // HEADER CELL Checkbox - toggles state of visible checkboxes
    // make sure to include the "parser-input-select.js" file
    // it contains the most up-to-date checkbox parser
    .on('change', 'thead input[type="checkbox"]', function(){
        var checkboxColumn = 0,
            onlyVisible = true,

            $this = $(this),
            isChecked = this.checked;
        $table
            .children('tbody')
            .children( 'tr' + ( onlyVisible ? ':visible' : '' ) )
            .children(':nth-child(' + ( checkboxColumn + 1 ) + ')')
            .find('input')
            .prop('checked', isChecked)
            .trigger('update');
    });
});

Make sure to modify the checkboxColumn & onlyVisible variables as desired.

Update: There was an error in the parser code that was just fixed, it is currently available in the master branch only (linked in my answer). Otherwise you could just enter unchecked or checked" (checked with a quote for an exact match) to filter the checkboxes.

These filter names (checkbox states) are set by the group_checkbox option, which I just added to my answer.

来源：https://stackoverflow.com/questions/32018679/using-tablesorter-custom-parser-only-for-filtering-with-checkboxes-working-exa

标签

checkbox

filtering

tablesorter