tablesorter with tablescroller (fixed columns) and checkboxes in multiple columns

[moyunkz]

Hi Mottie,

I am using your tablesorter plugin and tablescroller widget to make some columns and table header fixed. The problem is, the table I have has multiple checkboxes columns with select all checkbox in the header which will be scrollable. However, I have this working if I disabled "scroller_fixedColumns".

Here is my demo on JSFiddle http://jsfiddle.net/h3z153hw/

Thanksss!

[Mottie]

Hi @franklysaputra!

I was working on a demo to make the header check boxes work with the scroller widget, but I ran into a few issues with the widget itself. Once I get the kinks worked out, I'll update the widget and post a demo for you.

[moyunkz]

Hi @Mottie

Thanks a lot man. I really appreciate it! 👍

[Mottie]

Ok, try this code. The main changes are in the initialized callback function (demo):

$(function(){

    var $table = $('#table_test');

    $.tablesorter.themes.bootstrap = {
        table: 'table table-bordered table-striped',
        caption: 'caption',
        header: '',
        sortNone: '',
        sortAsc: '',
        sortDesc: '',
        active: '',
        hover: '',
        icons: '',
        iconSortNone: 'bootstrap-icon-unsorted',
        iconSortAsc: 'glyphicon glyphicon-chevron-up',
        iconSortDesc: 'glyphicon glyphicon-chevron-down',
        filterRow: '',
        footerRow: '',
        footerCells: '',
        even: '',
        odd: ''
    };

    $table.tablesorter({
        theme: "bootstrap",
        resort: false,
        widthFixed: true,
        headerTemplate: '{content} {icon}',
        widgets: ["uitheme", "filter", "zebra", "scroller"],
        widgetOptions: {
            zebra: ["even", "odd"],
            filter_reset: ".reset",
            filter_cssFilter: "form-control",
            scroller_upAfterSort: true,
            scroller_jumpToHeader: true,
            scroller_height: 0,
            scroller_fixedColumns: 3,
            scroller_addFixedOverlay: false,
            scroller_rowHighlight: 'hover',
            scroller_barWidth: null
        },
        headers: {
            '.action': {
                sorter: 'checkbox',
                filter: false
            }
        },
        initialized: function (table) {
            $(table).closest('.tablesorter-scroller').on('change', 'thead th.action input[type=checkbox]', function () {
                var indx,
                    $this = $(this),
                    checkboxColumn = parseInt( $this.closest('th,td').attr('data-column'), 10 ),
                    isChecked = this.checked;
                    $cells = $(table)
                        .children('tbody')
                        .children('tr')
                        .children(':nth-child(' + (checkboxColumn + 1) + ')')
                        .find('input'),
                    len = $cells.length;
                for ( indx = 0; indx < len; indx++ ) {
                    $cells.eq( indx )[0].checked = isChecked;
                }
                $(table).trigger('update');
            });
        }
    });

});

I also added some css to add row highlighting to test the changes to the parser-input-select.js file as well as the widget-scroller.js file. Make sure to update both from the master branch.

table.tablesorter tbody tr.odd.checked td {
    background: #8080c0;
    color: #fff;
}
table.tablesorter tbody tr.even.checked td {
    background: #a0a0e0;
    color: #fff;
}

[Mottie]

I did notice the issue with the filter widget having disabled filters in the checkbox columns... I'm still not sure why that is happening, but I'll work on that next.

[Mottie]

LOL, duh... I see the filter: false in the headers option... smack head

[moyunkz]

Hi @Mottie

It works! Thank you very much mate. However, if I checked the last column or the columns which are hidden in the scrollable section, it scrolls back to the first column in the scrollable section. How to disable this?

Thanks!!!

[Mottie]

Hmm, I think that'll require a bit of coding change to the scroller widget to save the scrollLeft and scrollTop position. I'll see what I can do.

[moyunkz]

Thanks again mate. I'll be waiting. :)

[moyunkz]

Hi Mottie,

Have you figured out the scrollLeft and scrollTop position? Thanks man

[Mottie]

Sorry, I haven't touched the scroller widgets in a while. I'm not sure when I'll have time to get around to it.

[Mottie]

This should be fixed by #1441.