分页连接

http://mricle.com/JqueryPagination

https://github.com/mricle/pagination

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>test - jquery.pagination.js</title>

    <link href="jquery.pagination.css" rel="stylesheet" />

    <script src="jquery-1.11.2.min.js"></script>

    <script src="jquery.pagination-1.2.7.min.js"></script>

    <style>

        body {

            font-family: 'Microsoft YaHei';

        }

    </style>

</head>

<body>

    <div style="width:1000px; margin:0 auto;">

        <header>

            <h1> jquery pagination plugin</h1>

            <a href="http://mricle.com/JqueryPagination" target="_blank">mricle.com/JqueryPagination</a>

            <br />

            <a href="https://github.com/mricle/pagination" target="_blank">GitHub</a>

        </header>

        <section id="demo">

            <h4>default demo</h4>

            <div id="page" class="m-pagination"></div>

            <div id="eventLog"></div>

        </section>

    </div>

    <script>
var p = {
currentPageNum:0,
perPageSize:10,
params:{
  currentPageNum:0,
  perPageSize:10,
}
}


function initPage(data){
$("#page").unbind().data("page",null).empty();
$("#page").page({ total:1000, pageBtnCount:11, debug: true, showInfo: true, showJump: true, showPageSizes: true, firstBtnText: '首页', lastBtnText: '尾页', prevBtnText: "&laquo;", nextBtnText: "&raquo;", infoFormat: '共{total} 记录', showJump: true, jumpBtnText: '跳转', showInfo: true, showPageSizes: true, pageSizeItems:[5,10,15,20,25,30],
       pageIndex:p.currentPageNum, //初始化时指定某一夜
       pageSize:p.perPageSize,    //初始化时指定每页显示多少条数据 remote: {
         pageSizeName:'perPageSize', //后台接受的时候就要用perPageSize接收
         pageIndeName:'currentPageNum', //后台接收数据的时候就要用currentPageNum url: '<c:url value='getWorkSheets'/>',
         params:data,
         beforeSend:function(){
           //发送之前做些事
         }, success: function (data) { handleReturnData(data); //处理返回的数据,一般是拼字符串放入到table中 },
         complete:function(XMLHttpRequest,textStatu){
          //添加悬浮效果之类的
         } } }); $("#page").on("pageClicked", function (event, pageIndex) { p.params.currentPageNum = pageindex; }).on('jumpClicked', function (event, pageIndex) {
       p.params.currentPageNum = pageindex;
     }).on('pageSizeChanged', function (event, pageSize) {
       p.perPageSize = pageSize;
        p.params.perPageSize = pageSize;
        p.params.currentPageNum = 0;
     });

}
$(function(){
var data = {
  customerId:1
}
//加载页面时调用一次
initPage(data);
});
//如果要做定时刷新,可以考虑使用ajax,不用每次自动刷都初始化插件
//如果有条件查询和统计什么的,可以点击查询的时候初始化一次,或者点击统计信息(待处理12,处理中11 等)时初始化一次
//刷新的时候使用ajax将当前条件带到后台即可
</script> </body> </html>

 

你可能感兴趣的:(分页)