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 性能优化手册 推荐
Feb 23 Javascript
AJAX 网页保留浏览器前进后退等功能
Feb 12 Javascript
jquery网页元素拖拽插件效果及实现
Aug 05 Javascript
PHP使用方法重载实现动态创建属性的get和set方法
Nov 17 Javascript
JavaScript类型系统之正则表达式
Jan 05 Javascript
Node.js下自定义错误类型详解
Oct 17 Javascript
JS对大量数据进行多重过滤的方法
Nov 04 Javascript
jQuery仿写百度百科的目录树
Jan 03 Javascript
Node.js pipe实现源码解析
Aug 12 Javascript
JS简单获取并修改input文本框内容的方法示例
Apr 08 Javascript
微信小程序引入Vant组件库过程解析
Aug 06 Javascript
jquery实现淡入淡出轮播图效果
Dec 13 jQuery
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获取文件夹路径内的图片以及分页显示示例
2014/03/11 PHP
PHP模块化安装教程
2016/06/01 PHP
PHP设计模式之工厂模式与单例模式
2016/09/28 PHP
ThinkPHP 3.2.3实现页面静态化功能的方法详解
2017/08/03 PHP
PHP基于SPL实现的迭代器模式示例
2018/04/22 PHP
JQuery浮动DIV提示信息并自动隐藏的代码
2010/08/29 Javascript
jquery JSON的解析方式示例介绍
2014/07/27 Javascript
JS中生成随机数的用法及相关函数
2016/01/09 Javascript
Angular排序实例详解
2017/06/28 Javascript
详解vue-cli+element-ui树形表格(多级表格折腾小计)
2019/04/17 Javascript
js实现转动骰子模型
2019/10/24 Javascript
Vue-Ant Design Vue-普通及自定义校验实例
2020/10/24 Javascript
[40:06]DOTA2亚洲邀请赛 4.3 突围赛 Liquid vs VGJ.T 第一场
2018/04/04 DOTA
[01:06:54]DOTA2-DPC中国联赛 正赛 SAG vs DLG BO3 第二场 2月28日
2021/03/11 DOTA
实例讲解Python中SocketServer模块处理网络请求的用法
2016/06/28 Python
对于Python中RawString的理解介绍
2016/07/07 Python
Python的Flask框架标配模板引擎Jinja2的使用教程
2016/07/12 Python
Python如何获取系统iops示例代码
2016/09/06 Python
python实现字典(dict)和字符串(string)的相互转换方法
2017/03/01 Python
python里使用正则的findall函数的实例详解
2017/10/19 Python
python pycharm的安装及其使用
2019/10/11 Python
python实现超市管理系统(后台管理)
2019/10/25 Python
keras读取训练好的模型参数并把参数赋值给其它模型详解
2020/06/15 Python
基于python实现删除指定文件类型
2020/07/21 Python
使用Python+Appuim 清理微信的方法
2021/01/26 Python
Python的Tqdm模块实现进度条配置
2021/02/24 Python
纯css3显示隐藏一个div特效的具体实现
2014/02/10 HTML / CSS
审计工作个人的自我评价
2013/12/25 职场文书
小学英语教学反思
2014/01/30 职场文书
房地产营销策划方案
2014/02/08 职场文书
中学生演讲稿
2014/04/26 职场文书
车贷收入证明范本
2014/09/14 职场文书
员工辞职信怎么写
2015/02/27 职场文书
学困生帮扶工作总结
2015/08/13 职场文书
学生检讨书范文
2019/06/24 职场文书
MySQL事务的隔离级别详情
2022/07/15 MySQL