擴(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)槲沂?通過(guò)<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)文章
這篇文章主要介紹了jQuery中empty()方法用法,以實(shí)例形式分析了empty()方法的功能、定義及將匹配元素中的所有內(nèi)容移除的使用技巧,需要的朋友可以參考下2015-01-01
下面小編就為大家?guī)?lái)一篇深入理解jQuery事件綁定。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-06-06
CSS3結(jié)合jQuery實(shí)現(xiàn)動(dòng)畫效果及回調(diào)函數(shù)的實(shí)例
下面小編就為大家分享一篇CSS3結(jié)合jQuery實(shí)現(xiàn)動(dòng)畫效果及回調(diào)函數(shù)的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2017-12-12
這篇文章主要為大家詳細(xì)介紹了jQuery帶控制按鈕輪播圖插件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-07-07
基于jQuery代碼實(shí)現(xiàn)圓形菜單展開(kāi)收縮效果
jquery圓形菜單展開(kāi)收縮效果是基于jquery和css3實(shí)現(xiàn)的，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的的朋友參考下2017-02-02
在瀏覽器中實(shí)現(xiàn)圖片粘貼的jQuery插件-- pasteimg使用指南
這篇文章主要介紹了在瀏覽器中實(shí)現(xiàn)圖片粘貼的jQuery插件-- pasteimg使用指南,需要的朋友可以參考下2014-12-12
jQuery實(shí)現(xiàn)表單步驟流程導(dǎo)航代碼分享
這篇文章主要介紹了jQuery實(shí)現(xiàn)表單步驟流程導(dǎo)航，代碼實(shí)現(xiàn)效果簡(jiǎn)單精致，推薦給大家，有需要的小伙伴可以參考下。2015-08-08
在項(xiàng)目實(shí)戰(zhàn)中碰到了一些問(wèn)題，例如，jquery如何使div居中，此問(wèn)題一直困擾著我，因此尋找了一些方法，曬出來(lái)和大家分享一下2012-11-11
舉例講解jQuery中可見(jiàn)性過(guò)濾選擇器的使用
這篇文章主要介紹了jQuery中可見(jiàn)性過(guò)濾選擇器的使用,文中分為不可見(jiàn)性選擇器和可見(jiàn)性選擇器來(lái)分別舉例講解,需要的朋友可以參考下2016-04-04
jQuery中animate()的使用方法及解決$(”body“).animate({“scrollTop”:top})
這篇文章主要介紹了關(guān)于jQuery中animate()的使用方法及解決$("body").animate({"scrollTop":top})不被Firefox支持的問(wèn)題，文中介紹的非常詳細(xì)，相信對(duì)大家具有一定的參考價(jià)值，需要的朋友們下面來(lái)一起看看吧。2017-04-04