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 相关文章推荐
简单的js分页脚本
May 21 Javascript
jQuery中append()方法用法实例
Jan 08 Javascript
简述JavaScript的正则表达式中test()方法的使用
Jun 16 Javascript
JS for循环中i++ 和 ++i的区别介绍
Jul 20 Javascript
使用jquery.qrcode.js生成二维码插件
Oct 17 Javascript
基于jquery实现的银行卡号每隔4位自动插入空格的实现代码
Nov 22 Javascript
微信小程序之获取当前位置经纬度以及地图显示详解
May 09 Javascript
微信小程序实现锚点定位楼层跳跃的实例
May 18 Javascript
解决vue-cli + webpack 新建项目出错的问题
Mar 20 Javascript
Vue实现点击时间获取时间段查询功能
Aug 21 Javascript
使用vue实现多规格选择实例(SKU)
Aug 23 Javascript
解决vant框架做H5时踩过的坑(下拉刷新、上拉加载等)
Nov 11 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+mysql保存和输出文件
2006/10/09 PHP
php allow_url_include的应用和解释
2010/04/22 PHP
PHP模块 Memcached功能多于Memcache
2011/06/14 PHP
Zend Framework校验器Zend_Validate用法详解
2016/12/09 PHP
实例分析10个PHP常见安全问题
2019/07/09 PHP
javascript 手动给表增加数据的小例子
2013/07/10 Javascript
初步了解javascript面向对象
2015/11/09 Javascript
jsp 网站引入外部css或者js失效问题解决
2016/10/31 Javascript
详解vue项目构建与实战
2017/06/27 Javascript
javascript将url解析为json格式的两种方法
2017/08/18 Javascript
Sublime Text新建.vue模板并高亮(图文教程)
2017/10/26 Javascript
解决layer.confirm选择完之后消息框不消失的问题
2019/09/16 Javascript
从零搭一个自用的前端脚手架的方法步骤
2019/09/23 Javascript
Python中的MongoDB基本操作:连接、查询实例
2015/02/13 Python
使用Python实现从各个子文件夹中复制指定文件的方法
2018/10/25 Python
python使用循环打印所有三位数水仙花数的实例
2018/11/13 Python
纯python进行矩阵的相乘运算的方法示例
2019/07/17 Python
python用quad、dblquad实现一维二维积分的实例详解
2019/11/20 Python
Python多进程multiprocessing、进程池用法实例分析
2020/03/24 Python
Python OpenCV实现测量图片物体宽度
2020/05/27 Python
python 引用传递和值传递详解(实参,形参)
2020/06/05 Python
使用Python构造hive insert语句说明
2020/06/06 Python
python安装mysql的依赖包mysql-python操作
2021/01/01 Python
德国购买健身器材:AsVIVA
2017/08/09 全球购物
世界上最好的野生海鲜和有机食品:Vital Choice
2020/01/16 全球购物
如何利用cmp命令比较文件
2013/09/23 面试题
经典洗发水广告词
2014/03/13 职场文书
安全生产专项整治方案
2014/05/06 职场文书
建筑工地宣传标语
2014/06/18 职场文书
爱护公物标语
2014/06/24 职场文书
2014年加油站工作总结
2014/12/04 职场文书
多属性、多分类MySQL模式设计
2021/04/05 MySQL
MySQL 8.0 之不可见列的基本操作
2021/05/20 MySQL
Python OpenCV 图像平移的实现示例
2021/06/04 Python
详细介绍MySQL中limit和offset的用法
2022/05/06 MySQL
Java获取字符串编码格式实现思路
2022/09/23 Java/Android