2014-09-01 90 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