项目场景:
使用jquery dataTable 动态加载列展示效果:
监控业务增多,为了不重复劳动 每个业务针对自己的指标而增加新页面,决定前端表格显示直接通过动态获取列名,以便于大家不用再做重复劳动。
解决方案:
如下:
Html中只要div table即可:
<div id="cleanTable" style="margin-left: 20px;margin-right: 20px;">
<table id="mytable" class="table">
</table>
</div>
后台需要返回col 列名 和对应 列值 (后台比较熟练的原因 以下js中获取的列名直接由后台传递了,否则可以通过json数据直接前端获取列名)
function showEcharts(){
tableClear();
getInfo();
};
function tableClear(){
if($.fn.dataTable.isDataTable('#mytable')){
$('#mytable').DataTable().clear().destroy();
}
$('#mytable').dataTable().empty();
$("#cleanTable").html("<table id='mytable' class='table'></table>");
}
function getInfo() {
var displayLength = getCookie("displayLength");
displayLength = displayLength == "" || displayLength == "null" || displayLength == "undefined" ? 100 : parseInt(displayLength); // 每页显示条数
var cluster = $("#cluster").val();
var area = $("#area").val();
var monitorType = $("#monitorType").val();
var params = {
monitorType:monitorType,
startTime:startTime,
endTime:endTime,
cluster:cluster,
area:area
};
$("#loading").show();
$
.ajax({
type: 'post',
data: JSON.stringify(params),
dataType: 'json',
contentType: "application/json",
url: '*******',
complete: function (a, b, c) {
$("#md").css("display", "none");
$("#loading").css("display", "none");
},
success: function (data) {
$("#loading").css("display", "none");
console.log(data);
//用户返回信息
var columns = [];//定义表头列名
var html2="<thead>";
html2+="<tr class='bluebgdeep fontct'>";
for( i in data.col){
html2+="<th nowrap='nowrap' class='sorting_desc' tabindex='0' aria-controls='datatable' rowspan='1' colspan='1' aria-label='"+data.col[i]+": activate to sort column ascending' style='width: 0px;' aria-sort='descending'>"+data.col[i]+"</th>";
columns.push({"data":data.col[i],"render":function ( data, type, row, meta )
{
if(data ==null)
return ""
else
return data
}});
}
html2+="</tr>";
html2+="</thead>'";
$("#mytable").html(html2);
// 最下方推荐列表
if (data.list == null) {
console.log('没有推荐结果');
$('#mytable').hide();
return false;
}
//$("#mytable").dataTable().fnDestroy(false);
$('#mytable').dataTable({
"aaSorting": [[ 0, "desc" ]],
"data": data.list,
"columns": columns,
'iDisplayLength': displayLength,
"sPaginationType": "full_numbers",
"retrieve": true,
"fnDrawCallback": function () {
var perpage = $("#mytable_length").find("select").val();
setCookie("displayLength", perpage, "h10");
},
"aoColumnDefs": [
{"orderable":true,"aTargets":[0,2]}// 制定列参与排序
],
"error":{}
});
}
});
}
坑点:
1datatable对于已有表结构和数据如果不清空html一直无法显示,尝试了所有自带清空方法 clear destory empty均无效 最后直接暴力清空div clear的时候重新写入html才成功。
2对于数据格式不同 有些数据为空 如果都加入排序会报错,最后限制了起始排序的项目后 不再报错。
“aoColumnDefs”: [
{“orderable”:true,“aTargets”:[0,2]}// 制定列参与排序
],