jsp部分（此處只有table 其他無關）：
<table id="dataTable" class="table table-striped table-list table-bordered" width="100%"> <thead> <tr id="colTr"> </tr> </thead> <tbody id="colTb"> </tbody> </table>
js部分：
//datatable表頭 var dataTable; $(function(){ //查詢按鈕 $("#searchBtn").click(function(){ debugger; init(); }); }) function init(){ var id= $("input:hidden[name='id']").val(),//input type為hidden時的取值方式 name= $('#name').val();//input為text時的取值 var param = { id: id, name: name }; $.ajax({ url : url,//url type : 'POST', data : param, success : function(resdata) { //請求成功后 如果存在datatable結構銷毀 if(dataTable){ dataTable.destroy(); } //清空table數據 $("#colTb").html(""); var colsDef = [];//定義表頭列名 var obj = resdata.colist;//獲取表頭列名List var tableData = resdata.data;//獲取table數據 var cols = obj.length; if(cols>0){//構建jsp的table表頭顯示 $("#colTr").html((function (cols){ var html = ""; var colsNameCN; for(var i=0;i<cols;i++){ //這里遍歷后台返回的字段信息集合 //alert(obj[i].column_cn); colsNameCN=obj[i].view_name_cn;//這里取的字段信息的中文名 var html1="" if(colsNameCN.length>15){//字段中文名過長截取顯示 html1 += "<span title='"+colsNameCN+"'>"+ colsNameCN.substr(0, 14) + "...</span>";//title鼠標懸浮顯示全部字段中文名 html += $("<th></th>").append(html1).prop("outerHTML");//構建table表頭的html }else{ html += $("<th></th>").append(colsNameCN).prop("outerHTML");//構建table表頭的html } } return html; })(cols)); } if(cols>0){ for(var i=0;i<cols;i++){ var colsNameEN; colsNameEN=obj[i].column_en;//這里取的字段信息的英文名 和tabledata的key值對應 colsDef.push((function (colsNameEN){ var colItem = { data:colsNameEN, render: function( data, type, full, meta ) { if(data){ return data; }else{ return ""; } } } return colItem; })(colsNameEN)); } } //datatable初始化 dataTable = $('#dataTable').DataTable({ "ordering": false, "info": true, "bLengthChange": false, "iDisplayLength":10, "bFilter": true, "retrieve": true, "processing": true, "scrollX": true, "fixedColumns": true, "bScrollAutoCss": true, "language": { "search": "過濾：", "lengthMenu": "每頁 _MENU_ 條記錄", "loadingRecords": "請等待，數據正在加載中......", "zeroRecords": "沒有找到記錄", "info": "從 _START_ 到 _END_ 條記錄 總記錄數為 _TOTAL_ 條，第 _PAGE_ 頁 ( 總共 _PAGES_ 頁 )", "infoEmpty": "沒有數據", "infoFiltered": "(從 _MAX_ 條數據中檢索)", "oPaginate": { "processing": "正在查詢中...", "sFirst": "首頁", "sPrevious": "前一頁", "sNext": "后一頁", "sLast": "尾頁" } }, data:tableData, columns: colsDef }); //全選 $('#checkAll').click(function() { $('[name=id]:checkbox').prop('checked', this.checked); }); }, error: function () { alert("請求失敗") } }); }
java后台返回數據
List<數據實體類> list = new ArrayList<TStdataTypeEntity>(); List<列名實體類> listcolu = new ArrayList<TColuEntity>(); Map<String,Object> map = new HashMap<String,Object>(); map.put("data", list);//table數據 map.put("colist", listcolu);//表頭列名 return map; 列名實體類： private String column_en; //列名中文名 對應obj[i].column_en private String column_cn; //列名英文名 對應obj[i].column_cn
看到了一個比較簡單的動態表頭的實現方法 根據需要選擇怎么實現吧 附上鏈接：
https://blog.csdn.net/weixin_40408338/article/details/80900614