基于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 相关文章推荐
JS实现self的resend
Jul 22 Javascript
BOM与DOM的区别分析
Oct 26 Javascript
根据IP的地址,区分不同的地区,查看不同的网站页面的js代码
Feb 26 Javascript
dwz 如何去掉ajaxloading具体代码
May 22 Javascript
利用window.name实现windowStorage代码分享
Jan 02 Javascript
jquery获取及设置outerhtml的方法
Mar 09 Javascript
AngularJS入门教程之AngularJS表达式
Apr 18 Javascript
thinkphp标签实现bootsrtap轮播carousel实例代码
Feb 19 Javascript
详解AngularJs ui-router 路由的简单介绍
Apr 26 Javascript
vue-awesome-swiper滑块插件使用方法详解
Nov 27 Javascript
vue.js 实现点击按钮动态添加li的方法
Sep 07 Javascript
在webstorm开发微信小程序之使用阿里自定义字体图标的方法
Nov 15 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
全国FM电台频率大全 - 23 四川省
2020/03/11 无线电
cache_lite试用
2007/02/14 PHP
PHP日期处理函数 整型日期格式
2011/01/12 PHP
php 代码优化之经典示例
2011/03/24 PHP
PHP的简易冒泡法代码分享
2012/08/28 PHP
CodeIgniter图像处理类的深入解析
2013/06/17 PHP
php json与xml序列化/反序列化
2013/10/28 PHP
PHP字符串的递增和递减示例介绍
2014/02/11 PHP
Expandable &quot;Detail&quot; Table Rows
2007/08/29 Javascript
javascript getElementsByName()的用法说明
2009/07/31 Javascript
jquery下异步提交表单 异步跨域提交表单
2010/11/17 Javascript
奉献给JavaScript初学者的编写开发的七个细节
2011/01/11 Javascript
百度地图api如何使用
2015/08/03 Javascript
javascript实现checkbox复选框实例代码
2016/01/10 Javascript
AngularJS封装指令方法详解
2016/12/12 Javascript
Bootstrap页面标题Page Header的实现方法
2017/03/22 Javascript
angular.JS实现网页禁用调试、复制和剪切
2017/03/31 Javascript
使用jQuery给Table动态增加行、清空table的方法
2018/09/05 jQuery
详解vuex之store拆分即多模块状态管理(modules)篇
2018/11/13 Javascript
node和vue实现商城用户地址模块
2018/12/05 Javascript
python创建和删除目录的方法
2015/04/29 Python
python操作excel的包(openpyxl、xlsxwriter)
2018/06/11 Python
Python实现的对一个数进行因式分解操作示例
2019/06/27 Python
关于Tensorflow 模型持久化详解
2020/02/12 Python
selenium自动化测试入门实战
2020/12/21 Python
澳大利亚床上用品、浴巾和家居用品购物网站:Bambury
2020/04/16 全球购物
瑞士首家网上药店折扣店:McDrogerie
2020/12/22 全球购物
求网格中的黑点分布
2013/11/06 面试题
车间操作工岗位职责
2013/12/19 职场文书
新浪微博实习心得体会
2014/01/27 职场文书
优秀班主任经验交流材料
2014/06/02 职场文书
拾金不昧表扬稿
2015/01/16 职场文书
介绍信范文
2015/01/31 职场文书
运动会5000米加油稿
2015/07/21 职场文书
CSS3实现的3D隧道效果
2021/04/27 HTML / CSS
深入浅析Django MTV模式
2021/09/04 Python