我们在上一章节中已经学习了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.getHours(), //小时
"m+": this.getMinutes(), //分
"s+": this.getSeconds(), //秒
"q+": Math.floor((this.getMonth() + 3) / 3), //季度
"S": this.getMilliseconds() //毫秒
};
if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
for (var k in o)
if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
return fmt;
}
</script>
</body>
</html> 
2896
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
