jQuery分页插件：JqueryPagination
jopen
9年前
JqueryPagination是一个轻量级的jQuery分页插件。只需几个简单的配置就可以生成分页控件。并且支持ajax获取数据，自定义请求参数，提供多种方法，事件和回调函数，功能全面的分页插件。
Option
| 参数 | 数据类型 | 默认值 | dataAPI | 描述 |
|---|---|---|---|---|
| total | number | 0 | data-total | 总数据数 |
| pageSize | number | 10 | data-page-size | 每页显示数据条数 |
| pageBtnCount | number | 11 | data-page-btn-count | 显示分页按钮数量（推荐设置奇数） |
| showFirstLastBtn | boolean | true | data-show-first-last-btn | 是否显示首页和尾页 |
| firstBtnText | string | null | data-first-btn-text | 自定义首页按钮显示内容 |
| lastBtnText | string | null | data-last-btn-text | 自定义尾页按钮显示内容 |
| prevBtnText | string | « | data-prev-btn-text | 自定义上一页按钮显示内容 |
| nextBtnText | string | » | data-next-btn-text | 自定义下一页按钮显示内容 |
| loadFirstPage | boolean | true | data-load-first-page | 是否加载第一页数据（如果设置为false，需传入total） |
| showInfo | boolean | false | data-show-info | 是否显示分页信息 |
| infoFormat | string | {start} ~ {end} of {total} entires | data-info-format | 自定义分页信息（{start}，{end}，{total}会替换成对应数值） |
| showJump | boolean | false | data-show-jump | 是否显示跳转按钮 |
| jumpBtnText | string | Go | data-jump-btn-text | 跳转按钮显示内容 |
| showPageSizes | boolean | false | data-show-page-sizes | 是否显示每页数据数按钮 |
| pageSizeItems | array | [5, 10, 15, 20] | data-page-size-items | 自定义每页数据数 |
| remote | object | null | ajax获取数据配置 |
<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>