基于Bootstrap3表格插件和分页插件实例详解

前端之家收集整理的这篇文章主要介绍了基于Bootstrap3表格插件和分页插件实例详解前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

首先看下实现效果图,如果觉得还不错,请参考实现代码

上面数据 下面分页

使用方法

1 导入bootstrap的css

2 导入jquery

3 导入表格分页插件 lTable.js

4 添加html标签 并对id 赋值

5 获取数据

这里通过ajax获取json文件的模拟数据

initTable(data)为初始化表格和分页方法

获取错误");   } });

6 初始化表格

在初始化方法中 首先初始化表格

修改"] //标题对应字段,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 可添加按钮等操作 例:"" 点击方法为updF() 参数id 为属性tid对应字段

7 初始化分页

然后是分页部分

分页显示个数 (可省略)       ,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 上整篇代码

<Meta charset="utf-"> <Meta http-equiv="X-UA-Compatible" content="IE=edge">

编程之家推荐bootstrap相关专题:

以上所述是小编给大家介绍的基于Bootstrap3表格插件分页插件实例详解的相关知识。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助,如果觉得编程之家不错,可分享给好友!感谢支持

猜你在找的Bootstrap相关文章