本文由 发布，转载请注明出处，如有问题请联系我们！ 发布时间: 2021-08-01bootstrap上传图片插件-bootstrap图片大小设置方法

分页查询是创作前面会遭遇的难题。如果是纯js分页查询就可以了，可是编码量很有可能较为大。因此今日我便用bootstrap架构写一个分页查询的事例，期待对之后一些在这些方面头痛的编码农户有一定的协助。

最先，必须确立什么数据信息必须分页查询。沒有必需只从统计数据凸显中分页查询，由于网页页面能够表明。可是做为一个相对性达标的前面，最先要考虑到的不单单是这一作用能不能完成，反而是客户体验怎么样。假如能多考虑一下目前的作用，能够算得上一个相对性达标的前端开发。

首先看3D渲染:

这是一个新项目中的事例。使我们为此为例子，今日就做。

最先大家会准备好需要的数据信息(这一般是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" } ] }}

下面，制作网页页面的报表:

进行新项目目录管理方法

运行新项目目录。

版权声明2018公司名字|由csdn设计方案

这时网页上沒有原素，由于大家必须的是用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 paging js)。

上边的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(' ');html.push(' 编号项目规划类型发起者企业详细信息实际操作'); for(var i = 0; i < showNum; i ) {html.push('');html.push('' dataLIst[i].id '');