jquery分页插件

Demo

默认

• <div id="page1" class="m-pagination"></div>
  <script type="text/javascript">
      $("#page1").page({ total: 1000 });
  </script>

Ajax分页

ajax分页，返回Json格式数据，其中必须返回 total（总数据数，用以计算分页）和列表数据（列表数据需自行在回调函数中处理）。
若第一页不需要加载分页，可以配置 loadFirstPage：false （注意：设置首页不加载分页时，初始化必须设置total）

• <div id="page2" class="m-pagination"></div>
  <script type="text/javascript">
  //请求格式： .../GetPageData?query=test&pageIndex=0&pageSize=10
  //返回数据： {"data":[1,2,3,4,5,6,7,8,9,10],"total":800}
  $("#page2").page({
      remote: {
          url: '/GetPageData',  //请求地址
          params: { query: "test" },       //自定义请求参数
          beforeSend: function(XMLHttpRequest){
              //...
          },
          success: function (result, pageIndex) {
              //回调函数
              //result 为 请求返回的数据，呈现数据
          },
          complete: function(XMLHttpRequest, textStatu){
              //...
          }
          pageIndexName: 'pageIndex',     //请求参数，当前页数，索引从0开始
          pageSizeName: 'pageSize',       //请求参数，每页数量
          totalName: 'total'              //指定返回数据的总数据量的字段名
      }
  });
  </script>
                  

事件

 

• 1 ~ 10 of 832 entires
  Event Log :
  remote callback : {"data":[1,2,3,4,5,6,7,8,9,10],"total":832}
  

• <div id="page3" class="m-pagination"></div>
  <script type="text/javascript">
  $("#page3").page({
      showInfo: true,
      showJump: true,
      showPageSizes: true,
      remote: {
          url: '/GetPageData',
          params: { query: "test" },
          success: function (result, pageIndex) {
              $("#eventLog3").append(' remote callback : ' + JSON.stringify(result) + '');
          }
      }
  }).on("pageClicked", function (event, , pageIndex) {
      $("#eventLog3").append('EventName = pageClicked , pageIndex = ' + , pageIndex + '');
  }).on('jumpClicked', function (event, , pageIndex) {
      $("#eventLog3").append('EventName = jumpClicked , pageIndex = ' + , pageIndex + '');
  }).on('pageSizeChanged', function (event, , pageSize) {
      $("#eventLog3").append('EventName = pageSizeChanged , pageSize = ' + pageSize + '');
  });
  </script>

自定义按钮

 

• 1 ~ 10条，共1000条

• <div id="page3" class="m-pagination"></div>
  <script type="text/javascript">
  $("#page4").page({
      total: 1000,
      firstBtnText: '首页',
      lastBtnText: '尾页',
      prevBtnText: '上一页',
      nextBtnText: '下一页',
      showInfo: true,
      showJump: true,
      jumpBtnText:'跳转',
      showPageSizes: true,
      infoFormat: '{start} ~ {end}条，共{total}条'
  });
  </script>

DataAPI

 

• 1 to 4 of 100 items

• <div id="page3" class="m-pagination" data-total="100" data-page-size="4" data-page-btn-count="9"
          data-show-first-last-btn="true" data-first-btn-text="first" data-last-btn-text="last" 
          data-prev-btn-text="prev" data-next-btn-text="next" data-load-first-page="false" 
          data-show-info="true" data-info-format="{start} to {end} of {total} items"
          data-show-jump="true" data-jump-btn-text="GO!" 
          data-show-page-sizes="true" data-page-size-items="[10,20,30]">
  </div>
  <script type="text/javascript">
  $("#page5").page();
  </script>