我们在上一章节中已经学习了DataTables在BootStrap框架中的使用方式和初始化。
Bootstrap框架—-DataTables列表示例
最终效果如图:
Bootstrap是自动适配移动端的，在手机上查看效果如图：
我们发现当数据有很多列时，会存在超出屏幕的可能。这时候表格表现为在屏幕范围内可左右滑动。
我们还有另一种解决方案。
就是在移动端情况下隐藏部分列，点击展开按钮再展开。
最终效果如图:
可参考官网示例:
显示行的附加信息
http://datatables.club/example/api/row_details.html
环境准备
DataTables列表移动端适配定义隐藏列的使用建立在上篇文件的基础上
Bootstrap框架—-DataTables列表示例
主要需要的引用
<link rel="stylesheet" href="/plugins/DataTables-1.10.16/extensions/Responsive/css/responsive.dataTables.css"></link>
<script src="/plugins/DataTables-1.10.16/extensions/Responsive/js/dataTables.responsive.js"></script>注意事项
需要注意的是 js的引用有顺序，否则会报找不到方法的各种错误。
顺序是jQuery相关的js，bootstrap相关的js，datatables的js以及responsive的js，最后是datetimepicker的js。
实现方案
实现DataTables列表移动端适配定义隐藏列主要是通过dataTables.responsive.js实现的。
我们查看dataTables.responsive.js文件里配置如下。
Responsive.breakpoints = [
{ name: 'desktop', width: Infinity },
{ name: 'tablet-l', width: 1024 },
{ name: 'tablet-p', width: 768 },
{ name: 'mobile-l', width: 480 },
{ name: 'mobile-p', width: 320 }
];
分别表示在什么屏幕下显示该列。
比如desktop表示在PC版大屏幕时才显示该列，否则隐藏。
tablet-l表示1024的大小才显示该列，否则隐藏。
以此类推。
所以修改的代码只需要修改列头th的class名即可，如下:
<thead>
<tr>
<th width="8%" class="mobile-l">姓名</th>
<th width="10%" class="mobile-l">电话</th>
<th width="10%" class="mobile-l">性别</th>
<th width="10%" class="desktop">时间</th>
<th width="8%" class="desktop">操作</th>
</tr>
</thead>完整版JSP代码
<%@ include file="./include/header.jsp"%>
<!-- 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%" class="mobile-l">姓名</th>
<th width="10%" class="mobile-l">电话</th>
<th width="10%" class="mobile-l">性别</th>
<th width="10%" class="desktop">时间</th>
<th width="8%" class="desktop">操作</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>';
}
}
],
"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 () {
});
}
//对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>
