如題
樣式呢就是bootstrap3 的
功能呢就是實現表格和分頁
（以上廢話）
本來是自己沒事兒寫的一個js插件，曾經擱淺了一陣子，但最近由於公司項目的原因也需要這樣的一個插件，所以就撿起來做了個可以用的版本
首先看下實現效果
上面數據 下面分頁
使用方法
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 上整篇代碼
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 6 <title></title> 7 <link rel="stylesheet" href="css/v3/bootstrap.min.css"> 8 </head> 9 <body> 10 11 <!-- 表格 --> 12 <div id="d"></div> 13 14 <!-- 分頁 --> 15 <div id="u"></div> 16 17 </body> 18 19 <script src="js/jquery-1.10.1.min.js" type="text/javascript"></script> 20 <script src="js/lTable.js" type="text/javascript"></script> 21 <script> 22 var pageSize=10; 23 var myTable; 24 var dataUrl=""; 25 //初始化頁面 26 initPage(1,pageSize,""); 27 //ajax獲取數據 28 function initPage(num,ps,url){ 29 30 $.ajax({ 31 url:"json/data.json", 32 type:"GET", 33 34 //type:"POST", 35 //data:"userinfoVO.pageid="+num+"&userinfoVO.pagecount="+ps, 36 dataType: "json", 37 success:function(data){ 38 initTable(data); 39 }, 40 error:function(e){ 41 console.log(e) 42 alert("數據獲取錯誤"); 43 } 44 }); 45 } 46 47 //初始化table和分頁數據 48 function initTable(data){ 49 //var obj = eval("("+data+")"); 50 var obj=data; 51 //table 52 myTable=$.lTable( 53 '#d', 54 { 55 data:obj.list //json數據 56 ,title:["userid","username","password","userrolename","status","<button onclick='updF(id)'>修改</button> <button onclick='delF(id)'>刪除</button>"] //標題對應字段 57 ,name:["用戶id","用戶名稱","密碼","權限名稱","狀態","_opt"] 58 ,tid:"userid" 59 ,checkBox:"userid" 60 } 61 ); 62 //myTable.getCheckboxIds(); //獲取checkbox選中的值 63 //分頁 64 $.lPaging( 65 '#u', //對應id 66 { 67 pageNumber:obj.pageNumber //當前頁數 68 ,totalPage:obj.totalPage //總頁數 69 ,countSize:5 //分頁顯示個數 (可省略) 70 ,count:obj.count 71 ,inputSearch:true//顯示查詢輸入框 72 ,onPageChange: function (num) { 73 initPage(num,pageSize,dataUrl); 74 } 75 } 76 ); 77 } 78 79 //修改方法 80 function updF(id){ 81 alert("修改："+id); 82 } 83 84 //刪除方法 85 function delF(id){ 86 alert("刪除："+id); 87 } 88 89 </script> 90 </html>