上面数据 下面分页
使用方法
1 导入bootstrap的css
rush:js;">
2 导入jquery
rush:js;">
4 添加html标签 并对id 赋值
rush:js;">
5 获取数据
rush:js;">
$.ajax({
url:"json/data.json", type:"GET", dataType: "json", success:function(data){
initTable(data);
}, error:function(e){
alert("数据获取错误");
}
});
6 初始化表格
在初始化方法中 首先初始化表格
rush:js;">
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对应字段
7 初始化分页
然后是分页部分
rush:js;">
$.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 上整篇代码
rush:js;">
<Meta charset="utf-">
<Meta http-equiv="X-UA-Compatible" content="IE=edge">
