jQuery分頁插件:JqueryPagination
JqueryPagination是一個輕量級的jQuery分頁插件。只需幾個簡單的配置就可以生成分頁控件。并且支持ajax獲取數據,自定義請求參數,提供多種方法,事件和回調函數,功能全面的分頁插件。

Option
| 參數 |
數據類型 |
默認值 |
dataAPI |
描述 |
</tr>
</tbody>
| total |
number |
0 |
data-total |
總數據數 |
</tr>
| pageSize |
number |
10 |
data-page-size |
每頁顯示數據條數 |
</tr>
| pageBtnCount |
number |
11 |
data-page-btn-count |
顯示分頁按鈕數量(推薦設置奇數) |
</tr>
| showFirstLastBtn |
boolean |
true |
data-show-first-last-btn |
是否顯示首頁和尾頁 |
</tr>
| firstBtnText |
string |
null |
data-first-btn-text |
自定義首頁按鈕顯示內容 |
</tr>
| lastBtnText |
string |
null |
data-last-btn-text |
自定義尾頁按鈕顯示內容 |
</tr>
| prevBtnText |
string |
? |
data-prev-btn-text |
自定義上一頁按鈕顯示內容 |
</tr>
| nextBtnText |
string |
? |
data-next-btn-text |
自定義下一頁按鈕顯示內容 |
</tr>
| loadFirstPage |
boolean |
true |
data-load-first-page |
是否加載第一頁數據(如果設置為false,需傳入total) |
</tr>
| showInfo |
boolean |
false |
data-show-info |
是否顯示分頁信息 |
</tr>
| infoFormat |
string |
{start} ~ {end} of {total} entires |
data-info-format |
自定義分頁信息({start},{end},{total}會替換成對應數值) |
</tr>
| showJump |
boolean |
false |
data-show-jump |
是否顯示跳轉按鈕 |
</tr>
| jumpBtnText |
string |
Go |
data-jump-btn-text |
跳轉按鈕顯示內容 |
</tr>
| showPageSizes |
boolean |
false |
data-show-page-sizes |
是否顯示每頁數據數按鈕 |
</tr>
| pageSizeItems |
array |
[5, 10, 15, 20] |
data-page-size-items |
自定義每頁數據數 |
</tr>
| remote |
object |
|
null |
ajax獲取數據配置 |
</tr>
</tbody>
</table>
<link href="jquery.pagination.css" rel="stylesheet">
<script src="jquery.min.js"></script>
<script src="jquery.pagination.js"></script>
<!-- HTML -->
<div id="page" class="m-pagination"></div>
<!-- JavaScript -->
<script type="text/javascript">
$("#page").page({
showInfo: true,
showJump: true,
showPageSizes: true,
remote: {
url: '/GetPageData',
beforeSend: function(XMLHttpRequest){
//...
},
success: function (data, pageIndex) {
$("#eventLog").append('pageIndex : ' + pageIndex + ' , remote callback : '
+ JSON.stringify(data) + '<br />');
},
complete: function(XMLHttpRequest, textStatu){
//...
}
}
}).on("pageClicked", function (event, pageIndex) {
$("#eventLog").append('EventName = pageClicked , pageIndex = ' + pageIndex + '<br />');
}).on('jumpClicked', function (event, pageIndex) {
$("#eventLog").append('EventName = jumpClicked , pageIndex = ' + pageIndex + '<br />');
}).on('pageSizeChanged', function (event, pageSize) {
$("#eventLog").append('EventName = pageSizeChanged , pageSize = ' + pageSize + '<br />');
});
</script>
</pre>
項目主頁:http://www.baiduhome.net/lib/view/home/1434269411652
本文由用戶
jopen 自行上傳分享,僅供網友學習交流。所有權歸原作者,若您的權利被侵害,請聯系管理員。
轉載本站原創文章,請注明出處,并保留原始鏈接、圖片水印。
本站是一個以用戶分享為主的開源技術平臺,歡迎各類分享!
sesese色