你的位置:首页 > Java教程

[Java教程]基于bootstrap3的 表格和分页的插件


如题

样式呢就是bootstrap3 的

功能呢就是实现表格和分页

(以上废话)

 

本来是自己没事儿写的一个js插件,曾经搁浅了一阵子,但最近由于公司项目的原因也需要这样的一个插件,所以就捡起来做了个可以用的版本

首先看下实现效果


 

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        //table52        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',  //对应id66          {67            pageNumber:obj.pageNumber   //当前页数68            ,totalPage:obj.totalPage  //总页数69            ,countSize:5  //分页显示个数  (可省略)70            ,count:obj.count71            ,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下载