写前端都会面临的一个问题就是分页,如果是纯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"
-
}
-
]
-
}
-
}
接下来画页面的表格:
-
<body>
-
<div class="templatemo-content col-1 light-gray-bg">
-
<div class="templatemo-top-nav-container">
-
<div class="row">
-
<nav class="templatemo-top-nav col-lg-12 col-md-12">
-
<li>
-
<a href="">发起项目列表管理
</a>
-
</li>
-
</nav>
-
</div>
-
</div>
-
<!--正文部分-->
-
<div style="background: #E8E8E8;height: 60rem;">
-
-
<div class="templatemo-content-container">
-
<div class="templatemo-content-widget no-padding">
-
<!--表头-->
-
<div class="panel-heading templatemo-position-relative">
-
<h2 class="text-uppercase">发起项目列表
</h2>
</div>
-
<div class="panel panel-default table-responsive" id="mainContent">
-
-
</div>
-
</div>
-
</div>
-
</div>
-
-
<div class="pagination-wrap" id="callBackPager">
-
</div>
-
<footer class="text-right">
-
<p>Copyright © 2018 Company Name | Designed by
-
<a href="http://www.csdn.com" target="_parent">csdn
</a>
-
</p>
-
</footer>
-
</body>
这个时候也页面上是没有任何的元素的,因为我们需要的是将页面上的表格用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)
-
<link href="../../css/font-awesome.min.css" rel="stylesheet" />
-
<link href="../../css/bootstrap.min.css" rel="stylesheet" />
-
<link href="../../css/templatemo-style.css" rel="stylesheet" />
-
<link href="../../css/layui/css/layui.css" rel="stylesheet" />
-
-
<script src="../../js/bootstrap.min.js" type="text/javascript">
</script>
-
<script src="../../js/jquery-1.8.3-min.js" type="text/javascript">
</script>
-
<script src="../../js/jquery.min.js" type="text/javascript">
</script>
-
<script src="../../js/extendPagination.js" type="text/javascript">
</script>
-
<script src="../../js/layui/lay/dest/layui.all.js" type="text/javascript">
</script>
-
<!--引如测试数据的js-->
-
<script src="../../js/testcode.js" type="text/javascript">
</script>
上面的这些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(
' <table class="table table-striped table-bordered templatemo-user-table" style="margin-left: 0;">');
-
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 < showNum; i++) {
-
html.push(
'<tr>');
-
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 href="project_details_init.html?id='+dataLIst[i].id+
'" class="templatemo-edit-btn">详情</a></td>');
-
html.push(
'<td><button class="templatemo-edit-btn" onclick=checkproject(' + dataLIst[i].id +
',"1")>同意' +
-
'</button> <button class="templatemo-edit-btn" onclick=checkproject(' + dataLIst[i].id +
',"2")>拒绝</button></td>');
-
html.push(
'</tr>');
-
}
-
html.push(
'</tbody></table>');
-
var mainObj = $(
'#mainContent');
-
mainObj.empty();
-
mainObj.html(html.join(
''));
-
}
ok,到这里基本就已经将一个页面加载数据和分页处理结束了,是不是很简单,其实本来就不难,只是很多的时候我们不想去测试,当然中间取数据的地方是ajax来处理的,但是为了给你们举例子,我只能将ajax那块取数据的地方直接写到js里面,这个数据是动态的,用ajax取数据的时候,然后就是这个分页其实是后端给数据的时候就已经分好的,我们只是将数据拿到,告诉他页码,他给我们对应页码的数据,前端如果将所有的数据全部拿出来,是不是不可以分页呢?不是的,也是可以的,只是这样的分页性能会很差,因为每次你拿到的数据都是数据库查询所有的数据拿出来的数据,这样对数据库的压力太大了,我们一般叫这种分页为假分页。
ok最后简单的总结一下,分页其实不难,难在怎么理解这个思路,我看了很多的分页的代码,有的是原生的js分页,是可以实现的,但是只是对于开发者来说是一件得不偿失的事情,毕竟前人是给我们提供的有办法的,我们是没必要纠结那些,代码怎么简单快速的实现是最好的方式。
小生不才,有自己的网站搞机族,关于手机的,感兴趣的可以看看,交流一下心得。
写前端都会面临的一个问题就是分页,如果是纯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"
-
}
-
]
-
}
-
}
接下来画页面的表格:
-
<body>
-
<div class="templatemo-content col-1 light-gray-bg">
-
<div class="templatemo-top-nav-container">
-
<div class="row">
-
<nav class="templatemo-top-nav col-lg-12 col-md-12">
-
<li>
-
<a href="">发起项目列表管理
</a>
-
</li>
-
</nav>
-
</div>
-
</div>
-
<!--正文部分-->
-
<div style="background: #E8E8E8;height: 60rem;">
-
-
<div class="templatemo-content-container">
-
<div class="templatemo-content-widget no-padding">
-
<!--表头-->
-
<div class="panel-heading templatemo-position-relative">
-
<h2 class="text-uppercase">发起项目列表
</h2>
</div>
-
<div class="panel panel-default table-responsive" id="mainContent">
-
-
</div>
-
</div>
-
</div>
-
</div>
-
-
<div class="pagination-wrap" id="callBackPager">
-
</div>
-
<footer class="text-right">
-
<p>Copyright © 2018 Company Name | Designed by
-
<a href="http://www.csdn.com" target="_parent">csdn
</a>
-
</p>
-
</footer>
-
</body>
这个时候也页面上是没有任何的元素的,因为我们需要的是将页面上的表格用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)
-
<link href="../../css/font-awesome.min.css" rel="stylesheet" />
-
<link href="../../css/bootstrap.min.css" rel="stylesheet" />
-
<link href="../../css/templatemo-style.css" rel="stylesheet" />
-
<link href="../../css/layui/css/layui.css" rel="stylesheet" />
-
-
<script src="../../js/bootstrap.min.js" type="text/javascript">
</script>
-
<script src="../../js/jquery-1.8.3-min.js" type="text/javascript">
</script>
-
<script src="../../js/jquery.min.js" type="text/javascript">
</script>
-
<script src="../../js/extendPagination.js" type="text/javascript">
</script>
-
<script src="../../js/layui/lay/dest/layui.all.js" type="text/javascript">
</script>
-
<!--引如测试数据的js-->
-
<script src="../../js/testcode.js" type="text/javascript">
</script>
上面的这些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(
' <table class="table table-striped table-bordered templatemo-user-table" style="margin-left: 0;">');
-
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 < showNum; i++) {
-
html.push(
'<tr>');
-
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 href="project_details_init.html?id='+dataLIst[i].id+
'" class="templatemo-edit-btn">详情</a></td>');
-
html.push(
'<td><button class="templatemo-edit-btn" onclick=checkproject(' + dataLIst[i].id +
',"1")>同意' +
-
'</button> <button class="templatemo-edit-btn" onclick=checkproject(' + dataLIst[i].id +
',"2")>拒绝</button></td>');
-
html.push(
'</tr>');
-
}
-
html.push(
'</tbody></table>');
-
var mainObj = $(
'#mainContent');
-
mainObj.empty();
-
mainObj.html(html.join(
''));
-
}
ok,到这里基本就已经将一个页面加载数据和分页处理结束了,是不是很简单,其实本来就不难,只是很多的时候我们不想去测试,当然中间取数据的地方是ajax来处理的,但是为了给你们举例子,我只能将ajax那块取数据的地方直接写到js里面,这个数据是动态的,用ajax取数据的时候,然后就是这个分页其实是后端给数据的时候就已经分好的,我们只是将数据拿到,告诉他页码,他给我们对应页码的数据,前端如果将所有的数据全部拿出来,是不是不可以分页呢?不是的,也是可以的,只是这样的分页性能会很差,因为每次你拿到的数据都是数据库查询所有的数据拿出来的数据,这样对数据库的压力太大了,我们一般叫这种分页为假分页。
ok最后简单的总结一下,分页其实不难,难在怎么理解这个思路,我看了很多的分页的代码,有的是原生的js分页,是可以实现的,但是只是对于开发者来说是一件得不偿失的事情,毕竟前人是给我们提供的有办法的,我们是没必要纠结那些,代码怎么简单快速的实现是最好的方式。
小生不才,有自己的网站搞机族,关于手机的,感兴趣的可以看看,交流一下心得。