bootstrap上传图片插件 bootstrap图片大小设置方法-百科知识-舒华文档

分页是前端写手都会面临的问题。如果是纯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="***inContent"> </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://***.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)}

拿到数据后应该怎么做？分页，对，我不急着把数据放进表里。先分页，好，我们加载分页js(Bootstrap的分页JS)

上面的js和css都可以在cdn上找到，除了testcode，在最上面，我们加载数据的js。

下面是编写分页代码:

加载后的效果是这样的:

此时数据已经基本处理完毕，但是数据还没有放进去。最后，我们可以把数据放进去。(不建议借鉴我的写作方法。很多现成的圆形画表的方法都是原生拼接字符串写的，不麻烦你自己拼。毕竟不管是什么框架，底层还是这样一个实现原则。)

/*创建的是一个表格，并将数据放进去*/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="***rgin-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>');

本文来自浅沫投稿，不代表舒华文档立场，如若转载，请注明出处：https://www.chinashuhua.cn/24/574663.html