基于bootstrap3的表格和分页的插件

如题

样式呢就是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>&nbsp;<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>&nbsp;<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>

View Code

demo下载

基于bootstrap3的 表格和分页的插件

基于bootstrap3的表格和分页的插件