基于Bootstrap3表格插件和分頁插件實(shí)例詳解
首先看下實(shí)現(xiàn)效果圖,如果覺得還不錯(cuò),請參考實(shí)現(xiàn)代碼。
上面數(shù)據(jù) 下面分頁
使用方法
1 導(dǎo)入bootstrap的css
<link rel="stylesheet" href="css/v3/bootstrap.min.css">
2 導(dǎo)入jquery
<script src="js/jquery-1.10.1.min.js" type="text/javascript"></script>
3 導(dǎo)入表格分頁插件 lTable.js
<script src="js/lTable.js" type="text/javascript"></script>
4 添加html標(biāo)簽 并對id 賦值
<!-- 表格 --> <div id="d"></div> <!-- 分頁 --> <div id="u"></div>
5 獲取數(shù)據(jù)
這里通過ajax獲取json文件的模擬數(shù)據(jù)
initTable(data)為初始化表格和分頁方法
$.ajax({ url:"json/data.json", type:"GET", dataType: "json", success:function(data){ initTable(data); }, error:function(e){ alert("數(shù)據(jù)獲取錯(cuò)誤"); } });
6 初始化表格
在初始化方法中 首先初始化表格
var obj=data; var myTable=$.lTable( '#d', { data:obj.list //json數(shù)據(jù) ,title:["userid","username","password","userrolename","status","<button onclick='updF(id)'>修改</button> <button onclick='delF(id)'>刪除</button>"] //標(biāo)題對應(yīng)字段 ,name:["用戶id","用戶名稱","密碼","權(quán)限名稱","狀態(tài)","_opt"] ,tid:"userid" ,checkBox:"userid" } );
代碼說明
6.1初始化方法
$.lTable('id',{data,title,name,tid,chechBox});
6.2屬性說明
id:頁面選擇的填充塊
data:頁面顯示的json數(shù)據(jù)
title:表格每一列與數(shù)據(jù)對應(yīng)的字段
name:表格第一行顯示字段
tid:每行對應(yīng)的鍵值(可省略)
checkBox:復(fù)選框?qū)?yīng)的value(可省略)
6.3復(fù)選框說明
當(dāng)初始化添加 chechBox屬性時(shí) 激活
復(fù)選框 name="ids"
獲取已選列方法: $.lTable.getCheckboxIds() 返回值例 "1,2,3,4"
6.4操作咧說明
當(dāng)屬性name=_opt時(shí) 表格頭自動(dòng)換位"操作"
對應(yīng)屬性title 可添加按鈕等操作
例:"<button onclick='updF(id)'>修改</button>"
點(diǎn)擊方法為updF() 參數(shù)id 為屬性tid對應(yīng)字段
7 初始化分頁
然后是分頁部分
$.lPaging( '#u', //對應(yīng)id { pageNumber:obj.pageNumber //當(dāng)前頁數(shù) ,totalPage:obj.totalPage //總頁數(shù) ,countSize:5 //分頁顯示個(gè)數(shù) (可省略) ,count:obj.count ,inputSearch:true//顯示查詢輸入框 ,onPageChange: function (num) { initPage(num,pageSize,dataUrl); } } );
代碼說明
7.1初始化方法
$.lPaging('id',{pageNumber,totalPage,countSize,count,onPageChange(num),inputSearch});
7.2屬性方法說明
id:頁面選擇的填充塊
pageNumber:當(dāng)前頁數(shù)
totalPage:總頁數(shù)
countSize:分頁顯示個(gè)數(shù)(可省略 默認(rèn)5)
count:數(shù)據(jù)總數(shù)
onPageChange(num):返回點(diǎn)擊事件
inputSearch: 是否顯示查詢輸入框 boolean 默認(rèn)false
getInputVal():返回輸入框內(nèi)數(shù)字
8 上整篇代碼
<!DOCTYPE html> <html> <head> <meta charset="utf-"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title></title> <link rel="stylesheet" href="css/v/bootstrap.min.css"> </head> <body> <!-- 表格 --> <div id="d"></div> <!-- 分頁 --> <div id="u"></div> </body> <script src="js/jquery-...min.js" type="text/javascript"></script> <script src="js/lTable.js" type="text/javascript"></script> <script> var pageSize=; var myTable; var dataUrl=""; //初始化頁面 initPage(,pageSize,""); //ajax獲取數(shù)據(jù) function initPage(num,ps,url){ $.ajax({ url:"json/data.json", type:"GET", //type:"POST", //data:"userinfoVO.pageid="+num+"&userinfoVO.pagecount="+ps, dataType: "json", success:function(data){ initTable(data); }, error:function(e){ console.log(e) alert("數(shù)據(jù)獲取錯(cuò)誤"); } }); } //初始化table和分頁數(shù)據(jù) function initTable(data){ //var obj = eval("("+data+")"); var obj=data; //table myTable=$.lTable( '#d', { data:obj.list //json數(shù)據(jù) ,title:["userid","username","password","userrolename","status","<button onclick='updF(id)'>修改</button> <button onclick='delF(id)'>刪除</button>"] //標(biāo)題對應(yīng)字段 ,name:["用戶id","用戶名稱","密碼","權(quán)限名稱","狀態(tài)","_opt"] ,tid:"userid" ,checkBox:"userid" } ); //myTable.getCheckboxIds(); //獲取checkbox選中的值 //分頁 $.lPaging( '#u', //對應(yīng)id { pageNumber:obj.pageNumber //當(dāng)前頁數(shù) ,totalPage:obj.totalPage //總頁數(shù) ,countSize: //分頁顯示個(gè)數(shù) (可省略) ,count:obj.count ,inputSearch:true//顯示查詢輸入框 ,onPageChange: function (num) { initPage(num,pageSize,dataUrl); } } ); } //修改方法 function updF(id){ alert("修改:"+id); } //刪除方法 function delF(id){ alert("刪除:"+id); } </script> </html>
腳本之家推薦bootstrap相關(guān)專題:
以上所述是小編給大家介紹的基于Bootstrap3表格插件和分頁插件實(shí)例詳解的相關(guān)知識,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
- 完美實(shí)現(xiàn)bootstrap分頁查詢
- Bootstrap Paginator分頁插件使用方法詳解
- Angular.js與Bootstrap相結(jié)合實(shí)現(xiàn)表格分頁代碼
- Bootstrap table分頁問題匯總
- 第一次動(dòng)手實(shí)現(xiàn)bootstrap table分頁效果
- Bootstrap分頁插件之Bootstrap Paginator實(shí)例詳解
- 基于BootStrap實(shí)現(xiàn)局部刷新分頁實(shí)例代碼
- Bootstrap table兩種分頁示例
- BootStrap Table前臺(tái)和后臺(tái)分頁對JSON格式的要求
- bootstrap下拉分頁樣式 帶跳轉(zhuǎn)頁碼
相關(guān)文章
javascript 四則運(yùn)算精度修正函數(shù)代碼
JS預(yù)算精度問題確實(shí)很麻煩,這個(gè)能解決一些問題,雖然有bug.2010-05-05微信公眾號錄音文件的播放與保存(amr文件轉(zhuǎn)mp3)
本文主要介紹了微信公眾號錄音文件的播放與保存(amr文件轉(zhuǎn)mp3),文中通過示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-08-08JavaScript中l(wèi)ayim之整合右鍵菜單的示例代碼
這篇文章主要介紹了JavaScript中l(wèi)ayim之整合右鍵菜單的示例代碼,本文給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2021-02-02