2014-09-01 67 views
1

我使用tablesorter来为我的一些表格进行pagify。在Tablerorter的寻呼机中的自定义页面分割器

是否有可能(或无论如何易于实现一种方式)的网页是按月份或年份? 例如而不是常规页面< | 1 | 2 3 4 5>有< | 01-2014 | 02-2014 03-2014>

+0

你能不能从数据库中拉出它们并按月分组结果?这会削减你的许多工作。 – Ozzy 2014-09-01 09:29:37

+0

当然可以。但是,由于该站点已经启动并正在运行,与如果tablesorter具有相对简单的解决方案相比,手动获取数据和分页是不太理想的解决方案。 – ssnielsen 2014-09-01 09:56:00

+0

你只需要添加一个查询到你的班​​级? 'SELECT * FROM my_table GROUP BY MONTH(创建)'或类似的东西? – Ozzy 2014-09-01 09:58:28

回答

0

我认为最简单的解决办法是使用过滤器窗口小部件(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(); 
}); 
+0

谢谢!看起来像一个有用的解决方案。 – ssnielsen 2014-09-08 13:08:52