浅析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 相关文章推荐
innerText和innerHTML 一些问题分析
May 18 Javascript
Mootools 图片展示插件(lightbox,ImageMenu)收集集合
May 21 Javascript
Jquery 实现表格颜色交替变化鼠标移过颜色变化实例
Aug 28 Javascript
jquery实现滑动图片自己测试的例子
Nov 05 Javascript
jQuery实现的自定义滚动条实例详解
Sep 20 Javascript
微信小程序 五星评分(包括半颗星评分)实例代码
Dec 14 Javascript
深入研究jQuery图片懒加载 lazyload.js使用方法
Aug 16 jQuery
jQuery实现为动态添加的元素绑定事件实例分析
Sep 07 jQuery
vue-router二级导航切换路由及高亮显示的实现方法
Jul 10 Javascript
vue 路由子组件created和mounted不起作用的解决方法
Nov 05 Javascript
vue 实现websocket发送消息并实时接收消息
Dec 09 Javascript
JavaScript实现前端倒计时效果
Feb 09 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
php学习笔记之 函数声明(二)
2011/06/09 PHP
php mysql_real_escape_string函数用法与实例教程
2013/09/30 PHP
php中simplexml_load_file函数用法实例
2014/11/12 PHP
php针对cookie操作的队列操作类实例
2014/12/10 PHP
php实现修改新闻时删除图片的方法
2015/05/12 PHP
对frameset、frame、iframe的js操作示例代码
2013/08/16 Javascript
使图片旋转的3种解决方案
2013/11/21 Javascript
php显示当前文件所在的文件以及文件夹所有文件以树形展开
2013/12/13 Javascript
使用不同的方法结合/合并两个JS数组
2014/09/18 Javascript
jQuery的ready方法详解
2014/11/27 Javascript
jQuery on()方法示例及jquery on()方法的优点
2015/08/27 Javascript
Google 地图控件集详解及实例代码
2016/08/06 Javascript
Node.js websocket使用socket.io库实现实时聊天室
2017/02/20 Javascript
微信小程序显示下拉列表功能【附源码下载】
2017/12/12 Javascript
node.js遍历目录的方法示例
2018/08/01 Javascript
Vue 简单实现前端权限控制的示例
2020/12/25 Vue.js
[02:11]2016国际邀请赛中国区预选赛最美TA采访现场玩家
2016/06/28 DOTA
[02:38]DOTA2亚洲邀请赛小组赛精彩集锦:Wings完美团击溃对手
2017/03/29 DOTA
[33:19]完美世界DOTA2联赛PWL S2 PXG vs InkIce 第一场 11.26
2020/11/30 DOTA
Python实现从url中提取域名的几种方法
2014/09/26 Python
Python和GO语言实现的消息摘要算法示例
2015/03/10 Python
Python cookbook(数据结构与算法)让字典保持有序的方法
2018/02/18 Python
Python3实现的爬虫爬取数据并存入mysql数据库操作示例
2018/06/06 Python
解决Python运行文件出现out of memory框的问题
2018/12/03 Python
Python 函数list&amp;read&amp;seek详解
2019/08/28 Python
如何定义TensorFlow输入节点
2020/01/23 Python
Python模拟FTP文件服务器的操作方法
2020/02/18 Python
浅谈python出错时traceback的解读
2020/07/15 Python
浅析CSS3 用text-overflow解决文字排版问题
2020/10/28 HTML / CSS
英国家庭珠宝商:T. H. Baker
2018/02/08 全球购物
施华洛世奇新加坡官网:SWAROVSKI新加坡
2020/10/06 全球购物
node中使用shell脚本的方法步骤
2021/03/23 Javascript
党员岗位承诺口号大全
2014/03/28 职场文书
债务纠纷委托书范本
2014/10/14 职场文书
详解Go语言Slice作为函数参数的使用
2021/07/02 Golang
vue使用echarts实现折线图
2022/03/21 Vue.js