bootstrap 分页效果

<script type="text/javascript" src="js/bootstrap-paginator.js"></script>

1.添加相应的js文件

2.获取第一页的所有信息

$.ajax({
  type:"get",
  url:location_url,
  data:{"id":id,"pageNum":1,"status":status},   success:function(data){ if(data!=''){   var info = JSON.parse(data);   console.log(info);   if(info.retcode == 0){ //字符拼接 table_msg(info,1); //分页 pageLimit(info,carId,id,status);   }else if(info.retcode == 1){ $("#table_list").append('<p style="text-align:center">'+info.retmsg+'</p>');   }   $(".loading").hide(); }   }
})

3.分页信息

function pageLimit(info,carId,id,status,method){
   $('#pageLimit').find("li").remove();
   var pageCount = info.pageCount; //取到pageCount的值(把返回数据转成object类型)
    var currentPage = carId; //得到currentPage
    var options = {
        bootstrapMajorVersion: 3, //版本
        currentPage: currentPage, //当前页数
        totalPages: pageCount, //总页数
        numberOfPages:8,
        itemTexts: function (type, page, current) {
        	switch (type) {
                case "first":
                    return "首页";
                case "prev":
                    return "上一页";
                case "next":
                    return "下一页";
                case "last":
                    return "末页";
                case "page":
                    return page;
            }
        },
        onPageClicked: function (event, originalEvent, type, page) {
        	$(".loading").show();
        	$("#table_list table").remove();
			$("#pageLimit>li").remove();
			
            $.ajax({
                type:"get",
		url:location_url,
		data:{"id":id,"pageNum":page,"status":status},
                success: function (data1) {
                    if (data1 != null) {
                        var info = JSON.parse(data1);
			//字符拼接
			table_msg(info,page);
			$(".loading").hide();
                    }
                }
            });
		}
    };
    $('#pageLimit').bootstrapPaginator(options);
}

4.html

<div id="example" style="text-align: center"><ul id="pageLimit"></ul></div>
posted @ 2018-08-15 12:29  董七  阅读(727)  评论(0编辑  收藏  举报