TableSorter 数学和外部小部件

Question

我正在尝试在 table 上使用数学小工具，该工具已经使用了带日期的外部过滤器。当我包含数学小部件时，它只过滤计算的总和，并按原样保留 table 的元素。我相信由于 data-column=0 过滤器，它可能只针对数学行。

 {widthFixed: true, sortList: [[0, 0]], widgets: ['zebra', 'filter','math'],
               widgetOptions: {

                   filter_external: '.search',
                   // add a default type search to the first name column
                   filter_defaultFilter: { 1: '~{query}' },
                   // include column filters
                   filter_columnFilters: false,
                   filter_placeholder: { search: 'Search...' },
                   filter_filteredRow: 'filtered',
                   filter_saveFilters: false,
                   filter_reset: '.reset',
                   math_data: 'math', // data-math attribute
                   math_ignore: [0],
                   math_complete: function ($cell, wo, result, value, arry) {
                       var txt = '<span class="align-decimal">$ ' + result + '</span>';
                       if ($cell.attr('data-math') === 'all-sum') {
                           // when the "all-sum" is processed, add a count to the end
                           return txt + ' (Sum of ' + arry.length + ' Days)';
                       }
                       return txt;
                   }
               }
           })
           .tablesorterPager({ container: $("#pager"), positionFixed: false });
        $("#from").datepicker({
            defaultDate: "+1w",
            dateFormat: 'd MM yy',
            changeMonth: true,
            numberOfMonths: 1,
            onClose: function (selectedDate) {
                $("#to").datepicker("option", "minDate", selectedDate);
                setTimeout(function () { updateFilters(); }, 1);
            }
        });
        $("#to").datepicker({
            defaultDate: "+1w",
            dateFormat: 'dd MM yy',
            changeMonth: true,
            numberOfMonths: 1,
            onClose: function (selectedDate) {
                $("#from").datepicker("option", "maxDate", selectedDate);
                setTimeout(function () { updateFilters(); }, 1);
            }
        });

Answer 1

我更新了您的演示，使日期选择器可以与过滤器小部件一起使用 (demo)

这是你想要的吗？

$(function () {
    var $table = $('.tablesorter'),
        validDate = function (d) {
            return d instanceof Date && isFinite(d);
        },
        updateFilters = function () {
            var filter = '',
                from = $('#from').datepicker('getDate') || '',
                to = $('#to').datepicker('getDate') || '';
            if (from && to) {
                filter = from.getTime() + ' - ' + to.getTime();
            } else if (from && !to) {
                filter = '>=' + from.getTime();
            } else if (!from && to) {
                filter = '<=' + to.getTime();
            }
            console.log(filter);
            $.tablesorter.setFilters($table, [filter], true);
        };
    $table.tablesorter({
        // include zebra and any other widgets, options:
        // 'columns', 'filter', 'stickyHeaders' & 'resizable'
        // 'uitheme' is another widget, but requires loading
        // a different skin and a jQuery UI theme.
        widgets: ['zebra', 'filter', 'math'],

        // filter_external: '.search',
        // add a default type search to the first name column
        filter_defaultFilter: {
            1: '~{query}'
        },
        // include column filters
        filter_columnFilters: false,
        filter_saveFilters: false,
        filter_reset: '.reset',
        math_data: 'math', // data-math attribute
        math_ignore: [0],
        math_complete: function ($cell, wo, result, value, arry) {
            var txt = '<center>$ ' + result + '</center>';
            return txt;
        },

        initialized: function (table) {
            // target select
            var i, o, select = $(table).find('select.tablesorter-filter');
            $('button').click(function () {
                i = $(this).data('index');
                select[0].options[i].selected = true;
                select.trigger('change');
            });
        }

    });
    $("#from").datepicker({
        defaultDate: "2015-05-01",
        dateFormat: 'yy-mm-dd',
        changeMonth: true,
        numberOfMonths: 1,
        onClose: function (selectedDate) {
            $("#to").datepicker("option", "minDate", selectedDate);
            setTimeout(function () {
                updateFilters();
            }, 1);
        }
    });
    $("#to").datepicker({
        defaultDate: "2015-05-30",
        dateFormat: 'yy-mm-dd',
        changeMonth: true,
        numberOfMonths: 1,
        onClose: function (selectedDate) {
            $("#from").datepicker("option", "maxDate", selectedDate);
            setTimeout(function () {
                updateFilters();
            }, 1);
        }
    });


});

TableSorter 数学和外部小部件

TableSorter Math and External Widget

tablesorter