Products
GG网络技术分享 2025-03-18 16:14 10
写前端都会面临的一个问题就是分页，如果是纯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>\');
这篇文章主要介绍了JS实现前端动态分页码代码实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
思路分析：有3种情况
第一种情况，当前页面curPage < 4
第二种情况，当前页面curPage == 4
第三种情况，当前页面curPage>4
此外，还要考虑，当前页码 curPage < pageTotal（总页码）-2，才显示 ...
首先，先是前端的布局样式
| <body> /*首先，在body中添加div id=\"pagination\" */ <div id=\"pagination\"> <!-- 后面会在JS中动态追加 ，此处为了，实现前端效果，所以注册 <a id=\"prevBtn\"><</a> <a id=\"first\">1</a> <a href=\"#\" rel=\"external nofollow\" rel=\"external nofollow\" rel=\"external nofollow\" rel=\"external nofollow\" rel=\"external nofollow\" rel=\"external nofollow\" rel=\"external nofollow\" rel=\"external nofollow\" rel=\"external nofollow\" >2</a> <a href=\"#\" rel=\"external nofollow\" rel=\"external nofollow\" rel=\"external nofollow\" rel=\"external nofollow\" rel=\"external nofollow\" rel=\"external nofollow\" rel=\"external nofollow\" rel=\"external nofollow\" rel=\"external nofollow\" >3</a> <a href=\"#\" rel=\"external nofollow\" rel=\"external nofollow\" rel=\"external nofollow\" rel=\"external nofollow\" rel=\"external nofollow\" rel=\"external nofollow\" rel=\"external nofollow\" rel=\"external nofollow\" rel=\"external nofollow\" >4</a> <span>...</span> <a href=\"#\" rel=\"external nofollow\" rel=\"external nofollow\" rel=\"external nofollow\" rel=\"external nofollow\" rel=\"external nofollow\" rel=\"external nofollow\" rel=\"external nofollow\" rel=\"external nofollow\" rel=\"external nofollow\" id=\"last\">10</a> <a href=\"#\" rel=\"external nofollow\" rel=\"external nofollow\" rel=\"external nofollow\" rel=\"external nofollow\" rel=\"external nofollow\" rel=\"external nofollow\" rel=\"external nofollow\" rel=\"external nofollow\" rel=\"external nofollow\" id=\"nextBtn\">></a> --> </div> </body> |
其次，是css代码
| *{ margin: 0; padding: 0; } #pagination{ width: 500px; height: 100px; border: 2px solid crimson; margin: 50px auto ; padding-top: 50px ; padding-left: 50px; } .over,.pageItem{ float: left; display: block; width: 35px; height: 35px; line-height: 35px; text-align: center; } .pageItem{ border: 1px solid orangered; text-decoration: none; color: dimgrey; margin-right: -1px;/*解决边框加粗问题*/ } .pageItem:hover{ background-color: #f98e4594; color:orangered ; } .clearfix{ clear: both; } .active{ background-color: #f98e4594; color:orangered ; } .banBtn{ border:1px solid #ff980069; color: #ff980069; } #prevBtn{ margin-right: 10px; } #nextBtn{ margin-left: 10px; } |
JavaScript代码
| <script type=\"text/javascript\"> var pageOptions = {pageTotal:10,curPage:7,paginationId:\'\'}; dynamicPagingFunc(pageOptions); function dynamicPagingFunc(pageOptions){ var pageTotal = pageOptions.pageTotal || 1; var curPage = pageOptions.curPage||1; var doc = document; var paginationId = doc.getElementById(\'\'+pageOptions.paginationId+\'\') || doc.getElementById(\'pagination\'); var html = \'\'; if(curPage>pageTotal){ curPage =1; } /*总页数小于5，全部显示*/ if(pageTotal<=5){ html = appendItem(pageTotal,curPage,html); paginationId.innerHTML = html; } /*总页数大于5时，要分析当前页*/ if(pageTotal>5){ if(curPage<=4){ html = appendItem(pageTotal,curPage,html); paginationId.innerHTML = html; }else if(curPage>4){ html = appendItem(pageTotal,curPage,html); paginationId.innerHTML = html; } } } function appendItem(pageTotal,curPage,html){ var starPage = 0; var endPage = 0; html+=\'<a id=\"prevBtn\"><</a>\'; if(pageTotal<=5){ starPage = 1; endPage = pageTotal; }else if(pageTotal>5 && curPage<=4){ starPage = 1; endPage = 4; if(curPage==4){ endPage = 5; } }else{ if(pageTotal==curPage){ starPage = curPage-3; endPage = curPage; }else{ starPage = curPage-2; endPage = curPage+1; } html += \'<a id=\"first\">1</a><span>...</span>\'; } for(let i = starPage;i <= endPage;i++){ if(i==curPage){ html += \'<a id=\"first\">\'+i+\'</a>\'; }else{ html += \'<a href=\"#\" rel=\"external nofollow\" rel=\"external nofollow\" rel=\"external nofollow\" rel=\"external nofollow\" rel=\"external nofollow\" rel=\"external nofollow\" rel=\"external nofollow\" rel=\"external nofollow\" rel=\"external nofollow\" >\'+i+\'</a>\'; } } if(pageTotal<=5){ html+=\'<a href=\"#\" rel=\"external nofollow\" rel=\"external nofollow\" rel=\"external nofollow\" rel=\"external nofollow\" rel=\"external nofollow\" rel=\"external nofollow\" rel=\"external nofollow\" rel=\"external nofollow\" rel=\"external nofollow\" id=\"nextBtn\">></a>\'; }else{ if(curPage<pageTotal-2){ html += \'<span>...</span>\'; } if(curPage<=pageTotal-2){ html += \'<a href=\"#\" rel=\"external nofollow\" rel=\"external nofollow\" rel=\"external nofollow\" rel=\"external nofollow\" rel=\"external nofollow\" rel=\"external nofollow\" rel=\"external nofollow\" rel=\"external nofollow\" rel=\"external nofollow\" >\'+pageTotal+\'</a>\'; } html+=\'<a href=\"#\" rel=\"external nofollow\" rel=\"external nofollow\" rel=\"external nofollow\" rel=\"external nofollow\" rel=\"external nofollow\" rel=\"external nofollow\" rel=\"external nofollow\" rel=\"external nofollow\" rel=\"external nofollow\" id=\"nextBtn\">></a>\'; } return html; } </script> |
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
Demand feedback
