擴展jquery實現(xiàn)客戶端表格的分頁、排序功能代碼
更新時間：2011年03月16日 23:42:31 作者：
下面鏈接中是我用jQuery的擴展來實現(xiàn)的表格分頁和排序，使用這個擴展必須加上表頭<thead>和<tbody>標(biāo)簽，因為我是 通過<tbody>來進行分頁的，要是不加thead，那么表頭也要作為分頁計算時的一個行了。
下載代碼和示例：jqueryPaging.rar
使用方法如下：
<script language="javascript" type="text/javascript">
$("#myTable").tablePaging({ pageSize: 5, sorting: true, sortSelector: ".js-Order", sortType: "number" });
</script>
如果僅僅用分頁功能：$("#myTable").tablePaging();
參數(shù)說明：
id: jQuery(this).attr('id'), // 要分頁的表格的ID
pageSize: 10, // 單個頁面顯示記錄數(shù)，默認是10條
sorting: false,//是否要進行排序，默認不排序
sortDirection: 'asc', //排序順序，默認升序
sortSelector: '',//排序選擇的列，這里需要給td設(shè)置一個class用來識別?？梢詮氖纠锌吹窖菔?
sortType: '', //排序支持的數(shù)字類型，‘number',‘string',‘date'
onPaged: null // 排完序之后綁定事件
看一下分頁效果：
使用方法如下：
復(fù)制代碼 代碼如下:
<script language="javascript" type="text/javascript">
$("#myTable").tablePaging({ pageSize: 5, sorting: true, sortSelector: ".js-Order", sortType: "number" });
</script>
如果僅僅用分頁功能：$("#myTable").tablePaging();
參數(shù)說明：
id: jQuery(this).attr('id'), // 要分頁的表格的ID
pageSize: 10, // 單個頁面顯示記錄數(shù)，默認是10條
sorting: false,//是否要進行排序，默認不排序
sortDirection: 'asc', //排序順序，默認升序
sortSelector: '',//排序選擇的列，這里需要給td設(shè)置一個class用來識別?？梢詮氖纠锌吹窖菔?
sortType: '', //排序支持的數(shù)字類型，‘number',‘string',‘date'
onPaged: null // 排完序之后綁定事件
看一下分頁效果：
您可能感興趣的文章:
- jquery獲取元素索引值index()示例
- jquery 獲取當(dāng)前元素的索引值
- jQuery實現(xiàn)select下拉框獲取當(dāng)前選中文本、值、索引
- jQuery實現(xiàn)獲取元素索引值index的方法
- jquery獲取當(dāng)前元素索引值用法實例
- jQuery Jsonp跨域模擬搜索引擎
- jQuery表格排序組件-tablesorter使用示例
- jquery tablesorter.js 支持中文表格排序改進
- jquery.tableSort.js表格排序插件使用方法詳解
- jQuery增加和刪除表格項目及實現(xiàn)表格項目排序的方法
- jQuery實現(xiàn)帶右側(cè)索引功能的通訊錄示例【附源碼下載】
相關(guān)文章
這篇文章主要介紹了jQuery中empty()方法用法,以實例形式分析了empty()方法的功能、定義及將匹配元素中的所有內(nèi)容移除的使用技巧,需要的朋友可以參考下2015-01-01
下面小編就為大家?guī)硪黄钊肜斫鈐Query事件綁定。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-06-06
CSS3結(jié)合jQuery實現(xiàn)動畫效果及回調(diào)函數(shù)的實例
下面小編就為大家分享一篇CSS3結(jié)合jQuery實現(xiàn)動畫效果及回調(diào)函數(shù)的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2017-12-12
這篇文章主要為大家詳細介紹了jQuery帶控制按鈕輪播圖插件，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-07-07
jquery圓形菜單展開收縮效果是基于jquery和css3實現(xiàn)的，非常不錯，具有參考借鑒價值，需要的的朋友參考下2017-02-02
在瀏覽器中實現(xiàn)圖片粘貼的jQuery插件-- pasteimg使用指南
這篇文章主要介紹了在瀏覽器中實現(xiàn)圖片粘貼的jQuery插件-- pasteimg使用指南,需要的朋友可以參考下2014-12-12
jQuery實現(xiàn)表單步驟流程導(dǎo)航代碼分享
這篇文章主要介紹了jQuery實現(xiàn)表單步驟流程導(dǎo)航，代碼實現(xiàn)效果簡單精致，推薦給大家，有需要的小伙伴可以參考下。2015-08-08
在項目實戰(zhàn)中碰到了一些問題，例如，jquery如何使div居中，此問題一直困擾著我，因此尋找了一些方法，曬出來和大家分享一下2012-11-11
這篇文章主要介紹了jQuery中可見性過濾選擇器的使用,文中分為不可見性選擇器和可見性選擇器來分別舉例講解,需要的朋友可以參考下2016-04-04
jQuery中animate()的使用方法及解決$(”body“).animate({“scrollTop”:top})
這篇文章主要介紹了關(guān)于jQuery中animate()的使用方法及解決$("body").animate({"scrollTop":top})不被Firefox支持的問題，文中介紹的非常詳細，相信對大家具有一定的參考價值，需要的朋友們下面來一起看看吧。2017-04-04