使用tablesorter.js給table添加排序功能

最近項目中遇到一個需求,組要給加載的table顯示的數據添加排序功能,由於需要好的用戶體驗,使用GridView時,點擊表頭列名時,會刷新頁面,而且這種服務器控件是將所有數據放入內存中,然後在內存中進行分頁和排序的。對於大量數據時性能不夠好。

所以就使用jQuery插件來完成table的無刷新排序了。

這裏使用的是JQuery.tablesorter.js插件來完成的,效果很好,使用也很簡單。

在頁面中引入jQuery.js和jQuery.tablesorter.js;

在 $(function ()
            {

 $("#tableID").tablesorter({ headers: { 8: { sorter: false}} });

}

給頁面中的table綁定排序事件,同時將第9列設置不可排序。列的索引是從0開始的。

如果是同個ajax動態給table添加的數據,需要在ajax完成事件中添加:

 $("#tableID").trigger("update");

這樣就給頁面上的table加上了排序功能,只需單擊列名,就可無刷新排序整個表格數據了。

官方文檔以及demo: http://mottie.github.io/tablesorter/docs/index.html


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章