基于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 插件开发备注
Aug 27 Javascript
javascript中创建对象的三种常用方法
Dec 30 Javascript
javascript表单验证 - Parsley.js使用和配置
Jan 25 Javascript
js文件缓存之版本管理详解
Jul 05 Javascript
JS 滚动事件window.onscroll与position:fixed写兼容IE6的回到顶部组件
Oct 10 Javascript
使用纯JS代码判断字符串中有多少汉字的实现方法(超简单实用)
Nov 12 Javascript
详解ES6中的let命令
Apr 05 Javascript
JS中Map和ForEach的区别
Feb 05 Javascript
axios发送post请求springMVC接收不到参数的解决方法
Mar 05 Javascript
详解基于Vue,Nginx的前后端不分离部署教程
Dec 04 Javascript
解决layui富文本编辑器图片上传无法回显的问题
Sep 18 Javascript
vue子组件改变父组件传递的prop值通过sync实现数据双向绑定(DEMO)
Feb 01 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
批量获取memcache值并按key的顺序返回的实现代码
2011/06/14 PHP
解析centos中Apache、php、mysql 默认安装路径
2013/06/25 PHP
php判断数组中是否存在指定键(key)的方法
2015/03/17 PHP
如何通过Linux命令行使用和运行PHP脚本
2015/07/29 PHP
php使用curl并发减少后端访问时间的方法分析
2016/05/12 PHP
jquery获取input表单值的代码
2010/04/19 Javascript
JavaScript高级程序设计 DOM学习笔记
2011/09/10 Javascript
jquery焦点图片切换(数字标注/手动/自动播放/横向滚动)
2013/01/24 Javascript
jQuery学习笔记之总体架构
2014/06/03 Javascript
Javascript中数组sort和reverse用法分析
2014/12/30 Javascript
JavaScript驾驭网页-DOM
2016/03/24 Javascript
深入浅析JS是按值传递还是按引用传递(推荐)
2016/09/18 Javascript
js实现简单的选项卡效果
2017/02/23 Javascript
node使用UEditor富文本编辑器的方法实例
2017/07/11 Javascript
JavaScript+HTML5实现的日期比较功能示例
2017/07/12 Javascript
vue下跨域设置的相关介绍
2017/08/26 Javascript
Angular2实现组件交互的方法分析
2017/12/19 Javascript
微信小程序实现YDUI的ScrollTab组件
2018/02/02 Javascript
react-native-video实现视频全屏播放的方法
2018/03/19 Javascript
深入理解Vue nextTick 机制
2018/04/28 Javascript
js中的面向对象之对象常见创建方法详解
2019/12/16 Javascript
js实现3D旋转相册
2020/08/02 Javascript
Python中的pass语句使用方法讲解
2015/05/14 Python
Python实现信用卡系统(支持购物、转账、存取钱)
2016/06/24 Python
python使用xpath中遇到:到底是什么?
2018/01/04 Python
dataframe设置两个条件取值的实例
2018/04/12 Python
Python基础学习之类与实例基本用法与注意事项详解
2019/06/17 Python
python读取csv文件指定行的2种方法详解
2020/02/13 Python
对Python中 \r, \n, \r\n的彻底理解
2020/03/06 Python
使用keras实现BiLSTM+CNN+CRF文字标记NER
2020/06/29 Python
openCV提取图像中的矩形区域
2020/07/21 Python
Python+Opencv身份证号码区域提取及识别实现
2020/08/25 Python
Python Selenium操作Cookie的实例方法
2021/02/28 Python
德国健康生活方式网上商店:Landkaufhaus Mayer
2019/03/12 全球购物
大学生精神文明先进个人事迹材料
2014/05/02 职场文书
python 开心网和豆瓣日记爬取的小爬虫
2021/05/29 Python