写前端都会面临的一个问题就是分页，如果是纯js分页也是可以的，只是可能代码量比较大，所以今天写一个关于用bootstrap框架分页的例子，希望以后可以帮助到一些对这方面比较头疼的码农。
首先需要明确的一点是，哪些数据是需要分页的，单从数据显示上其实是没有必要分页的，因为页面是可以显示的出来的，但是作为一个相对比较合格的前端，你首先要考虑的不仅仅是这个功能是不是可以实现，而是要考虑用户体验是不是好的，在既有功能上如果可以更多的考虑用户体验的问题，那么才可以算是一个相对比较合格的前端工程师。
先看渲染图：
这个是一个项目中的例子，今天就做以这个为例子，做一下
首先我们将需要用的数据准备好（这个一般是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"
}
]
}
}
接下来画页面的表格：
发起项目列表
这个时候也页面上是没有任何的元素的，因为我们需要的是将页面上的表格用js动态的画出来，这样才可以实现取出来的数据是可以分页的，但是画表格的前提是你要可以拿到数据对不对，所以接下来应该是拿数据，而不是急着画表格，因为没有数据的时候你的表格即使是画出来了，也是显示不出来的，那么我们开始拿数据：
我们写一个函数取数据：
/*将数据取出来*/
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)
}
拿到数据以后怎么做，分页，是的，不是急着将数据放到表格里面，先分页，ok我们加载分页的js（bootstrap的分页js）
上面的这些js，css都可以去cdn上面找到，除了testcode，在最上面，就是我们加载数据的js。
下面就是将分页的代码写上：
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)
}
});
}
加载以后的效果是这样的：
这个时候就是已经基本将数据处理好了，只是没有将数据放进去，最后我们将数据放进去就可以了，（我的写法不建议借鉴，很多现成的循环画表格的方法，我是原生的拼接字符串写的，不嫌麻烦的可以自己拼一下，毕竟不管是什么框架，最底层的还是这样的实现原理）
/*创建的是一个表格，并将数据放进去*/
function createTable(currPage, limit, total) {
var html = [],
showNum = limit;
if(total - (currPage * limit) < 0) showNum = total - ((currPage - 1) * limit);
html.push(' | 序号 | 项目名称 | 类别 | 发起人 | 单位 | 详情 | 操作 |
|---|---|---|---|---|---|---|
| ' + dataLIst[i].id + ' | ');
| 留言与评论（共有 0 条评论） |