Filter on irregular thead

[clod986]

Hi,
I guess I'm doing something wrong here.

I have a table with a second <tr> in the <thead>, in order to achieve something like this:

<thead>
<tr>
<th rowspan="2">People</th>
<th colspan="3">Hours Worked</th>
<th rowspan="2">Hours Available</th>
</tr>
<tr>
<th>Job A</th>
<th>Job B</th>
<th>Total</th>
</tr>
</thead>

I can't get the filter widget to work with this sintax; every other widget is working fine. What am I doing wrong? How should I build the table?

[Mottie]

Hi @clod986!

Please make sure you are using the latest version of the core and filter widget, it works for me in this demo.

[clod986]

Hi @Mottie!
Yeah, you are right, it works for me as well... but I noticed it didn't work because I also applied Sticky Headers to the table. Is it a known issue?

[Mottie]

It still works for me: http://jsfiddle.net/856bzzeL/764/

[clod986]

I still can't get it to work.

I initialize all of my tables with the class widget-[widget_name] and then use a js to set options to the widgets if the table has the widget. The options do a simple IF check on each widget, so I'm pretty sure there's no issue in that.

What I noticed, is that in this way it will not initialize filter

<table class="widget-stickyHeaders widget-filter">

in this way it will not initialize stickyHeaders

<table class="widget-filter widget-stickyHeaders">

I'm pretty sure my code is clean, but just in case here's how I initialize all my tables

$.fn.initializeTableSorter = function(){
        var $table      = $(this);
        var $container  = $table.parent();

        var $widgets        = ['uitheme'];
        var $widgetOptions  = {};

        if($table.hasClass('widget-filter')){
            //$widgets.push('filter');
            $widgetOptions.filter_reset = '.reset';
        }

        if($table.hasClass('widget-print') || $table.find('.print-table')){
            $widgets.push('print');
            $widgetOptions.print_now = false;
            $widgetOptions.print_title = '';
            $widgetOptions.print_dataAttrib = 'data-name';
            $widgetOptions.print_rows = 'f';
            $widgetOptions.print_columns = 's';
            $widgetOptions.print_extraCSS = 'caption button{ display:none; } .hidden-print{ display:none; visibility:hidden;} .nested.table{ margin: 20px 0;} .no-border,.no-border>tr,.no-border>td,.no-border>tr>td{border-style: none !important;} #planner-table{font-size: 10px;} #planner-table td{padding: 1px 0;} #planner-table td.not-available{background-color: gray;} #planner-table td.booked-not-paid{color: red; text-decoration: underline;}';
            $widgetOptions.print_styleSheet = '';
            $widgetOptions.print_callback = function(config, $table, printStyle){
                // do something to the $table (jQuery object of table wrapped in a div)
                // or add to the printStyle string, then...
                // print the table using the following code
                $.tablesorter.printTable.printOutput( config, $table.html(), printStyle );
            };
        }

        if($table.hasClass('widget-stickyHeaders')){
            //$widgets.push('stickyHeaders');
            var $sticky_container = $container;
            if($table.data('stickyparent'))
                $sticky_container = $($table.data('stickyparent'));
            else if($table.closest('.scroll-container-y').length > 0)
                $sticky_container = $($table.closest('.scroll-container-y > div'));
            else if($table.closest('.scroll-container-x').length > 0)
                $sticky_container = $($table.closest('.scroll-container-x > div'));
            else if($table.closest('.modal').length > 0)
                $sticky_container = $($table.closest('.modal'));

            $widgetOptions.stickyHeaders_attachTo = $sticky_container;
            $widgetOptions.stickyHeaders_yScroll = $sticky_container;
            console.log('next line is the sticky header of table #'+$table.prop('id'));
            console.log($sticky_container);

            if($table.data('includecaption'))
                $widgetOptions.stickyHeaders_includeCaption = false;
        }

        if($table.hasClass('widget-math')){
            $widgetOptions.math_data = 'math'; // data-math attribute
            $widgetOptions.math_priority = ['row', 'above', 'col'];
            $table.bind('tableReady sortEnd', calculateEconomicTableWithUser);

            // Do not use financial calculations
            if($table.hasClass('math-simple')){
                $widgetOptions.math_mask = '0';
                $widgetOptions.math_none = '0';
            }
            else{
                $widgetOptions.math_mask = '#\'##0.00 €';
                $widgetOptions.math_none = currencyFormat(0);
            }

        }

        if($table.hasClass('widget-pager')){
            // Pager must be set inside the table
            var $pager_container = $('.pager', $table);
            $widgetOptions.pager_selectors = {
                container: $pager_container,
                first       : '.first',       // go to first page arrow
                prev        : '.prev',        // previous page arrow
                next        : '.next',        // next page arrow
                last        : '.last',        // go to last page arrow
                gotoPage    : '.gotoPage',    // go to page selector - select dropdown that sets the current page
                pageDisplay : '.pagedisplay', // location of where the "output" is displayed
                pageSize    : '.pagesize'
            };
            if(typeof $pager_container.data('pagersize') !== 'undefined')
                $widgetOptions.pager_size = parseInt($pager_container.data('pagersize'));
            else
                $widgetOptions.pager_size = 10;
        }

        return $table.tablesorter({
            // theme : "bootstrap",
            widgets : $widgets,
            widgetOptions : $widgetOptions
        }).trigger('tableReady');
    };

[clod986]

In your example, pushing the widgets via the classes will give me the same error.

http://jsfiddle.net/856bzzeL/765/

[Mottie]

Hmm, you're right, the regex being used to extract out multiple widget-{name} classes isn't working as expected. Please use the widgets option until I can get that fixed.

See http://regexr.com/3cf7g

[Mottie]

Ok, if you use jquery.tablesorter.js from the master branch, you will be able to include multiple widget-{name} classes in the table and now get them properly added to the table.

Thanks for reporting this issue!

[Mottie]

And by the way, you can just add all the widgetOptions without worry because the options are ignored if the widget isn't included in the widgets option or table class name. So, it isn't necessary to add code like if ($table.hasClass('widget-print')), etc.