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 相关文章推荐
把textarea中字符串里含有的回车换行替换成&amp;lt;br&amp;gt;的javascript代码
Apr 20 Javascript
javascript 设计模式之单体模式 面向对象学习基础
Apr 18 Javascript
JavaScript高级程序设计 学习笔记 js高级技巧
Sep 20 Javascript
js用Date对象处理时间实现思路及代码
Jan 31 Javascript
Jquery中巧用Ajax的beforeSend方法
Jan 20 Javascript
Vue中img的src属性绑定与static文件夹实例
May 18 Javascript
JS监控关闭浏览器操作的实例详解
Sep 12 Javascript
vue2中的keep-alive使用总结及注意事项
Dec 21 Javascript
JQuery扩展对象方法操作示例
Aug 21 jQuery
小程序websocket心跳库(websocket-heartbeat-miniprogram)
Feb 23 Javascript
vue+vuex+axios从后台获取数据存入vuex,组件之间共享数据操作
Jul 31 Javascript
js实现3D粒子酷炫动态旋转特效
Sep 13 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原创论坛
2006/10/09 PHP
优化NFR之一 --MSSQL Hello Buffer Overflow
2006/10/09 PHP
PHP set_error_handler()函数使用详解(示例)
2013/11/12 PHP
ThinkPHP多语言支持与多模板支持概述
2014/08/22 PHP
CI(Codeigniter)的Setting增强配置类实例
2016/01/06 PHP
PHP微信模板消息操作示例
2017/06/29 PHP
php实现统计IP数及在线人数的示例代码
2020/07/22 PHP
javascript json2 使用方法
2010/03/16 Javascript
jQuery的Ajax时无响应数据的解决方法
2010/05/25 Javascript
用C/C++来实现 Node.js 的模块(二)
2014/09/24 Javascript
js根据鼠标移动速度背景图片自动旋转的方法
2015/02/28 Javascript
理解javascript中Map代替循环
2016/02/26 Javascript
angularjs实现文字上下无缝滚动特效代码
2016/09/04 Javascript
js实现增加数字显示的环形进度条效果
2017/02/05 Javascript
微信小程序 使用腾讯地图SDK详解及实现步骤
2017/02/28 Javascript
JS中的作用域链
2017/03/01 Javascript
在vue.js中抽出公共代码的方法示例
2017/06/08 Javascript
Vue CLI 2.x搭建vue(目录最全分析)
2019/02/27 Javascript
Vue2.0 $set()的正确使用详解
2020/07/28 Javascript
Flexible.js可伸缩布局实现方法详解
2020/11/13 Javascript
python获取远程图片大小和尺寸的方法
2015/03/26 Python
Python+tkinter使用80行代码实现一个计算器实例
2018/01/16 Python
Python实现计算长方形面积(带参数函数demo)
2020/01/18 Python
k-means 聚类算法与Python实现代码
2020/06/01 Python
Python 实现微信自动回复的方法
2020/09/11 Python
Python 实现PS滤镜中的径向模糊特效
2020/12/03 Python
python mongo 向数据中的数组类型新增数据操作
2020/12/05 Python
电气个人求职信范文
2014/02/04 职场文书
文艺晚会策划方案
2014/06/11 职场文书
港澳通行证委托书怎么写
2014/08/02 职场文书
社区助残日活动总结
2014/08/29 职场文书
运动会报道稿300字
2014/10/02 职场文书
护士自我推荐信范文
2015/03/24 职场文书
贫困证明怎么写
2015/06/16 职场文书
2016寒假假期总结
2015/10/10 职场文书
python库Tsmoothie模块数据平滑化异常点抓取
2022/06/10 Python