bootstrap中如何实现分页_程序开发

bootstrap中如何实现分页

创始人

2024-12-17 01:43:11

0次

1、首先我们将需要用的数据准备好（这个一般是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"            }        ]    }}

2、接下来画页面的表格：

发起项目列表管理

发起项目列表

　　这个时候也页面上是没有任何的元素的，因为我们需要的是将页面上的表格用js动态的画出来，这样才可以实现取出来的数据是可以分页的，但是画表格的前提是你要可以拿到数据对不对，所以接下来应该是拿数据，而不是急着画表格，因为没有数据的时候你的表格即使是画出来了，也是显示不出来的，那么我们开始拿数据：

3、我们写一个函数取数据：

/*将数据取出来*/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)}

4、加载分页的js（bootstrap的分页js）

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

5、下面就是将分页的代码写上：

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)}});}

　　加载以后的效果是这样的：

6、这个时候就是已经基本将数据处理好了，只是没有将数据放进去，最后我们将数据放进去就可以了，（我的写法不建议借鉴，很多现成的循环画表格的方法，我是原生的拼接字符串写的，不嫌麻烦的可以自己拼一下，毕竟不管是什么框架，最底层的还是这样的实现原理）

/*创建的是一个表格，并将数据放进去*/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 + '');html.push('' + dataLIst[i].pname + '');html.push('' + dataLIst[i].ptypeName + '');html.push('' + dataLIst[i].userName + '');html.push('' + dataLIst[i].companyName + '');html.push('详情');html.push('同意' +' 拒绝');html.push('');}html.push('');var mainObj = $('#mainContent');mainObj.empty();mainObj.html(html.join(''));}

上一篇：使用bootstrap为什么弹出框没有内容

下一篇：bootstrap中如何设置背景图片自适应

bootstrap中如何实现分页

相关内容

热门资讯