jquery datatbale动态列
最近做新项目的时候遇到一个问题，在同一个页面切换TAB显示不同的table列。弄了很久，后来在一个同事的帮助下解决了。
table = $("#example").dataTable({
dom:"<bottom><'row'<'col-xs-5 pt-10'li><'col-xs-7'p>>",
autoWidth: false, //禁用自动调整列宽
stripeClasses: ["odd", "even"], //为奇偶行加上样式，兼容不支持CSS伪类的场合
processing: true, //隐藏加载提示,自行处理
serverSide: true, //启用服务器端分页
searching: false, //禁用原生搜索
orderMulti: false, //启用多列排序
/*order: [], //取消默认排序查询,否则复选框一列会出现小箭头*/
ordering:false,//取消默认排序
renderer: "bootstrap", //渲染样式：Bootstrap和jquery-ui
pagingType: "simple_numbers", //分页样式：simple,simple_numbers,full,full_numbers
columnDefs: [{
"targets": 'nosort', //列的样式名
"orderable": false //包含上样式名‘nosort’的禁止排序
}],
ajax: function (data, callback, settings) {
//封装请求参数
var param = $("#myForm").serializeObject();
param.limit = data.length;//页面显示记录条数，在页面显示每页显示多少项的时候
param.start = data.start;//开始的记录序号
param.page = (data.start / data.length)+1;//当前页码
//ajax请求数据
$.ajax({
type: "POST",
url: "${ctx}/web/order/getImportList",
cache: false, //禁用缓存
data: param, //传入组装的参数
dataType: "json",
success: function (result) {
//封装返回数据
var returnData = {};
returnData.draw = data.draw;//这里直接自行返回了draw计数器,应该由后台返回
returnData.recordsTotal = result.total;//返回数据全部记录
returnData.recordsFiltered = result.total;//后台不实现过滤功能，每次查询均视作全部结果
returnData.data = result.rows;//返回的数据列表
//console.log(returnData);
//调用DataTables提供的callback方法，代表数据已封装完成并传回DataTables进行渲染
//此时的数据需确保正确无误，异常判断应在执行此回调前自行处理完毕
callback(returnData);
}
});
},
//列表表头字段
columns: [
{ "data": ""},
{ "data": "order_no" },
{ "data": "customs_ent_plat_name" },
{ "data": "package_number" },
{ "data": "way_bill_no" },
{ "data": "order_total_price"},
{ "data": "actual_amount_paid"},
{ "data": "recipient_name" },
{ "data": "order_status" },
{ "data": "create_time" }
],
aoColumnDefs:[
{
"sClass":"text-c",
"aTargets":[0],
"mData":"statCleanRevampId",
"mRender":function(a,b,c,d){//a表示statCleanRevampId对应的值，c表示当前记录行对象
if(c.order_status=='import'){
return '<input type="checkbox" name="ids" value="'+c.order_id+'">';
}else{
return "";
}
}
},
{
"sClass":"text-c",
"aTargets":[1],
"mData":"statCleanRevampId",
"mRender":function(a,b,c,d){//a表示statCleanRevampId对应的值，c表示当前记录行对象
if(c.order_status=='import' && c.exception_status=='interface_fail'){
return a+'<img title="'+c.exception_msg+'" src="${resource }/images/img61.png">';
}else{
return a;
}
}
},
{
"sClass":"text-c",
"aTargets":[4],
"mData":"statCleanRevampId",
"mRender":function(a,b,c,d){//a表示statCleanRevampId对应的值，c表示当前记录行对象
if(a){
return a;
}else{
return "";
}
}
},
{
"sClass":"text-c",
"aTargets":[8],
"mData":"statCleanRevampId",
"mRender":function(a,b,c,d){//a表示statCleanRevampId对应的值，c表示当前记录行对象
return $("#span_order_"+a).text();
}
},
{
"sClass":"text-c",
"aTargets":[10],
"mData":"statCleanRevampId",
"mRender":function(a,b,c,d){//a表示statCleanRevampId对应的值，c表示当前记录行对象
if(c.order_status=='import'){
return '<a class="btn btn-link " onclick="del('+c.order_id+')" href="javascript:void(0)">删除</a><a class="btn btn-link " onclick="openDetail(\'${ctx}/web/order/ImportDetail?id='+c.order_id+'\',\'订单详情\')" href="javascript:void(0)">详情</a>';
}else{
return '<a class="btn btn-link " onclick="openDetail(\'${ctx}/web/order/ImportDetail?id='+c.order_id+'\',\'订单详情\')" href="javascript:void(0)">详情</a>';
}
}
}
]
});
如上是页面初始化的时候第一个TAB页显示的TABLE数据渲染。那么问题来了，在点击第二个TAB的时候怎么去动态加载TABLE列。
这里的 第一列 是不需要显示的(一个CHECKBOX列)
//列表表头字段 columns: [ { "data": ""}, { "data": "order_no" }, { "data": "customs_ent_plat_name" }, { "data": "package_number" }, { "data": "way_bill_no" }, { "data": "order_total_price"}, { "data": "actual_amount_paid"}, { "data": "recipient_name" }, { "data": "order_status" }, { "data": "create_time" }
我试过声明2个table，分别给赋值，结果并不能解决问题，会出现列错位或报一些 莫名的错误。
实际上我这里并没有找到问题所在，后来网上搜了一下和同事的点拨，原来这个地方table是需要清空的。不能存在2个table
jQuery.Huitab =function(tabBar,tabCon,class_name,tabEvent,i){ var $tab_menu=$(tabBar); // 初始化操作 $tab_menu.removeClass(class_name); $(tabBar).eq(i).addClass(class_name); $tab_menu.bind(tabEvent,function(){ $tab_menu.removeClass(class_name); $(this).addClass(class_name); var index=$tab_menu.index(this); if(currentIndex==index){ return; } table.fnClearTable(); //清空一下table table.fnDestroy(); if(index==0){ $("#order_status").val("import"); $("#not_status").val(""); $("#operation").show(); $("#importWeightDiv").hide(); $("#status_div").hide(); $("#checktr").show(); init(); currentIndex=0; }else{ //table.columns(0).visible(false); $("#order_status").val(""); $("#not_status").val("import"); $("#operation").hide(); $("#importWeightDiv").show(); $("#status_div").show(); $("#checktr").hide(); init2(); currentIndex=1; } $(':input','#myForm').not(':button,:submit,:reset,:hidden').val(''); search(); });} $.Huitab("#tab_demo .tabBar span","#tab_demo .tabCon","current","click","0");
我这里用到了前端的hui框架中的huitab
在出发tab点击事件时调用table清空。完美解决
table.fnClearTable(); //清空一下table
table.fnDestroy();
在init2中重新给table赋值给第一列加visible属性为false,该列就不显示了。
PS：这里我用到了一个currentIndex来防止tab的重复点击。要不然框架会报错。
浙公网安备 33010602011771号