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

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

Bootstrap Paginator分页插件下载地址:

DownloadVisit Project in GitHub


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

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);
        		}
        	});
        }
页面:

*li里面自动生成的


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

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;
            }
        },

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

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

Bootstrap Paginator分页插件+ajax 实现动态无刷新分页_第1张图片


你可能感兴趣的:(bootstrap,分页,ajax,无刷新)