Bootstrap框架----DataTables列表折叠列
Posted 张小凡vip
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Bootstrap框架----DataTables列表折叠列相关的知识，希望对你有一定的参考价值。
我们在上一章节中已经学习了DataTables在BootStrap框架中的使用方式和初始化。
Bootstrap框架——DataTables列表示例
本章学习行详细内容的展开与折叠，当数据量多时，可以通过点击按钮后再去请求获取数据进行展示。
官网例子参考
行详细内容的展开与折叠
http://datatables.club/example/user_share/row_details.html
环境准备
DataTables列表折叠列的使用建立在上篇文件的基础上
Bootstrap框架——DataTables列表示例
最终效果
实现方案
在列头中增加一列
<th width="6%">详情</th>在datatables初始化的js列绑定columns数组中对应增加一列
,
"data": "id",
"class": "text-center",
"render": function (id, type, row, position)
return '<span class="expand-detail">...</span>';
在与colunms并列的位置添加createdRow属性
"createdRow": function (row, data, index)
$(row).attr('index', index);
,在dataTables初始化的方法后绑定点击事件
.on('click', 'span.expand-detail', function (event)
toggleDetailRow($(this).closest("tr").attr("index"));
)在定义名为$dt的dataTable的refreshTable方法中增加toggleDetailRow方法
toggleDetailRow方法主要实现要显示内容的构造，如果要请求数据的话，可以使用ajax去请求。
/**
* toggle详情内容
* @param index 展开详情的索引
* @param forceUpdate 是否强制更新内容
*/
function toggleDetailRow(index, forceUpdate)
var row = $dt.DataTable().row(index);
var data = row.data();
var $tr = row.nodes().to$();
var $nextTr = $tr.next("tr");
if ($nextTr.is('.row-detail'))
$nextTr.remove(); // 移除
if (!forceUpdate) return;
var writer = [];
writer.push('<tr class="row-detail"><td colspan="' + $tr.children().length + '"><div>');
writer.push($.format('<h4>姓名：name</h4>', data));
writer.push('<h4>li样式：</h4>');
writer.push('<ul class="status-hisotry">');
for (var i = 0;i<3; i++)
i > 0 && writer.push('<li class="glyphicon glyphicon-arrow-right"></li>');
writer.push('<li class="status">'+i+'</li>');
writer.push('</ul>');
writer.push($.format('<div id="info-name">信息加载中...</div>', data));
writer.push('</div></td></tr>');
$tr.after(writer.join(''));
$.ajax(
url: '/findContact?name=' + data.name,
cache: true,
dataType: 'json'
).done(function (res)
if (!res.code)
if (res.data)
$('#info-' + data.name).replaceWith($.format('<h4>测试ajax获取信息：<a href="/findContact?name=name">name</a></h4>', res.data));
else
$('#info-' + data.name).replaceWith('<h4>未查到相关联系人信息</h4>');
else
$('#info-' + data.name).replaceWith(res.error);
);
在refreshTable方法方法外增加toggleDetailRow中用到的format定义
/**
* 格式化字符串 第一个参数为格式化模板 format('this is a 0 template!', 'format');
* format('this is a 0.message template!', message: 'format'); 等同于
* format('this is a message template!', message: 'format' );
*/
$.format = function()
var template = arguments[0],
templateArgs = arguments,
stringify = function(obj)
if (obj == null)
return '';
else if (typeof obj === 'function')
return obj();
else if (typeof obj !== 'string')
return JSON.stringify ? JSON.stringify(obj) : obj;
return obj;
;
return template.replace(/\\\\w+(\\.\\w+)*\\/g, function(match)
var propChains = match.slice(1, -1).split('.');
var index = isNaN(propChains[0]) ? 0 : +propChains.shift();
var arg, prop;
if (index + 1 < templateArgs.length)
arg = templateArgs[index + 1];
while (prop = propChains.shift())
arg = arg[prop] == null ? '' : arg[prop];
return stringify(arg);
return match;
);
;增加样式
<style type="text/css">
.row-detail td
background-color: #eee;
.row-detail td:first-child:before
content:'' !important;
margin:0 !important;
padding:0 !important;
border:none !important;
background-color:transparent !important;
box-shadow:none !important;
.row-detail .status
text-align: center;
display: inline-block;
min-width: 80px;
.row-detail .glyphicon-arrow-right
vertical-align: top;
margin: 2px 10px 0 10px;
color: green;
.remark-history .remark
margin-left: 30px;
.expand-detail
display: block;
line-height: 60px;
cursor: pointer;
</style>IndexController中增加方法
@RequestMapping("/findContact")
@ResponseBody
public Object findContact(@RequestParam String name)
Contacts contact= mongoTemplate.findOne(new Query(Criteria.where("name").is(name)), Contacts.class);
if(contact!=null)
return JSONResult.success(contact);
return JSONResult.error("未查询到联系人");
JSONResult
package com.test.web.message.response;
/**
* JSONResult
* 标准化的JSON响应
*
* <pre>
* @link JSONResult#success(Object)
* @link JSONResult#error(String)
* </pre>
*
*
*/
public class JSONResult
/**
* 成功的代码
*/
public static final int CODE_SUCCESS = 0;
/**
* 错误的代码，可根据错误类型进行详细分类
*/
public static final int CODE_ERROR = -1;
/**
* 空白的成功响应
*/
public static final JSONResult RESULT_SUCCESS_NO_DATA = new JSONResult(CODE_SUCCESS, null, null);
private int code;
private String msg;
private Object data;
/**
* 创建一个成功的响应
*
* @param data
* @return
*/
public static JSONResult success(Object data)
return new JSONResult(CODE_SUCCESS, null, data);
/**
* 创建一个错误的响应
*
* @param msg
* @return
*/
public static JSONResult error(String msg)
return new JSONResult(CODE_ERROR, msg, null);
/**
* @param code
* @param msg
* @param data
*/
public JSONResult(int code, String msg, Object data)
this.code = code;
this.setMsg(msg);
this.data = data;
public int getCode()
return code;
public JSONResult setCode(int code)
this.code = code;
return this;
public Object getData()
return data;
public JSONResult setData(Object data)
this.data = data;
return this;
public String getMsg()
return msg;
public JSONResult setMsg(String msg)
this.msg = msg;
return this;
完整Jsp
<%@ include file="./include/header.jsp"%>
<style type="text/css">
.row-detail td
background-color: #eee;
.row-detail td:first-child:before
content:'' !important;
margin:0 !important;
padding:0 !important;
border:none !important;
background-color:transparent !important;
box-shadow:none !important;
.row-detail .status
text-align: center;
display: inline-block;
min-width: 80px;
.row-detail .glyphicon-arrow-right
vertical-align: top;
margin: 2px 10px 0 10px;
color: green;
.remark-history .remark
margin-left: 30px;
.expand-detail
display: block;
line-height: 60px;
cursor: pointer;
</style>
<!-- jquery.dataTables.css -->
<link href="/plugins/DataTables-1.10.16/media/css/dataTables.bootstrap.css" rel="stylesheet"
type="text/css"></link>
<link rel="stylesheet" href="/plugins/DataTables-1.10.16/extensions/Responsive/css/responsive.dataTables.css"></link>
<!-- DATE STYLES-->
<link rel="stylesheet" href="/plugins/bootstrap-datetimepicker-master/css/bootstrap-datetimepicker.min.css"></link>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="cf" uri="com.data.web.view.function" %>
<div id="page-wrapper">
<div id="page-inner">
<div class="row">
<div class="col-md-12">
<h1 class="page-header">
DataTables<small>示例</small>
</h1>
</div>
</div>
<div class="row">
<form class="form-inline col-sm-11" id="search_form">
<div class="form-group ">
<input class="form-control" placeholder="名称或其他" name="name">
</div>
<div class="form-group">
<select class="form-control" id="gender" name="gender">
<option value="">--</option>
<option value=1>男</option>
<option value=0>女</option>
</select>
</div>
<div class="form-group">
<label for="beginTime">开始</label> <input type="text"
class="datepicker form-control"
data-date-format="yyyy-mm-dd 00:00:00" name="beginTime"
id="beginTime" />
</div>
<div class="form-group">
<label for="endTime">截止</label> <input type="text"
class="datepicker form-control"
data-date-format="yyyy-mm-dd 23:59:59" name="endTime" id="endTime" />
</div>
<button type="button" id="query" class="btn btn-success query mt-5">查询</button>
<button type="button" id="add" class="btn btn-info add mt-5">新建</button>
</form>
</div>
<!-- /. ROW -->
<div class="row">
<div class="col-md-12">
<div class="panel panel-default">
<div class="panel-heading">示例列表</div>
<div class="panel-body">
<div class="table-responsive">
<table class="table table-striped table-bordered responsive table-hover" id="table" cellspacing="0" width="100%">
<thead>
<tr>
<th width="8%" >姓名</th>
<th width="10%" >电话</th>
<th width="10%" >性别</th>
<th width="10%" class="desktop">时间</th>
<th width="8%" class="desktop">操作</th>
<th width="6%">详情</th>
</tr>
</thead>
</table>
</div>
</div>
</div>
</div>
</div>
<!-- /. ROW -->
</div>
<!-- /. PAGE INNER -->
</div>
<!-- /. PAGE WRAPPER -->
<%@ include file="./include/footer.jsp"%>
<!-- DATA TABLE SCRIPTS -->
<script type="text/javascript" src="/plugins/DataTables-1.10.16/media/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="/plugins/DataTables-1.10.16/media/js/dataTables.bootstrap.min.js"></script>
<script src="/plugins/DataTables-1.10.16/extensions/Responsive/js/dataTables.responsive.js"></script>
<script src="/plugins/bootstrap-datetimepicker-master/js/bootstrap-datetimepicker.min.js"></script>
<script src="/plugins/bootstrap-datetimepicker-master/js/locales/bootstrap-datetimepicker.zh-CN.js"></script>
<script type="text/javascript">
$(document).ready(function()
$('.datepicker').datetimepicker(
language : 'zh-CN',
autoclose : true
);
refreshTable();//刷新列表数据内容
clickEvent();//绑定表格中的按钮事件
//点击查询
$('button.query').on("click", function()
refreshTable();
clickEvent();
);
$('button.add').on('click',function()
location.href = '/create';
);
);
function clickEvent()
$('#table').on('click','.js-delete',function()
if(confirm('确认删除该条数据?'))
var id = $(this).attr('data-id');
$.get('/delete?id='+id+'', function(result)
console.log(result);
if(result==0)
alert('删除成功');
window.location.reload();
)
).on('click','.js-edit',function()
var id = $(this).attr('data-id');
location.href = '/edit?id='+id+'';
)
function refreshTable()
var $searchForm = $('#search_form').on('submit', function ()
$dt.DataTable().searchEx().draw();
return false;
);
var $dt = $('#table').on('preXhr.dt', function (e, settings, data)
//data.search.value = $searchForm.formGet();
).dataTable(
"columns" : [
"data" : "name",
"class" : "text-center"
,
"data" : "tel",
"class" : "text-center",
"render" : function(data, type, row)
if(data)
var ms="00-";
ms=row.name+"的电话"+ms+data;
return ms;
return "";
,
"data" : "gender",
"class" : "text-center",
"render" : function(data, type, row)
if(data==0)
return "女";
else if(data==1)
return "男";
return "";
,
"data" : "creatTime",
"class" : "text-center",
"render" : function(data, type, row)
return new Date(data).Format("yyyy-MM-dd hh:mm:ss");
,
"data" : "id",
"class" : "text-center",
"render" : function(data, type, row)
return '<span class="btn btn-primary btn-xs ml-5 js-edit" data-id="'+data+'">编辑</span> <span class="btn btn-danger btn-xs ml-5 js-delete" data-id="'+data+'">删除</span>';
,
"data": "id",
"class": "text-center",
"render": function (id, type, row, position)
return '<span class="expand-detail">...</span>';
],
"createdRow": function (row, data, index)
$(row).attr('index', index);
,
"ajax" : //类似jquery的ajax参数，基本都可以用。
type : "post",//后台指定了方式，默认get，外加datatable默认构造的参数很长，有可能超过get的最大长度。
url : "/listData",
dataSrc : "data",//默认data，也可以写其他的，格式化table的时候取里面的数据
data : function(d) //d 是原始的发送给服务器的数据，默认很长。
var param = ;//因为服务端排序，可以新建一个参数对象
param.start = d.start;//开始的序号
param.length = d.length;//要取的数据的
var formData = $(
"#search_form")
.serializeArray();//把form里面的数据序列化成数组
formData
.forEach(function(e)
param[e.name] = e.value;
);
return param;//自定义需要传递的参数。
,
,
//"ajax": $.fn.dataTable.pagerAjax(url: "/listData"),
"destroy":true,
lengthChange : false,
serverSide : true,//分页，取数据等等的都放到服务端去
searching : false,
processing : true,//载入数据的时候是否显示“载入中”
bDestroy : true,
pageLength : 20,//首次加载的数据条数
ordering : false,//排序操作在服务端进行，所以可以关了。
language :
processing : "载入中",//处理页面数据的时候的显示
paginate : //分页的样式文本内容。
previous : "上一页",
next : "下一页",
first : "第一页",
last : "最后一页"
,
zeroRecords : "没有内容",//table tbody内容为空时，tbody的内容。
//下面三者构成了总体的左下角的内容。
info : "第 _PAGE_/_PAGES_页 共 _TOTAL_条记录",//左下角的信息显示，大写的词为关键字。
infoEmpty : "第 _PAGE_/_PAGES_页 共 _TOTAL_条记录",//筛选为空时左下角的显示。
infoFiltered : ""//筛选之后的左下角筛选提示(另一个是分页信息显示，在上面的info中已经设置，所以可以不显示)，
,
"columnDefs": [
"defaultContent": "",
"targets": "_all"
]
).on('click', 'a[row-index]', function ()
).on('click', 'span.expand-detail', function (event)
toggleDetailRow($(this).closest("tr").attr("index"));
);
/**
* toggle详情内容
* @param index 展开详情的索引
* @param forceUpdate 是否强制更新内容
*/
function toggleDetailRow(index, forceUpdate)
var row = $dt.DataTable().row(index);
var data = row.data();
var $tr = row.nodes().to$();
var $nextTr = $tr.next("tr");
if ($nextTr.is('.row-detail'))
$nextTr.remove(); // 移除
if (!forceUpdate) return;
var writer = [];
writer.push('<tr class="row-detail"><td colspan="' + $tr.children().length + '"><div>');
writer.push($.format('<h4>姓名：name</h4>', data));
writer.push('<h4>li样式：</h4>');
writer.push('<ul class="status-hisotry">');
for (var i = 0;i<3; i++)
i > 0 && writer.push('<li class="glyphicon glyphicon-arrow-right"></li>');
writer.push('<li class="status">'+i+'</li>');
writer.push('</ul>');
writer.push($.format('<div id="info-name">信息加载中...</div>', data));
writer.push('</div></td></tr>');
$tr.after(writer.join(''));
$.ajax(
url: '/findContact?name=' + data.name,
cache: true,
dataType: 'json'
).done(function (res)
if (!res.code)
if (res.data)
$('#info-' + data.name).replaceWith($.format('<h4>测试ajax获取信息：<a href="/findContact?name=name">name</a></h4>', res.data));
else
$('#info-' + data.name).replaceWith('<h4>未查到相关联系人信息</h4>');
else
$('#info-' + data.name).replaceWith(res.error);
);
/**
* 格式化字符串 第一个参数为格式化模板 format('this is a 0 template!', 'format');
* format('this is a 0.message template!', message: 'format'); 等同于
* format('this is a message template!', message: 'format' );
*/
$.format = function()
var template = arguments[0],
templateArgs = arguments,
stringify = function(obj)
if (obj == null)
return '';
else if (typeof obj === 'function')
return obj();
else if (typeof obj !== 'string')
return JSON.stringify ? JSON.stringify(obj) : obj;
return obj;
;
return template.replace(/\\\\w+(\\.\\w+)*\\/g, function(match)
var propChains = match.slice(1, -1).split('.');
var index = isNaN(propChains[0]) ? 0 : +propChains.shift();
var arg, prop;
if (index + 1 < templateArgs.length)
arg = templateArgs[index + 1];
while (prop = propChains.shift())
arg = arg[prop] == null ? '' : arg[prop];
return stringify(arg);
return match;
);
;
//对Date的扩展，将 Date 转化为指定格式的String
//月(M)、日(d)、小时(h)、分(m)、秒(s)、季度(q) 可以用 1-2 个占位符，
//年(y)可以用 1-4 个占位符，毫秒(S)只能用 1 个占位符(是 1-3 位的数字)
//例子：
//(new Date()).Format("yyyy-MM-dd hh:mm:ss.S") ==> 2006-07-02 08:09:04.423
//(new Date()).Format("yyyy-M-d h:m:s.S") ==> 2006-7-2 8:9:4.18
Date.prototype.Format = function (fmt) //author: meizz
var o =
"M+": this.getMonth() + 1, //月份
"d+": this.getDate(), //日
"h+": this.g以上是关于Bootstrap框架----DataTables列表折叠列的主要内容，如果未能解决你的问题，请参考以下文章
DataTables 使用 Bootstrap 4 条带表固定列透明