這篇文章主要介紹了bootstrap如何實現分頁，具有一定借鑒價值，需要的朋友可以參考下。希望大家閱讀完這篇文章后大有收獲。下面讓小編帶著大家一起了解一下。
寫前端都會面臨的一個問題就是分頁，如果是純js分頁也是可以的，只是可能代碼量比較大，所以今天寫一個關于用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 © 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(''));
}最終效果圖：
ok，到這里基本就已經將一個頁面加載數據和分頁處理結束了，是不是很簡單，其實本來就不難，只是很多的時候我們不想去測試，當然中間取數據的地方是ajax來處理的，但是為了給你們舉例子，我只能將ajax那塊取數據的地方直接寫到js里面，這個數據是動態的，用ajax取數據的時候，然后就是這個分頁其實是后端給數據的時候就已經分好的，我們只是將數據拿到，告訴他頁碼，他給我們對應頁碼的數據，前端如果將所有的數據全部拿出來，是不是不可以分頁呢？不是的，也是可以的，只是這樣的分頁性能會很差，因為每次你拿到的數據都是數據庫查詢所有的數據拿出來的數據，這樣對數據庫的壓力太大了，我們一般叫這種分頁為假分頁。
感謝你能夠認真閱讀完這篇文章，希望小編分享bootstrap如何實現分頁內容對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，遇到問題就找億速云，詳細的解決方法等著你來學習!
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
