jQuery分页插件:JqueryPagination

jopen 7年前

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>                  

项目主页:http://www.open-open.com/lib/view/home/1434269411652