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

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

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

上面数据 下面分页

使用方法

1 导入bootstrap的css

2 导入jquery

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

4 添加html标签 并对id 赋值

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","修改 删除"] //标题对应字段

,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对应字段zusqkic

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 上整篇代码

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。