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>