bootstrap如何实现分页

这篇文章主要介绍了bootstrap如何实现分页，具有一定借鉴价值，需要的朋友可以参考下。希望大家阅读完这篇文章后大有收获。下面让小编带着大家一起了解一下。

创新互联建站于2013年创立，是专业互联网技术服务公司，拥有项目成都网站建设、网站制作网站策划，项目实施与项目整合能力。我们以让每一个梦想脱颖而出为使命，1280元河北做网站,已为上家服务,为河北各地企业和个人服务,联系电话:13518219792

写前端都会面临的一个问题就是分页，如果是纯js分页也是可以的，只是可能代码量比较大，所以今天写一个关于用bootstrap框架分页的例子，希望以后可以帮助到一些对这方面比较头疼的码农。

首先需要明确的一点是，哪些数据是需要分页的，单从数据显示上其实是没有必要分页的，因为页面是可以显示的出来的，但是作为一个相对比较合格的前端，你首先要考虑的不仅仅是这个功能是不是可以实现，而是要考虑用户体验是不是好的，在既有功能上如果可以更多的考虑用户体验的问题，那么才可以算是一个相对比较合格的前端工程师。

1、首先我们将需要用的数据准备好（这个一般是ajax请求到的数据，现在我们直接放到一个js里面，加载js的时候直接取出数据）

var testboke = {
    "code":200,
    "message":null,
    "data":{
        "total":17,//总条数
        "size":10,//分页大小-默认为0
        "pages":2,//总页数
        "current":1,//当前页数
        "records":[//author-riverLethe-double-slash-note数据部分
            {
                "id":17,//项目id
                "userName":"Night夜",//发起人名称
                "companyName":"康佰裕",//发起人公司名称
                "ptypeName":"13",//发起项目类别
                "pask":"13",
                "pname":"13",
                "pdesc":"13"
            },
            {
                "id":16,
                "userName":"Night夜",
                "companyName":"康佰裕",
                "ptypeName":"12",
                "pask":"12",
                "pname":"12",
                "pdesc":"12"
            },
            {
                "id":15,
                "userName":"BB机",
                "companyName":"北京电影",
                "ptypeName":"11",
                "pask":"11",
                "pname":"11",
                "pdesc":"11"
            },
            {
                "id":14,
                "userName":"BB机",
                "companyName":"北京电影",
                "ptypeName":"9",
                "pask":"9",
                "pname":"9",
                "pdesc":"9"
            },
            {
                "id":13,
                "userName":"BB机",
                "companyName":"北京电影",
                "ptypeName":"7",
                "pask":"7",
                "pname":"7",
                "pdesc":"7"
            },
            {
                "id":12,
                "userName":"Night夜",
                "companyName":"康佰裕",
                "ptypeName":"6",
                "pask":"6",
                "pname":"6",
                "pdesc":"6"
            },
            {
                "id":11,
                "userName":"BB机",
                "companyName":"北京电影",
                "ptypeName":"5",
                "pask":"5",
                "pname":"5",
                "pdesc":"5"
            },
            {
                "id":10,
                "userName":"Night夜",
                "companyName":"康佰裕",
                "ptypeName":"4",
                "pask":"4",
                "pname":"4",
                "pdesc":"4"
            },
            {
                "id":9,
                "userName":"BB机",
                "companyName":"北京电影",
                "ptypeName":"3",
                "pask":"3",
                "pname":"3",
                "pdesc":"3"
            },
            {
                "id":8,
                "userName":"Night夜",
                "companyName":"康佰裕",
                "ptypeName":"2",
                "pask":"2",
                "pname":"2",
                "pdesc":"2"
            }
        ]
    }
}

2、接下来画页面的表格：

			

				

					

						
					
				
				
				

 
					

						

							
							

								
发起项目列表
							

 
							
						
					
				
 
				

				
					
	

这个时候也页面上是没有任何的元素的，因为我们需要的是将页面上的表格用js动态的画出来，这样才可以实现取出来的数据是可以分页的，但是画表格的前提是你要可以拿到数据对不对，所以接下来应该是拿数据，而不是急着画表格，因为没有数据的时候你的表格即使是画出来了，也是显示不出来的，那么我们开始拿数据：

3、我们写一个函数取数据：

/*将数据取出来*/
		function data(curr, limit) {
				//console.log("tot:"+totalCount)
						/*拿到总数据*/
				totalCount = testboke.data.total; //取出来的是数据总量
				dataLIst = testboke.data.records; // 将数据放到一个数组里面（dataLIst 还未声明，莫着急）
				createTable(curr, limit, totalCount);
                console.log("tot:"+totalCount)
		}

4、加载分页的js（bootstrap的分页js）

上面的这些js，css都可以去cdn上面找到，除了testcode，在最上面，就是我们加载数据的js。

5、下面就是将分页的代码写上：

var currPage = 1;
		var totalCount;
		var dataLIst = [];
		window.onload = function() {
			/*取到总条数*/
			/*每页显示多少条  10条*/
			var limit = 10;
			data(currPage, limit)
			//console.log(totalCount)
			createTable(1, limit, totalCount);
			$('#callBackPager').extendPagination({
				totalCount: totalCount,
				limit: limit,
				callback: function(curr, limit, totalCount) {
					data(curr, limit)
				}
			});
		}

加载以后的效果是这样的：

6、这个时候就是已经基本将数据处理好了，只是没有将数据放进去，最后我们将数据放进去就可以了，（我的写法不建议借鉴，很多现成的循环画表格的方法，我是原生的拼接字符串写的，不嫌麻烦的可以自己拼一下，毕竟不管是什么框架，最底层的还是这样的实现原理）

/*创建的是一个表格，并将数据放进去*/
		function createTable(currPage, limit, total) {
			var html = [],
				showNum = limit;
			if(total - (currPage * limit) < 0) showNum = total - ((currPage - 1) * limit);
			html.push(' ');
			html.push(' ');
			for(var i = 0; i < showNum; i++) {
				html.push('');
				html.push('');
				html.push('');
				html.push('');
				html.push('');
				html.push('');
				html.push('');
				html.push('');
				html.push('');
			}
			html.push('
序号
项目名称
类别
发起人
单位
详情
操作
' + dataLIst[i].id + '
' + dataLIst[i].pname + '
' + dataLIst[i].ptypeName + '
' + dataLIst[i].userName + '
' + dataLIst[i].companyName + '
详情
同意' +
					' 拒绝
');
			var mainObj = $('#mainContent');
			mainObj.empty();
			mainObj.html(html.join(''));
		}

最终效果图：

ok，到这里基本就已经将一个页面加载数据和分页处理结束了，是不是很简单，其实本来就不难，只是很多的时候我们不想去测试，当然中间取数据的地方是ajax来处理的，但是为了给你们举例子，我只能将ajax那块取数据的地方直接写到js里面，这个数据是动态的，用ajax取数据的时候，然后就是这个分页其实是后端给数据的时候就已经分好的，我们只是将数据拿到，告诉他页码，他给我们对应页码的数据，前端如果将所有的数据全部拿出来，是不是不可以分页呢？不是的，也是可以的，只是这样的分页性能会很差，因为每次你拿到的数据都是数据库查询所有的数据拿出来的数据，这样对数据库的压力太大了，我们一般叫这种分页为假分页。

感谢你能够认真阅读完这篇文章，希望小编分享bootstrap如何实现分页内容对大家有帮助，同时也希望大家多多支持创新互联，关注创新互联行业资讯频道，遇到问题就找创新互联，详细的解决方法等着你来学习!