Bootstrap Paginator分页插件+ajax 实现动态无刷新分页

之前做分页想过做淘宝的那个，但是因为是后台要求不高，就Bootstrap Paginator插件感觉还蛮容易上手，所以就选了它。

Bootstrap Paginator分页插件下载地址：

DownloadVisit Project in GitHub

1.这是需要分页的页面放的 js函数：

<span style="font-size:14px;">function paging(page){
        	$.ajax({
          	   type: "GET",
          	   url: "${ctx}/api/v1/user/1/"+(page-1)+"/5",
          	   dataType:"json",
          	   success: function(msg){
 	         	 ....//省略（查询出来数据）
          	   }
          	});
        	$.ajax({
        		type: "GET",
        		url:"${ctx}/api/v1/user/count/1",
        		dataType:"json",
        		success:function(msg){
                    var pages = Math.ceil(msg.data/5);//这里data里面有数据总量
                    var element = $('#pageUl');//对应下面ul的ID
                    var options = {
                        bootstrapMajorVersion:3,
                        currentPage: page,//当前页面
                        numberOfPages: 5,//一页显示几个按钮（在ul里面生成5个li）
                        totalPages:pages //总页数
                    }
                   element.bootstrapPaginator(options);
        		}
        	});
        }</span>
           

页面：

<span style="font-size:14px;"><ul class="pagination" id="pageUl">
</ul></span>
           

*li里面自动生成的

2.最重要也是最核心的是要自己改下bootstrap-paginator.js源文件，如下：

<span style="font-size:14px;">onPageClicked: function (event, originalEvent, type, page) {

            //show the corresponding page and retrieve the newly built item related to the page clicked before for the event return
        	
            var currentTarget = $(event.currentTarget);

            switch (type) {
            case "first":
                currentTarget.bootstrapPaginator("showFirst");
                paging(page);
                break;
                //上一页
            case "prev":
                currentTarget.bootstrapPaginator("showPrevious");
                paging(page);
                break;
            case "next":
                currentTarget.bootstrapPaginator("showNext");
                paging(page);
                break;
            case "last":
                currentTarget.bootstrapPaginator("showLast");
                paging(page);
                break;
            case "page":
                currentTarget.bootstrapPaginator("show", page);
                paging(page);
                break;
            }
        },</span>
           

*在你点击的页面样式出来后调用paging（page）方法，这里的page源文件里的参数已经有了，直接传！

效果：当样式改变后，直接拿控件的page值进行ajax请求的发送！最后实现无刷新分页。