bootstrap实现分页(实例)

  • 时间:2018-09-08 22:40 作者:程序员小新人学习 来源:程序员小新人学习 阅读:292
  • 扫一扫,手机访问
摘要:写前台都会面临的一个问题就是分页,假如是纯js分页也是可以的,只是可能代码量比较大,所以今天写一个关于使用bootstrap框架分页的例子,希望以后可以帮助到少量对这方面比较头疼的码农。首先需要明确的一点是,哪些数据是需要分页的,单从数据显示上其实是没有必要分页的,由于页面是可以显示的出来的,但是作

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

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

先看渲染图:

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"
}
]
}
}

接下来画页面的表格:












发起项目列表












Copyright ? 2018 Company Name | Designed by
csdn




这个时候也页面上是没有任何的元素的,由于我们需要的是将页面上的表格使用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)
}
});
}

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

bootstrap实现分页(实例)


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


/*创立的是一个表格,并将数据放进去*/
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('');
  • 全部评论(0)
最新发布的资讯信息
【网页前端|HTML】最全面的前端开发指南(2019-07-15 12:57)
【系统环境|数据库】零基础如何快速学好大数据?(2019-06-29 12:27)
【系统环境|Linux】零基础如何学好大数据?必备需要学习知识(2019-06-18 11:54)
【系统环境|】Hadoop环境中管理大数据存储八大技巧(2019-06-15 11:01)
【系统环境|服务器应用】现在国内IT行业是不是程序员过多了?(2019-06-11 06:34)
【系统环境|服务器应用】新贵 Flutter(2) 自己设置 Widget(2019-06-11 06:34)
【系统环境|服务器应用】Android完整知识体系路线(菜鸟-资深-大牛必进之路)(2019-06-11 06:34)
【系统环境|服务器应用】Java程序员小伙经历三个月备战,终获阿里offer(2019-06-11 06:34)
【系统环境|服务器应用】每日一问:谈谈对 MeasureSpec 的了解(2019-06-11 06:34)
【系统环境|服务器应用】【科普】晶体管-1(2019-06-11 06:34)
序号项目名称类别发起人单位介绍操作
' + dataLIst[i].id + '