bootstrap中如何实现分页

发布时间:2021-06-26 14:12:20 作者:Leah
来源:亿速云 阅读:160

bootstrap中如何实现分页,很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。

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、接下来画页面的表格:

<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"><h3 class="text-uppercase">发起项目列表</h3></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 &copy; 2018 Company Name | Designed by<a href="http://www.csdn.com" target="_parent">csdn</a></p></footer></body>

  这个时候也页面上是没有任何的元素的,因为我们需要的是将页面上的表格用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)

<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。

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(' <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>');html.push('<td>' + dataLIst[i].pname + '</td>');html.push('<td>' + dataLIst[i].ptypeName + '</td>');html.push('<td>' + dataLIst[i].userName + '</td>');html.push('<td>' + dataLIst[i].companyName + '</td>');html.push('<td><a href="project_details_init.html?id='+dataLIst[i].id+'" class="templatemo-edit-btn">详情</a></td>');html.push('<td><button class="templatemo-edit-btn" οnclick=checkproject(' + dataLIst[i].id + ',"1")>同意' +'</button> <button class="templatemo-edit-btn" οnclick=checkproject(' + dataLIst[i].id + ',"2")>拒绝</button></td>');html.push('</tr>');}html.push('</tbody></table>');var mainObj = $('#mainContent');mainObj.empty();mainObj.html(html.join(''));}

看完上述内容是否对您有帮助呢?如果还想对相关知识有进一步的了解或阅读更多相关文章,请关注亿速云行业资讯频道,感谢您对亿速云的支持。

推荐阅读:
  1. 如何进行bootstrap分页中的默认分页
  2. bootstrap如何实现分页

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

bootstrap

上一篇:Spring Cloud Feign的组成和配置方法

下一篇:zk中standalone模式的启动过程

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》