首先看下實現效果圖，如果覺得還不錯，請參考實現代碼。
上面數據 下面分頁
使用方法
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;
//table
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"
}
);
//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表格插件和分頁插件實例詳解的相關知識，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對網站的支持！