BootStrap中的table实现数据填充与分页应用小结


Posted in Javascript onMay 26, 2016

BootStrap table 是一个轻量级的table插件,使用AJAX获取JSON格式的数据,其分页和数据填充很方便,支持国际化。最近后台使用此插件做了一个表格应用,做个总结。

1.使用方法

可以通过又拍云提供的CDN获取js插件,样式表和国际化插件,或者直接去官网下载。将下面的js插件和样式放到html head 头里即可使用。

//样式
<link href="http://cdn.bootcss.com/bootstrap-table/1.9.1/bootstrap-table.min.css" rel="stylesheet"/> 
<script src="http://cdn.bootcss.com/bootstrap-table/1.9.1/bootstrap-table.min.js"></script>
//国际化,表格汉化
<script src="http://cdn.bootcss.com/bootstrap-table/1.9.1/locale/bootstrap-table-zh-CN.min.js"></script>

2.table 数据填充

BootStrap table获取数据有两种方式,一是通过table 的data-url属性指定数据源,而是通过JavaScript初始化表格时指定url来获取数据,如下示例。

<table data-toggle="table" data-url="data.json">
<thead>
... 
</thead>
</table>
$('#table').bootstrapTable({
url: 'data.json' 
});

第二种方式交第一种而言在处理复杂数据时更为灵活,一般使用第二种方式来进行table数据填充。

var $table = $('#table');
$table.bootstrapTable({
url: "duoBaoActivityList", 
dataType: "json",
pagination: true, //分页
singleSelect: false,
data-locale:"zh-US" , //表格汉化
search: true, //显示搜索框
sidePagination: "server", //服务端处理分页
columns: [
{
title: '活动名称',
field: 'name',
align: 'center',
valign: 'middle'
}, 
{
title: '状态',
field: 'status',
align: 'center',
valign: 'middle',
}, 
{
title: '参与人数',
field: 'participationCounts',
align: 'center'
},
{
title: '总人数',
field: 'totalCounts',
align: 'center'
},
{
title: '开始时间',
field: 'startTime',
align: 'center',
},
{
title: '操作',
field: 'id',
align: 'center',
formatter:function(value,row,index){ 
var e = '<a href="#" mce_href="#" onclick="edit(\''+ row.id + '\')">编辑</a> '; 
var d = '<a href="#" mce_href="#" onclick="del(\''+ row.id +'\')">删除</a> '; 
return e+d; 
} 
}
]
});

field字段必须与服务器端返回的字段对应才会显示出数据。

3.分页与搜索

分页时BootStrap table 向后端传递两个分页字段:limit, offset ,前者表示每页的个数,默认为10个,后者表示分页时数据的偏移量。

而搜索时则向后端传递的是search字段,表示具体的搜索内容。

服务器端返回的数据中还要包括page(页数),total(数据总量)两个字段,前端要根据这两个字段分页。

最终具体显示效果如下图所示:

BootStrap中的table实现数据填充与分页应用小结

以上所述是小编给大家介绍的BootStrap中的table实现数据填充与分页应用小结,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
jQuery .tmpl(), .template()学习资料小结
Jul 18 Javascript
用dtree实现树形菜单 dtree使用说明
Oct 17 Javascript
读JavaScript DOM编程艺术笔记
Nov 15 Javascript
window.addEventListener来解决让一个js事件执行多个函数
Dec 26 Javascript
javascript实现3D切换焦点图
Oct 16 Javascript
js实现的二分查找算法实例
Jan 21 Javascript
JavaScript中实现无缝滚动、分享到侧边栏实例代码
Apr 06 Javascript
jQuery实现漂亮实用的商品图片tips提示框效果(无图片箭头+阴影)
Apr 16 Javascript
Javascript之BOM(window对象)详解
May 25 Javascript
jQuery简单实现tab选项卡切换效果
Jun 20 Javascript
js只执行1次的函数示例
Jul 20 Javascript
js实现点赞按钮功能的实例代码
Mar 06 Javascript
JS实现table表格数据排序功能(可支持动态数据+分页效果)
May 26 #Javascript
JS代码实现table数据分页效果
May 26 #Javascript
JavaScript中的boolean布尔值使用学习及相关技巧讲解
May 26 #Javascript
辨析JavaScript中的Undefined类型与null类型
May 26 #Javascript
JavaScript数组的栈方法与队列方法详解
May 26 #Javascript
详解JavaScript中this关键字的用法
May 26 #Javascript
ashx文件获取$.ajax()方法发送的数据
May 26 #Javascript
You might like
php Ubb代码编辑器函数代码
2012/07/05 PHP
PHP中each与list用法分析
2016/01/08 PHP
浅谈ThinkPHP中initialize和construct的区别
2017/04/01 PHP
PHP基于正则批量替换Img中src内容实现获取缩略图的功能示例
2017/06/07 PHP
PHP开发api接口安全验证操作实例详解
2020/03/26 PHP
FormValid0.5版本发布,带ajax自定义验证例子
2007/08/17 Javascript
javascript 二维数组的实现与应用
2010/03/16 Javascript
javascript 弹出层组件(升级版)
2011/05/12 Javascript
jquery实现点击TreeView文本父节点展开/折叠子节点
2013/01/10 Javascript
轻松创建nodejs服务器(7):阻塞操作的实现
2014/12/18 NodeJs
jquery中JSON的解析方式
2015/03/16 Javascript
jQuery实现强制cookie过期方法汇总
2015/05/22 Javascript
JavaScript返回上一页的三种方法及区别介绍
2015/07/04 Javascript
jQuery实现html元素拖拽
2015/07/21 Javascript
原生js制作日历控件实例分享
2016/04/06 Javascript
Javascript基础知识盲点总结之函数
2016/05/15 Javascript
BootStrap modal模态弹窗使用小结
2016/10/26 Javascript
JavaScript ES6箭头函数使用指南
2018/12/30 Javascript
小程序两种滚动公告栏的实现方法
2019/09/17 Javascript
JavaScript setTimeout()基本用法有哪些
2020/11/04 Javascript
typescript编写微信小程序创建项目的方法
2021/01/29 Javascript
举例讲解Python中装饰器的用法
2015/04/27 Python
浅谈function(函数)中的动态参数
2017/04/30 Python
Python+matplotlib绘制不同大小和颜色散点图实例
2018/01/19 Python
Python SQLAlchemy入门教程(基本用法)
2019/11/11 Python
PyQt5多线程防卡死和多窗口用法的实现
2020/09/15 Python
python 基于opencv操作摄像头
2020/12/24 Python
研究生求职推荐信范文
2013/11/30 职场文书
化工专业大学生职业生涯规划书
2014/01/14 职场文书
二年级小学生评语
2014/04/21 职场文书
普通话演讲稿
2014/09/03 职场文书
出资证明书范本(标准版)
2014/09/24 职场文书
学生会主席任命书
2015/09/21 职场文书
HTML+CSS制作心跳特效的实现
2021/05/26 HTML / CSS
Python matplotlib多个子图绘制整合
2022/04/13 Python
Go语言怎么使用变长参数函数
2022/07/15 Golang