前端编写人员将面临的一个问题是分页。如果是纯js分页就可以了，但是代码量可能比较大。所以今天，我用bootstrap框架写一个分页的例子，希望对以后一些在这方面头疼的程序员有所帮助。
首先需要明确哪些数据需要分页，但实际上只从数据显示上分页是没有必要的，因为页面是可以显示的。但是作为一个相对合格的前端，首先要考虑的不仅仅是这个功能能否实现，还有用户体验是否良好。如果现有的功能可以更多的考虑用户体验，那么你可以算是一个相对合格的前端工程师。
先看渲染：
这是一个项目中的例子。我们今天就做吧。以此为例，去做。
首先，我们将准备我们需要的数据(这通常是ajax请求的数据，现在我们将它直接放入一个js中，并在加载js时直接取出数据)
var testboke={
代码' :200，
消息' :null，
数据' :{
总数' :17，//总数
大小' :10，//分页大小-默认值为0
页数' :2，//总页数
当前' :1，//当前页数
records ' :[//作者-river lethe-双斜线-注释数据部分
{
Id':17，//项目Id
用户名' : '夜晚之夜'//赞助商名称
公司名称' : ' ngdhk '//发起公司名称
PtypeName':'13 '，//启动项目类别
pask':'13 '，
pname':'13 '，
pdesc':'13 '
},
{
id':16，
用户名' : '夜之夜'，
公司名称' :'ngdhk '，
ptypeName':'12 '，
pask':'12 '，
pname':'12 '，
pdesc':'12 '
},
{
id':15，
用户名' :'BB机'，
公司名称' : '北京电影'，
ptypeName':'11 '，
pask':'11 '，
pname':'11 '，
pdesc':'11 '
},
{
id':14，
用户名' :'BB机'，
公司名称' : '北京电影'，
ptypeName':'9 '，
pask':'9 '，
pname':'9 '，
pdesc':'9 '
},
{
id':13，
用户名' :'BB机'，
公司名称' : '北京电影'，
ptypeName':'7 '，
pask':'7 '，
pname':'7 '，
pdesc':'7 '
},
{
id':12，
用户名' : '夜之夜'，
公司名称' :'ngdhk '，
ptypeName':'6 '，
pask':'6 '，
pname':'6 '，
pdesc':'6 '
},
{
id':11，
用户名' :'BB机'，
公司名称' : '北京电影'，
ptypeName':'5 '，
pask':'5 '，
pname':'5 '，
pdesc':'5 '
},
{
id':10，
用户名' : '夜之夜'，
公司名称' :'ngdhk '，
ptypeName':'4 '，
pask':'4 '，
pname':'4 '，
pdesc':'4 '
},
{
id':9，
用户名' :'BB机'，
公司名称' : '北京电影'，
ptypeName':'3 '，
pask':'3 '，
pname':'3 '，
pdesc':'3 '
},
{
id':8，
用户名' : '夜之夜'，
公司名称' :'ngdhk '，
ptypeName':'2 '，
pask':'2 '，
pname':'2 '，
pdesc':'2 '
}
]
}
}
接下来，绘制页面的表格：
身体
div class=' template mo-content col-1浅灰色-bg '
div class=' template mo-top-nav-container '
div class='row '
nav class='templa
temo-top-nav col-lg-12 col-md-12"> <li> <a rel="external nofollow" 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 rel="external nofollow" 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 rel="external nofollow" href="../../css/font-awesome.min.css" rel="stylesheet" /> <link rel="external nofollow" href="../../css/bootstrap.min.css" rel="stylesheet" /> <link rel="external nofollow" href="../../css/templatemo-style.css" rel="stylesheet" /> <link rel="external nofollow" 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>');