这篇文章主要介绍了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('
'); var mainObj = $('#mainContent'); mainObj.empty(); mainObj.html(html.join('')); }'); for(var i = 0; i < showNum; i++) { html.push(' 序号 项目名称 类别 发起人 单位 详情 操作 '); html.push(' '); } html.push('' + dataLIst[i].id + ' '); html.push('' + dataLIst[i].pname + ' '); html.push('' + dataLIst[i].ptypeName + ' '); html.push('' + dataLIst[i].userName + ' '); html.push('' + dataLIst[i].companyName + ' '); html.push('详情 '); html.push(''); html.push(' 最终效果图:
ok,到这里基本就已经将一个页面加载数据和分页处理结束了,是不是很简单,其实本来就不难,只是很多的时候我们不想去测试,当然中间取数据的地方是ajax来处理的,但是为了给你们举例子,我只能将ajax那块取数据的地方直接写到js里面,这个数据是动态的,用ajax取数据的时候,然后就是这个分页其实是后端给数据的时候就已经分好的,我们只是将数据拿到,告诉他页码,他给我们对应页码的数据,前端如果将所有的数据全部拿出来,是不是不可以分页呢?不是的,也是可以的,只是这样的分页性能会很差,因为每次你拿到的数据都是数据库查询所有的数据拿出来的数据,这样对数据库的压力太大了,我们一般叫这种分页为假分页。
感谢你能够认真阅读完这篇文章,希望小编分享bootstrap如何实现分页内容对大家有帮助,同时也希望大家多多支持创新互联,关注创新互联行业资讯频道,遇到问题就找创新互联,详细的解决方法等着你来学习!
文章名称:bootstrap如何实现分页
URL分享:http://njwzjz.com/article/jchish.html