bootstrap實現分頁(實例)

  • 時間:2018-09-08 22:40 作者:程序員小新人學習 來源:程序員小新人學習 閱讀:371
  • 掃一掃,手機訪問
摘要:寫前臺都會面臨的一個問題就是分頁,假如是純js分頁也是可以的,只是可能代碼量比較大,所以今天寫一個關于使用bootstrap框架分頁的例子,希望以后可以幫助到少量對這方面比較頭疼的碼農。首先需要明確的一點是,哪些數據是需要分頁的,單從數據顯示上其實是沒有必要分頁的,由于頁面是可以顯示的出來的,但是作

寫前臺都會面臨的一個問題就是分頁,假如是純js分頁也是可以的,只是可能代碼量比較大,所以今天寫一個關于使用bootstrap框架分頁的例子,希望以后可以幫助到少量對這方面比較頭疼的碼農。

首先需要明確的一點是,哪些數據是需要分頁的,單從數據顯示上其實是沒有必要分頁的,由于頁面是可以顯示的出來的,但是作為一個相比照較合格的前臺,你首先要考慮的不僅僅是這個功能是不是可以實現,而是要考慮使用戶體驗是不是好的,在既有功能上假如可以更多的考慮使用戶體驗的問題,那么才可以算是一個相比照較合格的前臺工程師。

先看渲染圖:

bootstrap實現分頁(實例)


這個是一個項目中的例子,今天就做以這個為例子,做一下

首先我們將需要使用的數據準備好(這個一般是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"
}
]
}
}

接下來畫頁面的表格:












發起項目列表












Copyright ? 2018 Company Name | Designed by
csdn



3d开机号查询

這個時候也頁面上是沒有任何的元素的,由于我們需要的是將頁面上的表格使用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)
}

拿到數據以后怎樣做,分頁,是的,不是急著將數據放到表格里面,先分頁,ok我們加載分頁的js(bootstrap的分頁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)
}
});
}

加載以后的效果是這樣的:

bootstrap實現分頁(實例)


這個時候就是已經基本將數據解決好了,只是沒有將數據放進去,最后我們將數據放進去即可以了,(我的寫法不建議借鑒,很多現成的循環畫表格的方法,我是原生的拼接字符串寫的,不嫌麻煩的可以自己拼一下,畢竟不論是什么框架,最底層的還是這樣的實現原理)


/*創立的是一個表格,并將數據放進去*/
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('');
  • 全部評論(0)
最新發布的資訊信息
【系統環境|服務器應用】Discuz發布帖子時默認顯示第一個主題分類的修改方法(2019-12-09 00:13)
【系統環境|軟件環境】Android | App內存優化 之 內存泄漏 要點概述 以及 處理實戰(2019-12-04 14:27)
【系統環境|軟件環境】MySQL InnoDB 事務(2019-12-04 14:26)
【系統環境|軟件環境】vue-router(單頁面應用控制中心)常見用法(2019-12-04 14:26)
【系統環境|軟件環境】Linux中的Kill命令(2019-12-04 14:26)
【系統環境|軟件環境】Linux 入門時必學60個文件解決命令(2019-12-04 14:26)
【系統環境|軟件環境】更新版ThreeJS 3D粒子波浪動畫(2019-12-04 14:26)
【系統環境|軟件環境】前臺開發WebStorm常用快捷鍵,火速收藏!(2019-12-04 14:25)
【系統環境|軟件環境】微博H5登錄和發微博組件(2019-12-04 14:25)
【系統環境|軟件環境】5分鐘談前臺面試,小伙伴都驚呆了(2019-12-04 14:23)
序號項目名稱類別發起人單位介紹操作
' + dataLIst[i].id + '