写前端都会面临的一个问题就是分页，如果是纯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 "urname":"night夜",//发起人名称 "companyname":"康佰裕",//发起人公司名称 "ptypename":"13",//发起项目类别 "pask":"13", "pname":"13", "pdesc":"13" }, { "id":16, "urname":"night夜", "companyname":"康佰裕", "ptypename":"12", "pask":"12", "pname":"12", "pdesc":"12" }, { "id":15, "urname":"bb机", "companyname":"北京电影", "ptypename":"11", "pask":"11", "pname":"11", "pdesc":"11" }, { "id":14, "urname":"bb机", "companyname":"北京电影", "ptypename":"9", "pask":"9", "pname":"9", "pdesc":"9" }, { "id":13, "urname":"bb机", "companyname":"北京电影", "ptypename":"7", "pask":"7", "pname":"7", "pdesc":"7" }, { "id":12, "urname":"night夜", "companyname":"康佰裕", "ptypename":"6", "pask":"6", "pname":"6", "pdesc":"6" }, { "id":11, "urname":"bb机", "companyname":"北京电影", "ptypename":"5", "pask":"5", "pname":"5", "pdesc":"5" }, { "id":10, "urname":"night夜", "companyname":"康佰裕", "ptypename":"4", "pask":"4", "pname":"4", "pdesc":"4" }, { "id":9, "urname":"bb机", "companyname":"北京电影", "ptypename":"3", "pask":"3", "pname":"3", "pdesc":"3" }, { "id":8, "urname":"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-upperca">发起项目列表</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) shownu250字作文m = total - ((currpage - 1) * limit);html.push(' <毕业生简历表格下载table class="table table-striped table-bor杭州市那个省dered templatemo-ur-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>');
本文发布于:2023-04-05 08:18:56，感谢您对本站的认可！
本文链接：https://www.wtabcd.cn/fanwen/zuowen/cd7eccf8f551ec0c3ea37cf74d6ddd9a.html
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
本文word下载地址：bootstrap上传图片插件（bootstrap图片大小设置方法）.doc
本文 PDF 下载地址：bootstrap上传图片插件（bootstrap图片大小设置方法）.pdf
| 留言与评论（共有 0 条评论） |
