datatable刷新表头
Posted 乱码出黑客
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了datatable刷新表头相关的知识,希望对你有一定的参考价值。
使用jQuery的datatable生成表格数据,当需要改变表头时,调用Table.fnDestroy();再重新创建表头
var oTable = null; function initSettings() { var columns = []; $.ajax({ type : "post", url : "${ctx}/getDynamicColumns", dataType : "json", data : $("#query_form").serialize(), async: false, success : function(data){ columns.push({ "sTitle": "日期", "mData": "createTime", "sName": "createTime", "sWidth": "120", }); columns.push({ "sTitle": "商户全称", "mData": "fullName", "sName": "fullName", "sWidth": "100", }); columns.push({ "sTitle": "商户简称", "mData": "shortName", "sName": "shortName", "sWidth": "100", }); /* 这里其实是实现动态的列,查询到所要的列,再生成 */ $.map(data, function(item,index) { console.log(item.sTitle) columns.push({ "sTitle": item.sTitle, "mData": item.mData, "sName": item.sName, "sWidth": "100", "mRender":function(data,type,full){ if(data != null){ return data; }else{ return ""; } } }); }); columns.push({ "sTitle": "一级代理商", "mData": "agent1", "sName": "agent1", "sWidth": "100", "mRender":function(data,type,full){ if(data != null && data !=""){ return data; }else{ return "暂无"; } } }); columns.push({ "sTitle": "二级代理商", "mData": "agent2", "sName": "agent2", "sWidth": "100", "mRender":function(data,type,full){ if(data != null&& data !=""){ return data; }else{ return "暂无"; } } }); } }); return columns; } function createTable() { oTable = createDataTable("coupon_channel_table", { "sAjaxSource": ‘${ctx}/coupon_channel_statistic/list‘, "aoColumns": initSettings(), "fnServerParams": function (params) { var fields = $(‘#query_form‘).serializeArray(); $.each(fields, function (i, field) { if (field.name && field.value) { params.push({"name": field.name, "value": field.value}); } }); } }); } function loadTable(){ if(null != oTable) { oTable.fnDestroy();//销毁表格对象 $("#detail_table_div").html("<table id=‘coupon_channel_table‘></table>"); } createTable(); /* if($("#coupon_channel_table").find("td").length == 0){ createTable(); }else{ oTable.fnDraw(); } */ }
页面div
<div id="detail_table_div"> <table id="coupon_channel_table"></table> </div>
以上是关于datatable刷新表头的主要内容,如果未能解决你的问题,请参考以下文章
datatable jquery - 表头宽度与正文宽度不对齐