DataTable的一些用法
一：DataTable根据条件隐藏某一列或者几列有两种情况，第一种：直接根据DataTable自带的方法来隐藏，第二种是根据<c:if>来实现
column([-1])表示倒数第一列，
从前往后0，1，2，3，从后往前 -1，-2，-3
if(${drawingtype} =='01'){
$('#zcInfo-user').DataTable().column([-1]).visible( false );
$('#zcInfo-user').DataTable().column([-1]).visible( false );
}第二种<c:if>
<c:if test="${drawingtype=='05'}">
<th>所</th>
<th>所</th>
<th class="hidden-480">楼层</th>
</c:if>
<c:if test="${drawingtype=='05'}">
{"data": "Name","sDefaultContent" : ""},
{"data": "Name","sDefaultContent" : ""},
{"data": "floor","sDefaultContent" : "","sClass" : "hidden-480"},
</c:if>二：DataTable中的下载功能参照
三：DataTable的初始化AjaxData
function ajaxData(data, callback, settings ) {
function handleAjaxError( xhr, textStatus, error ) {
if ( textStatus === 'timeout' ) {
layer.alert('查询超时，请稍后再试', {
skin: 'layui-layer-lan',
icon: 5,
closeBtn: 0,
anim: 3 //动画类型
});
} else {
layer.alert('服务器未响应，请稍后再试', {
skin: 'layui-layer-lan',
icon: 5,
closeBtn: 0,
anim: 3 //动画类型
});
}
$('#dynamic-table').dataTable().fnProcessingIndicator( false );
}
//封装请求参数
var param = {};
param.size = data.length;//页面显示记录条数，在页面显示每页显示多少项的时候
//param.start = data.start;//开始的记录序号
param.page = (data.start / data.length); //当前页码
var formData = $("#queryForm").serializeArray();//把form里面的数据序列化成数组//列表上面的表单中的值获取到之后封装
formData.forEach(function (e) {//遍历赋值
param[e.name] = e.value;
});
//有时候param的值也可能不是从表单里面获取到的，可能是后台传过来的值，看着两种情况随机而用
param['key'] ="${key}";
param['drawingtype'] ="${drawingtype}";
//ajax请求数据
$.ajax({
type: "POST",
url: "basis/build/list",
cache: false, //禁用缓存
data: param, //传入组装的参数
dataType: "json",
error:handleAjaxError,
success: function (result) {
//console.log(result);
//封装返回数据
var returnData = {};
returnData.draw = data.draw;//这里直接自行返回了draw计数器,应该由后台返回
returnData.recordsTotal = result.totalElements;//返回数据全部记录
returnData.recordsFiltered = result.totalElements;//后台不实现过滤功能，每次查询均视作全部结果
returnData.data = result.content;//返回的数据列表
//console.log(returnData);
//调用DataTables提供的callback方法，代表数据已封装完成并传回DataTables进行渲染
//此时的数据需确保正确无误，异常判断应在执行此回调前自行处理完毕
callback(returnData);
}
});
}列表查出来之后就进行初始化
var myTable = $("#dynamic-table").DataTable({
language:{"url":"static/lang/dataTables.zh_CN.json"}, //提示信息
autoWidth: true, //禁用自动调整列宽
processing: true, //隐藏加载提示,自行处理
serverSide: true, //启用服务器端分页
searching: false, //禁用原生搜索
orderMulti: false, //启用多列排序
ordering: false, //排序操作在服务端进行，所以可以关了。
aLengthMenu: [[20, 50, 100, 200], [20, 50, 100,200]],
order: [], //取消默认排序查询,否则复选框一列会出现小箭头
renderer: "bootstrap", //渲染样式：Bootstrap和jquery-ui
pagingType: "full_numbers", //分页样式：simple,simple_numbers,full,full_numbers
scrollX: true,
fixedColumns: {
leftColumns: 3,
rightColumns: 4
},
ajax:ajaxData,
//列表表头字段
columns: [
{"data": "Name","sDefaultContent" : ""},
{"data": "Name","sDefaultContent" : "",
render: function(data,type,row,meta){
if (data=='1'){
return '<i class=\"ace-icon fa fa-check-circle bigger-120 green tooltip-success \" data-rel="tooltip" data-placement="left" title="已入账" ></i>';
}else if (data=='0'){
return '<i class=\"ace-icon fa fa-ban bigger-120 red tooltip-error\" data-rel="tooltip" data-placement="left" title="未入账" ></i>';
}
else{
return ;
}
}
}
},
{"data": "floor","sDefaultContent" : "","sClass" : "hidden-480"},
{"data": null, "sClass" : "center","width":"80px"},
{"data": null,"sClass" : "center","width":"80px"},
{"data": null,"sClass" : "center","width":"200px"}
],//操作按钮
columnDefs: [
{
targets: 0,
defaultContent: "<label class=\"pos-rel\">"
+"<input type=\"checkbox\" class=\"ace\" />"
+ "<span class=\"lbl\"></span>"
+"</label>"
},{
targets:-1,
defaultContent:"<div class=\"btn-group\">"
+ "<button id=\"detail-row\" class=\"btn btn-xs btn-warning\" title=\"详细\">"
+ "<i class=\"ace-icon fa fa-search-plus bigger-120\">详细</i>"
+ "</button>"
+ "<button id=\"edit-row\" class=\"btn btn-xs btn-success\" title=\"修改\">"
+ "<i class=\"ace-icon fa fa-pencil bigger-120\">修改</i>"
+ "</button>"
+ "<button id=\"del-row\" class=\"btn btn-xs btn-danger\" title=\"删除\">"
+ "<i class=\"ace-icon fa fa-trash-o bigger-120\">删除</i>"
+ "</button>"
+ "</div>"
},{
targets:-2,
defaultContent:"<div class=\"btn-group\">"
+ "<button id=\"upload-row\" class=\"btn btn-xs btn-purple\" title=\"上传\">"
+ "<i class=\"ace-icon fa fa-upload bigger-110 \">上传</i>"
+ "</button>"
+ "</div>"
},{
targets:-3,
defaultContent:"<div class=\"btn-group\">"
+ "<button id=\"detaillm-row\" class=\"btn btn-xs btn-info\" title=\"查看\">"
+ "<i class=\"ace-icon fa fa-search-plus bigger-120 \"></i>"
+ "</button>"
+ "</div>"
}],
fnDrawCallback: function (oSettings) {
$('[data-rel=tooltip]').tooltip();
},
initComplete: function(settings, json) {
$('[data-rel=tooltip]').tooltip();
}
});
$.fn.dataTable.ext.errMode = 'none'; //不显示任何错误信息
//查询
$("#btn-query").on("click", function () {
myTable.draw();//查询后不需要保持分页状态，回首页
});
//重置
$("#btn-reset").on("click",function(){
$('.select2').val(null).trigger("change");
});
//checkbox全选
$("#checkAll").on("click", function () {
if ($(this).prop("checked") === true) {
$("input[name='checkList']").prop("checked", $(this).prop("checked"));
//$("#dataTable tbody tr").addClass('selected');
$(this).hasClass('selected')
} else {
$("input[name='checkList']").prop("checked", false);
$("#dataTable tbody tr").removeClass('selected');
}
});
//操作按钮#table是table的id
$("#table tbody").on("click", "#upload-row", function () {
var data = myTable.row($(this).parents('tr')).data();
var timestamp = (new Date()).valueOf();
$.ajaxSetup ({
cache: false
});
var timestamp = (new Date()).valueOf();
var url ='${ctx}/aaa/bbb/aaa?key='+data.key+'×tamp='+timestamp+'&type=03';
$.post(url, {}, function(str){
layer.open({
content: str,
type: 1,
title : '图片/证照上传',
skin : "layui-layer-lan",
border : [1],
btn : ['取消'],
closeBtn:1,
maxmin: true,
fixed:true,
notmin:false,
scrollbar:false,
area : ['86%','80%'],
end: function () {
$('#table').DataTable().draw( false );
}
});
});
});
//或者
//展示
$("#table tbody").on("click", "#detail-row", function () {
var data = myTable.row($(this).parents('tr')).data();
$("#showBody").load('${ctx}/aaa/bbb/aaa?key='+data.key, function (responseTxt, statusTxt, xhr) {
$('#showTitle').html('详情');
$('#showFooter').html('<button class="btn" data-dismiss="modal"><i class="ace-icon fa fa-undo bigger-110"></i>取消</button>');
$('#showModal').modal('show');
});
});
/* 删除操作 */
$("#table tbody").on("click", "#del-row", function () {
var data = myTable.row($(this).parents('tr')).data();
swal({
title: "您确定删除此建筑物吗？",
type: 'warning',
showCancelButton: true,
confirmButtonText: '确定',
cancelButtonText: "取消"
},function(){
$.ajax({
//提交数据的类型 POST GET
type:"POST",
//提交的网址
url:"${ctx}/aaa/bbb/ccc",
data:{"key": data.key},
//返回数据的格式
datatype: "json",//"xml", "html", "script", "json", "jsonp", "text".
//成功返回之后调用的函数
success:function(data){
if (data.code == 0) {
layer.alert('删除成功', {
skin: 'layui-layer-lan',
icon: 1,
closeBtn: 0,
anim: 3 //动画类型
});
} else {
layer.alert('删除失败,'+data.msg, {
skin: 'layui-layer-lan',
icon: 5,
closeBtn: 0,
anim: 3 //动画类型
});
}
myTable.draw();//查询后不需要保持分页状态，回首页
},
//调用出错执行的函数
error: function(data){
//请求出错处理
layer.alert('系统在执行删除操作时出现错误', {
skin: 'layui-layer-lan',
icon: 5,
closeBtn: 0,
anim: 3 //动画类型
});
}
});
});
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
