首先看下實現效果圖，如果覺得還不錯，請參考實現代碼。
上面資料 下面分頁
使用方法
1 匯入bootstrap的css
<link rel="stylesheet" href="css/v3/bootstrap.min.css">
2 匯入jquery
<script src="js/jquery-1.10.1.min.js" type="text/javascript"></script>
3 匯入表格分頁外掛程式 lTable.js
<script src="js/lTable.js" type="text/javascript"></script>
4 添加html標籤 並對id 賦值
<!-- 表格 --><div id="d"></div><!-- 分頁 --> <div id="u"></div>
5 擷取資料
這裡通過ajax擷取json檔案的類比資料
initTable(data)為初始化表格和分頁方法
$.ajax({ url:"json/data.json", type:"GET", dataType: "json", success:function(data){ initTable(data); }, error:function(e){ alert("資料擷取錯誤"); }});
6 初始化表格
在初始化方法中 首先初始化表格
var obj=data;var myTable=$.lTable( '#d', { data:obj.list //json資料,title:["userid","username","password","userrolename","status","<button onclick='updF(id)'>修改</button> <button onclick='delF(id)'>刪除</button>"] //標題對應欄位 ,name:["使用者id","使用者名稱稱","密碼","許可權名稱","狀態","_opt"],tid:"userid",checkBox:"userid"});
代碼說明
6.1初始化方法
$.lTable('id',{data,title,name,tid,chechBox});
6.2屬性說明
id:頁面選擇的填充塊
data:頁面顯示的json資料
title:表格每一列與資料對應的欄位
name:表格第一行顯示欄位
tid:每行對應的索引值(可省略)
checkBox:複選框對應的value(可省略)
6.3複選框說明
當初始化添加 chechBox屬性時 啟用
複選框 name="ids"
擷取已選列方法: $.lTable.getCheckboxIds() 傳回值例 "1,2,3,4"
6.4操作咧說明
當屬性name=_opt時 表格頭自動換位"操作"
對應屬性title 可添加按鈕等操作
例:"<button onclick='updF(id)'>修改</button>"
點擊方法為updF() 參數id 為屬性tid對應欄位
7 初始化分頁
然後是分頁部分
$.lPaging( '#u', //對應id { pageNumber:obj.pageNumber //當前頁數 ,totalPage:obj.totalPage //總頁數 ,countSize:5 //分頁顯示個數 (可省略) ,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:當前頁數
totalPage:總頁數
countSize:分頁顯示個數(可省略 預設5)
count:資料總數
onPageChange(num):返回點擊事件
inputSearch: 是否顯示查詢輸入框 boolean 預設false
getInputVal():返回輸入框內數字
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擷取資料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("資料擷取錯誤");}});}//初始化table和分頁資料function initTable(data){//var obj = eval("("+data+")");var obj=data;//tablemyTable=$.lTable('#d',{data:obj.list //json資料,title:["userid","username","password","userrolename","status","<button onclick='updF(id)'>修改</button> <button onclick='delF(id)'>刪除</button>"] //標題對應欄位 ,name:["使用者id","使用者名稱稱","密碼","許可權名稱","狀態","_opt"],tid:"userid",checkBox:"userid"});//myTable.getCheckboxIds(); //擷取checkbox選中的值//分頁$.lPaging('#u', //對應id{pageNumber:obj.pageNumber //當前頁數,totalPage:obj.totalPage //總頁數,countSize: //分頁顯示個數 (可省略),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相關專題：
BootStrap組件操作技巧
BootStrap相關知識匯總
以上所述是小編給大家介紹的基於Bootstrap3表格外掛程式和分頁外掛程式執行個體詳解的相關知識，希望對大家有所協助，如果大家有任何疑問請給我留言，小編會及時回複大家的。在此也非常感謝大家對雲棲社區網站的支援！
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
