基于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 相关文章推荐
javascript removeChild 使用注意事项
Apr 11 Javascript
快速解决jquery之get缓存问题的最简单方法介绍
Dec 19 Javascript
当前流行的JavaScript代码风格指南
Sep 10 Javascript
javascript实现分栏显示小技巧附图
Oct 13 Javascript
基于javascript实现样式清新图片轮播特效
Mar 30 Javascript
JavaScript知识点总结(六)之JavaScript判断变量数据类型
May 31 Javascript
angularJS深拷贝详解
Mar 23 Javascript
js异步编程小技巧详解
Aug 14 Javascript
详细分析JS函数去抖和节流
Dec 05 Javascript
基于js 各种排序方法和sort方法的区别(详解)
Jan 03 Javascript
vue监听对象及对象属性问题
Aug 20 Javascript
解决layui-table单元格设置为百分比在ie8下不能自适应的问题
Sep 28 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
为百度UE编辑器上传图片添加水印功能
2015/04/16 PHP
php 使用redis锁限制并发访问类示例
2016/11/02 PHP
ThinkPHP实现登录退出功能
2017/06/29 PHP
在次封装easyui-Dialog插件实现代码
2010/11/14 Javascript
快速排序 php与javascript的不同之处
2011/02/22 Javascript
jQuery1.9.1针对checkbox的调整方法(prop)
2014/05/01 Javascript
node.js中的fs.fchownSync方法使用说明
2014/12/16 Javascript
使用mouse事件实现简单的鼠标经过特效
2015/01/30 Javascript
AngularJS模块管理问题的非常规处理方法
2015/04/29 Javascript
jQuery EasyUI Dialog拖不下来如何解决
2015/09/28 Javascript
jQuery实现选项联动轮播效果【附实例】
2016/04/19 Javascript
让编辑器支持word复制黏贴、截屏的js代码
2016/10/17 Javascript
cropper js基于vue的图片裁剪上传功能的实现代码
2018/03/01 Javascript
使用layui实现的左侧菜单栏以及动态操作tab项方法
2019/09/10 Javascript
webpack打包优化的几个方法总结
2020/02/10 Javascript
基于vue-cli3+typescript的tsx开发模板搭建过程分享
2020/02/28 Javascript
JS中类的静态方法,静态变量,实例方法,实例变量区别与用法实例分析
2020/03/14 Javascript
跟老齐学Python之有容乃大的list(4)
2014/09/28 Python
Linux下将Python的Django项目部署到Apache服务器
2015/12/24 Python
Win7 64位下python3.6.5安装配置图文教程
2020/10/27 Python
Python操作mongodb的9个步骤
2018/06/04 Python
对django中render()与render_to_response()的区别详解
2018/10/16 Python
django-allauth入门学习和使用详解
2019/07/03 Python
Python画图实现同一结点多个柱状图的示例
2019/07/07 Python
PowerBI和Python关于数据分析的对比
2019/07/11 Python
使用 Python 合并多个格式一致的 Excel 文件(推荐)
2019/12/09 Python
利用HTML5 Canvas制作一个简单的打飞机游戏
2015/05/11 HTML / CSS
Magee 1866官网:Donegal粗花呢外套和大衣专家
2019/11/01 全球购物
如何写出高性能的JSP和Servlet
2013/01/22 面试题
怎样写留学自荐信
2013/11/11 职场文书
管理学专业个人求职信范文
2013/12/13 职场文书
电视购物广告词
2014/03/19 职场文书
2015年个人实习工作总结
2014/12/12 职场文书
2015社区爱国卫生工作总结
2015/04/21 职场文书
超级礼物观后感
2015/06/15 职场文书
Pytorch实现图像识别之数字识别(附详细注释)
2021/05/11 Python