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


Posted in Javascript onMay 17, 2016

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

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

上面数据 下面分页

使用方法

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

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

三水点靠木推荐bootstrap相关专题:

BootStrap组件操作技巧

BootStrap相关知识汇总

以上所述是小编给大家介绍的基于Bootstrap3表格插件和分页插件实例详解的相关知识,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JQuery学习笔记 nt-child的使用
Jan 17 Javascript
Jquery时间验证和转换工具小例子
Jul 01 Javascript
浅谈js的setInterval事件
Dec 05 Javascript
JavaScript获取表单内所有元素值的方法
Apr 02 Javascript
基于jquery实现轮播特效
Apr 22 Javascript
通过命令行生成vue项目框架的方法
Jul 12 Javascript
vue2 全局变量的设置方法
Mar 09 Javascript
微信小程序上传图片实例
May 28 Javascript
angular 用Observable实现异步调用的方法
Dec 27 Javascript
浅谈React中组件逻辑复用的那些事儿
May 21 Javascript
详解JavaScript数据类型和判断方法
Sep 04 Javascript
如何使用CocosCreator对象池
Apr 14 Javascript
Winform客户端向web地址传参接收参数的方法
May 17 #Javascript
Bootstrap carousel轮转图的使用实例详解
May 17 #Javascript
js和jq使用submit方法无法提交表单的快速解决方法
May 17 #Javascript
Bootstrap打造一个左侧折叠菜单的系统模板(一)
May 17 #Javascript
Bootstrap打造一个左侧折叠菜单的系统模板(二)
May 17 #Javascript
JS和jQuery使用submit方法无法提交表单的原因分析及解决办法
May 17 #Javascript
如何利用Promises编写更优雅的JavaScript代码
May 17 #Javascript
You might like
在数据量大(超过10万)的情况下
2007/01/15 PHP
PHP 单引号与双引号的区别
2009/11/24 PHP
PHP imagecreatefrombmp 从BMP文件或URL新建一图像
2012/07/16 PHP
解析php取整的几种方式
2013/06/25 PHP
TP5.0框架实现无限极回复功能的方法分析
2019/05/04 PHP
[原创]PHP global全局变量经典应用与注意事项分析【附$GLOBALS用法对比】
2019/07/12 PHP
JavaScript原型继承之基础机制分析
2011/08/26 Javascript
jquery动画2.元素坐标动画效果(创建一个图片走廊)
2012/08/24 Javascript
PHP实现的各种中文编码转换类分享
2015/01/23 Javascript
jQuery Ajax中的事件详细介绍
2015/04/16 Javascript
js创建对象的方法汇总
2016/01/07 Javascript
jQuery循环遍历子节点并获取值的方法
2016/04/14 Javascript
jQuery Mobile中的button按钮组件基础使用教程
2016/05/23 Javascript
JS简单测试循环运行时间的方法
2016/09/04 Javascript
浅谈在js传递参数中含加号(+)的处理方式
2016/10/11 Javascript
Bootstrap源码解读按钮(5)
2016/12/23 Javascript
js中Number数字数值运算后值不对的解决方法
2017/02/28 Javascript
详解Vue组件之间的数据通信实例
2017/06/17 Javascript
vue 自定义全局方法,在组件里面的使用介绍
2018/02/28 Javascript
Angularjs实现控制器之间通信方式实例总结
2018/03/27 Javascript
node.js Promise对象的使用方法实例分析
2019/12/26 Javascript
vue实践---根据不同环境,自动转换请求的url地址操作
2020/09/21 Javascript
Python实现批量读取word中表格信息的方法
2015/07/30 Python
Python递归函数特点及原理解析
2020/03/04 Python
CSS3圆角和渐变2种常用功能详解
2016/01/06 HTML / CSS
白宫黑市官网:White House Black Market
2016/11/17 全球购物
澳大利亚购买健身器材网站:Gym Direct
2019/12/19 全球购物
天网面试题
2013/04/07 面试题
课程设计心得体会
2013/12/28 职场文书
节能标语大全
2014/06/21 职场文书
公司财务会计主管应聘求职信
2014/09/26 职场文书
介绍信格式
2015/01/30 职场文书
个人党性锻炼总结
2015/03/05 职场文书
Python数据分析入门之教你怎么搭建环境
2021/05/13 Python
教你用python实现一个无界面的小型图书管理系统
2021/05/21 Python
Python闭包的定义和使用方法
2022/04/11 Python