浅析Bootstrap表格的使用


Posted in Javascript onJune 23, 2016

Bootstrap - 简洁、直观、强悍、移动设备优先的前端开发框架,让web开发更迅速、简单。下面给大家介绍Bootstrap表格的使用,一起学习吧。

先定义前端table

<table class="table table-striped table-bordered table-hover" id="expandabledatatable"></table>

然后是JS

/*
* 初始化表格
*/
var oTable = $('#expandabledatatable').dataTable({
"sDom": "Tflt<'row DTTTFooter'<'col-sm-6'i><'col-sm-6'p>>",
"aoColumnDefs": [
{
"bSortable": false, "aTargets": [0],
"render": function (data, type, full) {
return '<i class="fa fa-plus-square-o row-details"></i>';
}
},
{ "aTargets": [1], "data": "TaskName", "title": "任务名称" },
{ "aTargets": [2], "data": "CronExpression", "title": "表达式" },
{ "aTargets": [3], "data": "Remark", "title": "说明" },
{
"bSortable": false, "aTargets": [4], "title": "运行状态",
"render": function (data, type, full) {
if (full["Enabled"]==true){
return '<button type="button" class="btn btn-success btn-sm">运行</button>';
}
else {
return '<button type="button" class="btn btn-warning btn-sm">停止</button>';
}
}
},
{
"bSortable": false, "aTargets": [5],
"render": function (data, type, full) {
return '<a href="#" class="btn btn-info btn-xs edit"><i class="fa fa-edit"></i> 编辑</a> <a href="#" class="btn btn-danger btn-xs delete"><i class="fa fa-trash-o"></i> 删除</a>';
}
}
],
"bServerSide": true,
"sAjaxSource": "/Task/GetAllTask",
"aaSorting": [[1, 'asc']],
"aLengthMenu": [
[5, 15, 20, -1],
[5, 15, 20, "All"]
],
"iDisplayLength": 5,
"searching": false,
"bLengthChange": false,
"language": {
"sProcessing": "正在加载数据...",
"sInfoEmpty": "记录数为0",
"sInfoFiltered": " 从 _MAX_ 条过滤",
"sZeroRecords": "没有您要搜索的内容",
"search": "",
"sLengthMenu": "_MENU_",
"sInfo": "从 _START_ 到 _END_ /共 _TOTAL_ 条数据",
"oPaginate": {
"sPrevious": "上一页",
"sNext": "下一页",
}
},
"fnServerData": function (sSource, aoData, fnCallback) {
$.ajax({
"type": 'post',
"url": sSource,
"dataType": "json",
"data": {
aoData: JSON.stringify(aoData)
},
"success": function (resp) {
fnCallback(resp);
}
});
}
});

该表格的数据是从服务器端取得,所以必须配置下面这些属性,否则无法从服务器端获得数据

"bServerSide": true,
"sAjaxSource": "/Task/GetAllTask",
"fnServerData": function (sSource, aoData, fnCallback) {
$.ajax({
"type": 'post',
"url": sSource,
"dataType": "json",
"data": {
aoData: JSON.stringify(aoData)
},
"success": function (resp) {
fnCallback(resp);
}
});
}

以上所述是小编给大家介绍的Bootstrap表格的使用的相关知识,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
jQuery EasyUI API 中文文档 - Spinner微调器使用
Oct 21 Javascript
基于jquery完美拖拽,可返回拖动轨迹
Mar 29 Javascript
JS实现动态给图片添加边框的方法
Apr 01 Javascript
Javascript中arguments和arguments.callee的区别浅析
Apr 24 Javascript
JS实现IE状态栏文字缩放效果代码
Oct 24 Javascript
第一次接触神奇的Bootstrap
Oct 14 Javascript
ES6中箭头函数的定义与调用方式详解
Jun 02 Javascript
基于vue-cli配置lib-flexible + rem实现移动端自适应
Dec 26 Javascript
JS栈stack类的实现与使用方法示例
Jan 31 Javascript
通过npm或yarn自动生成vue组件的方法示例
Feb 12 Javascript
通过扫小程序码实现网站登陆功能
Aug 22 Javascript
node.js中path路径模块的使用方法实例分析
Feb 13 Javascript
浅析Bootstrap验证控件的使用
Jun 23 #Javascript
jquery中live()方法和bind()方法区别分析
Jun 23 #Javascript
Bootstrap组件系列之福利篇几款好用的组件(推荐)
Jun 23 #Javascript
jQuery根据name属性进行查找的用法分析
Jun 23 #Javascript
每日十条JavaScript经验技巧(二)
Jun 23 #Javascript
jQuery实现查找最近父节点的方法
Jun 23 #Javascript
浅谈jquery中的each方法$.each、this.each、$.fn.each
Jun 23 #Javascript
You might like
模仿OSO的论坛(五)
2006/10/09 PHP
PHP 中关于ord($str)&amp;gt;0x80的详细说明
2012/09/23 PHP
解析php中如何调用用户自定义函数
2013/08/06 PHP
php判断用户是否手机访问代码
2015/06/08 PHP
PHP的Json中文处理解决方案
2016/09/29 PHP
关于Laravel Route重定向的一个注意点
2017/01/16 PHP
PHP实现文件上传与下载
2020/08/28 PHP
终于解决了IE8不支持数组的indexOf方法
2013/04/03 Javascript
Ajax分页插件Pagination从前台jQuery到后端java总结
2016/07/22 Javascript
基于vuejs+webpack的日期选择插件
2020/05/21 Javascript
预防网页挂马的方法总结
2016/11/03 Javascript
JavaScript简单生成 N~M 之间随机数的方法
2017/01/13 Javascript
解析NodeJS异步I/O的实现
2017/04/13 NodeJs
微信小程序实现打开内置地图功能【附源码下载】
2017/12/07 Javascript
vue如何将v-for中的表格导出来
2018/05/07 Javascript
js前端面试之同步与异步问题详解
2019/04/03 Javascript
从Node.js事件触发器到Vue自定义事件的深入讲解
2020/06/26 Javascript
[02:20]DOTA2中文配音宣传片
2013/05/22 DOTA
[00:05]ChinaJoy现场 DOTA2玩家高呼“CN DOTA BEST DOTA”
2019/08/04 DOTA
python3.5使用tkinter制作记事本
2016/06/20 Python
Python中操作mysql的pymysql模块详解
2016/09/13 Python
python逆序打印各位数字的方法
2018/06/25 Python
Python装饰器语法糖
2019/01/02 Python
PyQt5 实现给窗口设置背景图片的方法
2019/06/13 Python
使用pyinstaller打包PyQt4程序遇到的问题及解决方法
2019/06/24 Python
简单了解python的一些位运算技巧
2019/07/13 Python
利用python实现凯撒密码加解密功能
2020/03/31 Python
keras 自定义loss损失函数,sample在loss上的加权和metric详解
2020/05/23 Python
学习Python需要哪些工具
2020/09/04 Python
GOLFINO英国官网:高尔夫服装
2020/04/11 全球购物
《维生素c的故事》教学反思
2014/02/18 职场文书
《金色的脚印》教后反思
2014/04/23 职场文书
协会周年庆活动方案
2014/08/26 职场文书
个人廉洁自律总结
2015/03/06 职场文书
试用期解除劳动合同通知书
2015/04/16 职场文书
如何给HttpServletRequest增加消息头
2021/06/30 Java/Android