bootstrap怎么实现分页

百变鹏仔 1个月前 (11-14) #bootstrap

文章标签分页

推荐教程：BootStrap教程

写前端都会面临的一个问题就是分页，如果是纯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、接下来画页面的表格：

		<div>			<div><div>	<nav><li>	<a>发起项目列表管理</a></li>	</nav></div>			</div>			<!--正文部分-->			<div> <div>	<div><!--表头--><div>	<h2>发起项目列表</h2></div><div> </div>	</div></div>			</div> 			<div>			</div>			<footer><p>Copyright © 2018 Company Name | Designed by	<a>csdn</a></p>			</footer><p>这个时候也页面上是没有任何的元素的，因为我们需要的是将页面上的表格用js动态的画出来，这样才可以实现取出来的数据是可以分页的，但是画表格的前提是你要可以拿到数据对不对，所以接下来应该是拿数据，而不是急着画表格，因为没有数据的时候你的表格即使是画出来了，也是显示不出来的，那么我们开始拿数据：<span style="font-size: 16px;"></span><br></p><p><span style="font-size: 16px;"><strong>3、我们写一个函数取数据：</strong></span></p><pre class="brush:js;toolbar:false">/*将数据取出来*/	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）

	<link><link><link><link><script></script><script></script><script></script><script></script><script></script><!--引如测试数据的js--><script></script>

上面的这些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) ');		html.push(' <thead><tr><th>序号</th><th>项目名称</th><th>类别</th><th>发起人</th><th>单位</th><th>详情</th><th>操作</th></tr></thead><tbody>');		for(var i = 0; i ');			html.push('<td>' + dataLIst[i].id + '</td>');			html.push('<td>' + dataLIst[i].pname + '</td>');			html.push('<td>' + dataLIst[i].ptypeName + '</td>');			html.push('<td>' + dataLIst[i].userName + '</td>');			html.push('<td>' + dataLIst[i].companyName + '</td>');			html.push('<td><a>详情</a></td>');			html.push('<td><button>同意' +'</button> <button>拒绝</button></td>');			html.push('');		}		html.push('</tbody>');		var mainObj = $('#mainContent');		mainObj.empty();		mainObj.html(html.join(''));	}

最终效果图：

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

文章推荐

bootstrap怎么实现分页

学习bootstrap需要什么基础

bootstrap模态框有什么用

bootstrap是什么意思啊

bootstrap是什么时间开源的

bootstrap怎么实现响应式