Mottie / tablesorter

Github fork of Christian Bach's tablesorter plugin + awesomeness ~

Home Page:https://mottie.github.io/tablesorter/docs/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Error if not setting math_priority

clod986 opened this issue · comments

Hi,
I've scratched my head for an hour with the math widget, and I managed to have it work only by declaring the option math_priority. Incriminated line is widget-math.js:148

Shouldn't the option be defaulted?

Hi @clod986!

The default for the math_priority option is [ 'row', 'above', 'col' ]. This defines the order in which calculations are made. The 'all' priority is always last. The reason for this order is to include subtotal rows in column calculations, and to make grand total calculations last.

The only way this could be causing an error is if the math_priority option is not set as an array. How is it being set when this error occurs?

Thanks @Mottie
The error occurs if I don't declare math_priority at all. Being it an optional field, I feel there should be something wrong with its initialization

Maybe there is math_priority definition that is overriding the default somewhere else? If you look at the math demo, you'll see that math_priority is not defined in the code, and I'm not seeing a javascript error in the console.

Would you please share the initialization code being used?

Actually, even copy-pasting your code I had problems.

Here's my initialization code

if($table.hasClass('tablesorter')){
                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')){
                    //$widgets.push('print');
                    $widgetOptions.print_title = '';
                    $widgetOptions.print_dataAttrib = 'data-name';
                    $widgetOptions.print_rows = 'f';
                    $widgetOptions.print_columns = 's';
                    $widgetOptions.print_extraCSS = 'caption button{ display:none; }';
                    $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');
                    if($table.data('stickyparent'))
                        $widgetOptions.stickyHeaders_attachTo = $($table.data('stickyparent'));
                    else
                        $widgetOptions.stickyHeaders_attachTo = $container;
                    if($table.data('stickyparent'))
                        $widgetOptions.stickyHeaders_yScroll = $($table.data('stickyparent'));
                    else
                        $widgetOptions.stickyHeaders_yScroll = $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'];
                    $widgetOptions.math_mask = '€ #,##0.00';
                }
                return $table.tablesorter({
                    // sortList: [[0,0], [1,0]],
                    theme : "bootstrap",
                    widgets : $widgets,
                    widgetOptions : $widgetOptions
                });
            }

Hmm, and you're using the most up-to-date version of tablesorter from this fork?

I'm guessing that the tables have the class names "widget-math", "widget-stickyHeaders" manually added? It wouldn't hurt anything if all the widgetOptions were defined since they don't do anything unless the widget is included in the widgets option.

Also, since you're using Bootstrap, you'll need to set the headerTemplate option to '{header}{icon}' to include the glyphicons (ref).

I know, it feels strange to me aswell since it works fine just by declaring $widgetOptions.math_priority = ['row', 'above', 'col'];

I don't know what to tell you... I still can't duplicate this issue.

I'm going to go ahead and close it. Maybe someday someone with more of a clue than me will encounter this problem and tell me how to fix it 😁.

I'm actually having a very similar issue. In my case, I'm initializing tablesorter (initTablesorter function in the code below) then adding the math widget later.

This works just fine (noting the lack of math_priority):

function initTablesorter(word, showPager) {
    var tablesorterOptions = {
            //debug: true,
            theme: 'jui',
            widthFixed: true,
            headerTemplate: '{content} {icon}',
            widgets: ['stickyHeaders', 'filter', 'zebra', 'uitheme', 'math'],
            widgetOptions: {
                zebra: ["even", "odd"],
                filter_columnFilters: true,
                filter_filteredRow: 'filtered',
                math_complete: function($cell, wo, result, value, arry) {
                    prefix = ($cell.data('math-footer') !== undefined ? $cell.data('math-footer') : '');
                        if ($cell.hasClass('currency') && result != 'none') {
                            return prefix + '$' + result;
                        }
                    return prefix + result;
                },
            },
            textExtraction: function(node, table, cellIndex) {
                if ($(node).children().hasClass('value')) {
                    return $(node).children("[class*='value']").first().text();
                }
                return $(node).text();
            }
    };

    $("#outertable").tablesorter(tablesorterOptions);
    console.log($("#outertable").data("tablesorter"));

    if (showPager !== false) {
        var pagerOptions = {
            container: $(".pager"),
            output: '{startRow:input} to {endRow} of {filteredRows} matching ' + word,
            savePages: false,
            removeRows: false,
            size: 20,
            cssErrorRow: 'tablesorter-errorRow',
            cssDisabled: 'disabled',
            cssFirst: '.first',
            cssPrev: '.prev',
            cssNext: '.next',
            cssLast: '.last',
            cssGoto: '.gotoPage',
            cssPageDisplay: '.pagedisplay',
            cssPageSize: '.pagesize'
        };
        $("#outertable").tablesorterPager(pagerOptions);
    }
}

The following causes an error unless I define math_priority in the mathOptions object, and in that case, it doesn't error, but it also doesn't actually do the math.

function initTablesorter(word, showPager) {
    var tablesorterOptions = {
            theme: 'jui',
            widthFixed: true,
            headerTemplate: '{content} {icon}',
            widgets: ['stickyHeaders', 'filter', 'zebra', 'uitheme'],
            widgetOptions: {
                zebra: ["even", "odd"],
                filter_columnFilters: true,
                filter_filteredRow: 'filtered',
            },
            textExtraction: function(node, table, cellIndex) {
                if ($(node).children().hasClass('value')) {
                    return $(node).children("[class*='value']").first().text();
                }
                return $(node).text();
            }
    };

    $("#outertable").tablesorter(tablesorterOptions);
    console.log($("#outertable").data("tablesorter"));

    if (showPager !== false) {
        var pagerOptions = {
            container: $(".pager"),
            output: '{startRow:input} to {endRow} of {filteredRows} matching ' + word,
            savePages: false,
            removeRows: false,
            size: 20,
            cssErrorRow: 'tablesorter-errorRow',
            cssDisabled: 'disabled',
            cssFirst: '.first',
            cssPrev: '.prev',
            cssNext: '.next',
            cssLast: '.last',
            cssGoto: '.gotoPage',
            cssPageDisplay: '.pagedisplay',
            cssPageSize: '.pagesize'
        };
        $("#outertable").tablesorterPager(pagerOptions);
    }
}

function initTablesorterMath() {
    var mathOptions = {
        math_complete: function($cell, wo, result, value, arry) {
            prefix = ($cell.data('math-footer') !== undefined ? $cell.data('math-footer') : '');
                if ($cell.hasClass('currency') && result != 'none') {
                    return prefix + '$' + result;
                }
            return prefix + result;
        },
    };
    $.extend($("#outertable").data("tablesorter").widgetOptions, mathOptions);
    $("#outertable").data("tablesorter").widgets = ['stickyHeaders', 'filter', 'zebra', 'uitheme', 'math'];

    $('#outertable').trigger('applyWidgets');
}

The error is Uncaught TypeError: Cannot read property '0' of undefined referencing line 168 of widget-math.js. The bizarre thing is I've logged widgetOptions right before the error occurs, and it contains the default math_priority array.

I realize you may not have any more insight into this now than a month ago, but I figured it couldn't hurt to give an additional example.

Hi @tubedogg!

Thanks for sharing! I'll take another look at this on the weekend.

Ok @tubedogg & @clod986! This issue should be all fixed now.

Thank you for your patience!