现在位置首页 / 前端开发 /正文

jquery插件-基于bootstrap3的 表格和分页的插件:lTable.js

作者: IT小兵 | 2016年5月17日| 热度:℃ | 评论: |参与:

首先看下实现效果

上面数据 下面分页

 

使用方法

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():返回输入框内数字

全部代码:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <link rel="stylesheet" href="css/v3/bootstrap.min.css">
</head>
<body>
        <!-- 表格 -->
        <div id="d"></div>
                     
        <!-- 分页 -->   
        <div id="u"></div>
    
</body>
<script src="js/jquery-1.10.1.min.js" type="text/javascript"></script>
<script src="js/lTable.js" type="text/javascript"></script>
<script>
    var pageSize=10;
    var myTable;
    var dataUrl="";
    //初始化页面
    initPage(1,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>&nbsp;<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:5    //分页显示个数    (可省略)
                     ,count:obj.count
                     ,inputSearch:true//显示查询输入框
                     ,onPageChange: function (num) {
                        initPage(num,pageSize,dataUrl);
                    }
                 }
                );
      }
      
      //修改方法
      function updF(id){
          alert("修改:"+id);
      }
      
      //删除方法
      function delF(id){
          alert("删除:"+id);
      }
      
</script>
</html>


点击阅读本文所属分类的更多文章: 前端开发 。和高手一起交流:346717337
友荐云推荐

未注明转发、原文均为本站原创。分享本文请注明 原文链接

给您更多信息和帮助

在这里您可以找到更多:

技术交流群:346717337 Jquery插件交流

投稿:suchso@vip.qq.com

承接:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/业务咨询

echarts教程系列
本月最热文章

微信扫一扫,徜徉悠嘻网,您的休闲乐园

微信公众号:快乐每一天

随机文章
标签

技术交流群:346717337

投稿:suchso@vip.qq.com

专业专注:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/付费问题咨询