擴(kuò)展jquery實(shí)現(xiàn)客戶端表格的分頁(yè)、排序功能代碼
更新時(shí)間：2011年03月16日 23:42:31 作者：
下面鏈接中是我用jQuery的擴(kuò)展來(lái)實(shí)現(xiàn)的表格分頁(yè)和排序，使用這個(gè)擴(kuò)展必須加上表頭<thead>和<tbody>標(biāo)簽，因?yàn)槲沂?通過<tbody>來(lái)進(jìn)行分頁(yè)的，要是不加thead，那么表頭也要作為分頁(yè)計(jì)算時(shí)的一個(gè)行了。
下載代碼和示例：jqueryPaging.rar
使用方法如下：
<script language="javascript" type="text/javascript">
$("#myTable").tablePaging({ pageSize: 5, sorting: true, sortSelector: ".js-Order", sortType: "number" });
</script>
如果僅僅用分頁(yè)功能：$("#myTable").tablePaging();
參數(shù)說(shuō)明：
id: jQuery(this).attr('id'), // 要分頁(yè)的表格的ID
pageSize: 10, // 單個(gè)頁(yè)面顯示記錄數(shù)，默認(rèn)是10條
sorting: false,//是否要進(jìn)行排序，默認(rèn)不排序
sortDirection: 'asc', //排序順序，默認(rèn)升序
sortSelector: '',//排序選擇的列，這里需要給td設(shè)置一個(gè)class用來(lái)識(shí)別?？梢詮氖纠锌吹窖菔?
sortType: '', //排序支持的數(shù)字類型，‘number',‘string',‘date'
onPaged: null // 排完序之后綁定事件
看一下分頁(yè)效果：
使用方法如下：
復(fù)制代碼 代碼如下:
<script language="javascript" type="text/javascript">
$("#myTable").tablePaging({ pageSize: 5, sorting: true, sortSelector: ".js-Order", sortType: "number" });
</script>
如果僅僅用分頁(yè)功能：$("#myTable").tablePaging();
參數(shù)說(shuō)明：
id: jQuery(this).attr('id'), // 要分頁(yè)的表格的ID
pageSize: 10, // 單個(gè)頁(yè)面顯示記錄數(shù)，默認(rèn)是10條
sorting: false,//是否要進(jìn)行排序，默認(rèn)不排序
sortDirection: 'asc', //排序順序，默認(rèn)升序
sortSelector: '',//排序選擇的列，這里需要給td設(shè)置一個(gè)class用來(lái)識(shí)別?？梢詮氖纠锌吹窖菔?
sortType: '', //排序支持的數(shù)字類型，‘number',‘string',‘date'
onPaged: null // 排完序之后綁定事件
看一下分頁(yè)效果：
您可能感興趣的文章:
- jquery獲取元素索引值index()示例
- jquery 獲取當(dāng)前元素的索引值
- jQuery實(shí)現(xiàn)select下拉框獲取當(dāng)前選中文本、值、索引
- jQuery實(shí)現(xiàn)獲取元素索引值index的方法
- jquery獲取當(dāng)前元素索引值用法實(shí)例
- jQuery Jsonp跨域模擬搜索引擎
- jQuery表格排序組件-tablesorter使用示例
- jquery tablesorter.js 支持中文表格排序改進(jìn)
- jquery.tableSort.js表格排序插件使用方法詳解
- jQuery增加和刪除表格項(xiàng)目及實(shí)現(xiàn)表格項(xiàng)目排序的方法
- jQuery實(shí)現(xiàn)帶右側(cè)索引功能的通訊錄示例【附源碼下載】
相關(guān)文章
本文羅列了23款目前非常受歡迎的jQuery插件，可以輕松建立起唯美的圖片切換特效的相冊(cè)功能，并且其中的一些還支持視頻和Flash。2011-04-04
得到j(luò)Query detach()后節(jié)點(diǎn)中的某個(gè)值實(shí)現(xiàn)代碼
需要jQuery -detach 后的dom 結(jié)構(gòu)或某個(gè)值，如何獲取到呢？一直困惑著我們，不過本文將為大家解開疑惑，感興趣的朋友可以了解下，或許本文對(duì)你有所幫助2013-02-02
淺談jQuery的bind和unbind事件(綁定和解綁事件)
下面小編就為大家?guī)?lái)一篇淺談jQuery的bind和unbind事件(綁定和解綁事件)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧2017-03-03
有個(gè)同事問我each使用方法,我把我知道的用法告訴他.他卻說(shuō)不是這樣的.如是在網(wǎng)上小逛了一下,果然用法有很多.下面總結(jié)下大慨的使用方法.2010-12-12
firefox下jQuery UI Autocomplete 1.8.*中文輸入修正方法
在FF下，切換到中文輸入法，再輸入中文，是不能立即自動(dòng)查詢，需要按下其他按鍵，比如CTRL，后來(lái)，通過修改源代碼即可修復(fù)這個(gè)問題2012-09-09
這篇文章主要介紹了jQuery Easyui一些用法，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的的朋友參考下吧2017-08-08
jquery清空textarea等輸入框?qū)崿F(xiàn)代碼
jquery清空textarea等輸入框在工作中很常見，接下來(lái)的代碼簡(jiǎn)單實(shí)用，感興趣的朋友可以參考下哈，希望對(duì)你有所幫助2013-04-04
Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它簡(jiǎn)潔靈活，使得 Web 開發(fā)更加快捷。這篇文章主要介紹了Bootstrap的核心——柵格系統(tǒng)的使用,需要的朋友可以參考下2017-10-10
基于jQuery插件實(shí)現(xiàn)點(diǎn)擊小圖顯示大圖效果
這篇文章主要為大家詳細(xì)介紹了基于jQuery實(shí)現(xiàn)點(diǎn)擊小圖顯示大圖效果的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-05-05
Jquery之Ajax運(yùn)用 學(xué)習(xí)運(yùn)用篇
JQuery中Ajax的運(yùn)用相信很多人都已熟悉，本文主要是記錄下個(gè)人實(shí)踐中的應(yīng)用知識(shí)，旨在加強(qiáng)記憶。2011-09-09