使用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>
