您好,登錄后才能下訂單哦!
bootstrap中如何實現(xiàn)分頁,很多新手對此不是很清楚,為了幫助大家解決這個難題,下面小編將為大家詳細(xì)講解,有這方面需求的人可以來學(xué)習(xí)下,希望你能有所收獲。
1、首先我們將需要用的數(shù)據(jù)準(zhǔn)備好(這個一般是ajax請求到的數(shù)據(jù),現(xiàn)在我們直接放到一個js里面,加載js的時候直接取出數(shù)據(jù))
var testboke = { "code":200, "message":null, "data":{ "total":17,//總條數(shù) "size":10,//分頁大小-默認(rèn)為0 "pages":2,//總頁數(shù) "current":1,//當(dāng)前頁數(shù) "records":[//author-riverLethe-double-slash-note數(shù)據(jù)部分 { "id":17,//項目id "userName":"Night夜",//發(fā)起人名稱 "companyName":"康佰裕",//發(fā)起人公司名稱 "ptypeName":"13",//發(fā)起項目類別 "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="">發(fā)起項目列表管理</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">發(fā)起項目列表</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 © 2018 Company Name | Designed by<a href="http://www.csdn.com" target="_parent">csdn</a></p></footer></body>
這個時候也頁面上是沒有任何的元素的,因為我們需要的是將頁面上的表格用js動態(tài)的畫出來,這樣才可以實現(xiàn)取出來的數(shù)據(jù)是可以分頁的,但是畫表格的前提是你要可以拿到數(shù)據(jù)對不對,所以接下來應(yīng)該是拿數(shù)據(jù),而不是急著畫表格,因為沒有數(shù)據(jù)的時候你的表格即使是畫出來了,也是顯示不出來的,那么我們開始拿數(shù)據(jù):
3、我們寫一個函數(shù)取數(shù)據(jù):
/*將數(shù)據(jù)取出來*/function data(curr, limit) {//console.log("tot:"+totalCount)/*拿到總數(shù)據(jù)*/totalCount = testboke.data.total; //取出來的是數(shù)據(jù)總量dataLIst = testboke.data.records; // 將數(shù)據(jù)放到一個數(shù)組里面(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><!--引如測試數(shù)據(jù)的js--><script src="../../js/testcode.js" type="text/javascript"></script>
上面的這些js,css都可以去cdn上面找到,除了testcode,在最上面,就是我們加載數(shù)據(jù)的js。
5、下面就是將分頁的代碼寫上:
var currPage = 1;var totalCount;var dataLIst = [];window.onload = function() {/*取到總條數(shù)*//*每頁顯示多少條 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、這個時候就是已經(jīng)基本將數(shù)據(jù)處理好了,只是沒有將數(shù)據(jù)放進去,最后我們將數(shù)據(jù)放進去就可以了,(我的寫法不建議借鑒,很多現(xiàn)成的循環(huán)畫表格的方法,我是原生的拼接字符串寫的,不嫌麻煩的可以自己拼一下,畢竟不管是什么框架,最底層的還是這樣的實現(xiàn)原理)
/*創(chuàng)建的是一個表格,并將數(shù)據(jù)放進去*/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>發(fā)起人</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(''));}
看完上述內(nèi)容是否對您有幫助呢?如果還想對相關(guān)知識有進一步的了解或閱讀更多相關(guān)文章,請關(guān)注億速云行業(yè)資訊頻道,感謝您對億速云的支持。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。