Question

我正在使用tablesorter来对我的一些表格进行分区。

是否可能（或以任何方式容易实现方式）页面按月或年？例如。而不是常规页面＆lt; | 1 | 2 3 4 5>拥有＆lt; | 01-2014 | 02-2014 03-2014＆gt;

Answer 1

我认为最简单的解决方案是使用过滤器小部件（demo）：

HTML

<div class="pager">
    <a href="#" class="prev">&lt;</a> |
    <a href="#" data-column="1" data-filter="1/1/2014 - 2/1/2014 0:00 am">1-2014</a> |
    <a href="#" data-column="1" data-filter="2/1/2014 - 3/1/2014 0:00 am">2-2014</a> |
    <a href="#" data-column="1" data-filter="3/1/2014 - 4/1/2014 0:00 am">3-2014</a> |
    <a href="#" data-column="1" data-filter="4/1/2014 - 5/1/2014 0:00 am">4-2014</a> |
    <a href="#" data-column="1" data-filter="5/1/2014 - 6/1/2014 0:00 am">5-2014</a> |
    <a href="#" data-column="1" data-filter="6/1/2014 - 7/1/2014 0:00 am">6-2014</a> |
    <a href="#" data-column="1" data-filter="" class="active">all</a> |
    <a href="#" data-column="1" class="next">&gt;</a>
</div>

脚本

var $table = $('table').tablesorter({
    theme: 'blue',
    widgets: ['zebra', 'filter'],
    widgetOptions: {
        filter_columnFilters: false
    }
});

$('.pager').find('[data-filter]').on('click', function () {
    var $this = $(this).addClass('active'),
        query = [];
    $this.siblings().removeClass('active');
    // set selected filter
    query[ $this.data('column') ] = $this.data('filter');
    $.tablesorter.setFilters($table, query, true);
});

$('.next, .prev').on('click', function () {
    var $a = $('.pager').find('a[data-filter]'),
        current = $a.index($a.filter('.active')),
        // add/subtract one to get to next; -1 wraps to last
        next = current + ($(this).hasClass('next') ? 1 : -1);
    // wrap last back to first
    next = next >= $a.length ? 0 : next;
    $a.eq(next).click();
});

TableSorter的寻呼机中的自定义页面拆分器

1 个答案: