基于Bootstrap3表格插件和分頁(yè)插件實(shí)例詳解

更新時(shí)間：2016年05月17日 14:40:26 作者：jethypc

這篇文章主要介紹了基于Bootstrap3表格插件和分頁(yè)插件實(shí)例詳解的相關(guān)資料,需要的朋友可以參考下

首先看下實(shí)現(xiàn)效果圖，如果覺得還不錯(cuò)，請(qǐng)參考實(shí)現(xiàn)代碼。

上面數(shù)據(jù) 下面分頁(yè)

使用方法

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)入表格分頁(yè)插件 lTable.js

<script src="js/lTable.js" type="text/javascript"></script>

4 添加html標(biāo)簽并對(duì)id 賦值

<!-- 表格 -->
<div id="d"></div>
<!-- 分頁(yè) --> 
<div id="u"></div>

5 獲取數(shù)據(jù)

這里通過ajax獲取json文件的模擬數(shù)據(jù)

initTable(data)為初始化表格和分頁(yè)方法

$.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>&nbsp;<button onclick='delF(id)'>刪除</button>"] //標(biāo)題對(duì)應(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:頁(yè)面選擇的填充塊
data:頁(yè)面顯示的json數(shù)據(jù)
title:表格每一列與數(shù)據(jù)對(duì)應(yīng)的字段
name:表格第一行顯示字段
tid:每行對(duì)應(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)換位"操作"
對(duì)應(yīng)屬性title 可添加按鈕等操作
例:"<button onclick='updF(id)'>修改</button>"
點(diǎn)擊方法為updF() 參數(shù)id 為屬性tid對(duì)應(yīng)字段

7 初始化分頁(yè)

然后是分頁(yè)部分

$.lPaging(
　　'#u', //對(duì)應(yīng)id
　　　　{
　　　　　　pageNumber:obj.pageNumber //當(dāng)前頁(yè)數(shù)
　　　　　　,totalPage:obj.totalPage //總頁(yè)數(shù)
　　　　　　,countSize:5 //分頁(yè)顯示個(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:頁(yè)面選擇的填充塊
pageNumber:當(dāng)前頁(yè)數(shù)
totalPage:總頁(yè)數(shù)
countSize:分頁(yè)顯示個(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>
<!-- 分頁(yè) --> 
<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="";
//初始化頁(yè)面
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和分頁(yè)數(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>&nbsp;<button onclick='delF(id)'>刪除</button>"] //標(biāo)題對(duì)應(yīng)字段 
,name:["用戶id","用戶名稱","密碼","權(quán)限名稱","狀態(tài)","_opt"]
,tid:"userid"
,checkBox:"userid"
}
);
//myTable.getCheckboxIds(); //獲取checkbox選中的值
//分頁(yè)
$.lPaging(
'#u', //對(duì)應(yīng)id
{
pageNumber:obj.pageNumber //當(dāng)前頁(yè)數(shù)
,totalPage:obj.totalPage //總頁(yè)數(shù)
,countSize: //分頁(yè)顯示個(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)專題：

BootStrap組件操作技巧

BootStrap相關(guān)知識(shí)匯總

以上所述是小編給大家介紹的基于Bootstrap3表格插件和分頁(yè)插件實(shí)例詳解的相關(guān)知識(shí)，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章: