分页插件（基于jq和bootstrap）

感兴趣的可以Clone下来自己看看：https://github.com/jx915/jqPaginator

一：引入js以及bootstrap.css文件

<link href="res/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="res/jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="res/jqPaginator.min.js" type="text/javascript"></script>

二：html

<form id="form1" runat="server">
    <div>
    </div>
    <div>
        <ul class="pagination" id="pagination">
        </ul>      
        <input type="hidden" id="PageSize" runat="server" value="" />
        <input type="hidden" id="countindex" runat="server" value=""/>

        <!--设置最多显示的页码数 可以手动设置 默认为7-->
        <input type="hidden" id="visiblePages" runat="server" value="7" />
    </div>
</form>

三：js
1.初始化

$(function () {
  loadpage(30,6);
});

2.可以作为公共函数用来初始化

function loadpage(myPageCount,myPageSize) {        
   var countindex = myPageCount % myPageSize > 0 ? (myPageCount / myPageSize) + 1 : (myPageCount / myPageSize);
    $("#countindex").val(countindex);
    $.jqPaginator('#pagination', {
        totalPages: parseInt($("#countindex").val()),
        visiblePages: parseInt($("#visiblePages").val()),
        currentPage: 1,
        first: '<li class="first"><a href="javascript:;">首页</a></li>',
        prev: '<li class="prev"><a href="javascript:;"><i class="arrow arrow2"></i>上一页</a></li>',
        next: '<li class="next"><a href="javascript:;">下一页<i class="arrow arrow3"></i></a></li>',
        last: '<li class="last"><a href="javascript:;">末页</a></li>',
        page: '<li class="page"><a href="javascript:;">{{page}}</a></li>',
        onPageChange: function (num, type) {
            if (type == "change") {
                exeData(num,type,myPageCount,myPageSize);
            }
        }
    });
}

3.分页点击函数

function exeData(num, type,myPageCount,myPageSize) {
   loadpage(myPageCount,myPageSize);
   //后续肯定还有数据展示的js 这里只是简单的演示
}

划重点

一般我们分页肯定是数据展示的时候用于分页的，这里给大家看一下用ajax接收数据的时候如何初始化。

$.ajax({
   type: "GET",
   async: true,
   url: url1,
   beforeSend: function(request) {
       request.setRequestHeader("Content-Type", "application/json");
       request.setRequestHeader("Authorization", token1);
   },
   success:function(dat){
       //在这里大家最好做一个判断，因为有时候后台没有数据传过来的总条数为0的话会报错,我们就可以在总条数为0的时候给他一个总条数为1，反正也没有数据
       if(dat.total=0){
           loadpage(1, rows);
       }else{
           loadpage(dat.total, rows); 
       }
       //这里的dat.total是后台返回的条数，rows是自己可以定义的一页显示多少条，到这里的时候大家就可以知道是不是上面那个初始化一样传了两个参数，一个总条数，一个每页显示数呢

   }
})

在初始化之后我们就会出现上面那种图的样子，但是我们点击分页的时候还得重新获取一遍数据

 function exeData(num, type, total, row) {
   loadpage(total, row, state,name);
   //这里传进来的num为页码 也就是第几页
   $.ajax({
       type: "GET",
       async: true,
       url: url1,
       success:function(dat){
        //数据填充
       }
});