基於JQuery組件實現table排序功能

基於JQuery組件實現table排序功能

使用JQuery的好處:
1、3個JS文件都是經過壓縮,總共不到50K,因此不會影響頁面讀取速度
2、導入jquery.js文件,可減少編寫JS代碼量

 

要實現table排序功能,需要包含以下3個文件
jquery-1.2.6.pack.js
jquery.tablesorter.min.js
jquery.tablesorter.pager.js 或 jquery.tablesorter.pager-1.1.js

jquery.tablesorter.min.js (僅共產品開發用)


實現對table排序,但沒有分頁功能

可實現功能包括:
1、只能基於table表格的排序實現;
1、可實現對table表格每個列或指定列進行排序;
2、可強制指定列排序;
3、可對table列自定義CSS樣式;
4、DEBUG斷點調試;
5、可實現多列複合排序;

 

優點:
1、可一次性讀取所有記錄,由JS實現分頁,不再需要由分頁類實現分頁功能
2、不需要後臺硬編碼實現排序,直接由JS實現,無需重新編碼
3、減輕服務器承受的壓力
4、對table排序的綁定和卸載方便

 

缺點:
1、需學習JQuery編碼模式和jquery.tablesorter組件
2、當數據量大時,如1000條以上記錄,可能會出現頁面加載後,有1-2秒頁面停頓效果。
3、數據的實時性差

 

jquery.tablesorter.pager.js
可對jquery.tablesorter組件實現分頁功能效果

 

實現功能:
1、在jquery.tablesorter.min.js基礎上實現分頁
2、支持上一頁、下一頁、首頁、末頁、頁數和總頁數同時顯示、每頁顯示數據

 

改進的jquery.tablesorter.pager-1.1.js
增加功能:
1、支持單獨顯示頁數,如:“第1頁”
2、支持單獨顯示總頁數,如:“共5頁”
3、增加輸入頁碼數進行頁數轉向

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