DataTable动态表头

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){
                $("#colTr").html((function (cols){
                    var html = "";
                    var colsNameCN;
                    for(var i=0;i<cols;i++){ 
                         //alert(obj[i].column_cn);
//                        第一列列名返回CheckBox
//                        if(i==0){
//                             colsNameCN=obj[i].column_cn;
//                                 var html1=""
//                                html1 += "<label class='position-relative'>";
//                                html1 += "<input type='checkbox' id='checkAll' class='ace' />";
//                                html1 += "<span class='lbl'></span>";
//                                 html+= $("<th width='5%' ></th>").append(html1).prop("outerHTML");
//                        }else{
                             colsNameCN=obj[i].view_name_cn;
                             var html1=""
                             if(colsNameCN.length>15){
                             html1 += "<span title='"+colsNameCN+"'>"+ colsNameCN.substr(0, 14) + "...</span>";
                             html += $("<th></th>").append(html1).prop("outerHTML");
                             }else{
                             html += $("<th></th>").append(colsNameCN).prop("outerHTML");

                         }
//                        }
                    }    
                     
                     return html;
                })(cols));    
            }
//            第一列数据返回为CheckBox            
//            if(cols>0){
//                    for(var i=0;i<cols;i++){
//                        var colsNameEN;
//                        if(i==0){
//                            colsNameEN=obj[i].column_en;
//                            alert(colsNameEN);
//                            colsDef.push((function (colsNameEN){
//                                var colItem = {
//                                        data:colsNameEN,
//                                        render: function( data, type, full, meta ) {
//                                            if (data) {
//                                                var html = "<label class='position-relative' >";
//                                                html += "<input type='checkbox' name='id' class='ace' value='"+data+"'/>";
//                                                html += "<span class='lbl' ></span>";
//                                                return html;
//                                            } else {
//                                                return "";
//                                            }
//                                        }
//                                }
//                                return colItem;
//                            })(colsNameEN));
//                        }else{
//                            colsNameEN=obj[i].column_en;
//                            colsDef.push((function (colsNameEN){
//                                var colItem = {
//                                        data:colsNameEN,
//                                        render: function( data, type, full, meta ) {
//                                            if(data){
//                                                 return data;
//                                            }else{
//                                                 return "";
//                                            }
//                                        }
//                                }
//                                return colItem;
//                            })(colsNameEN));
//                        }
//                }
//            }
            
            if(cols>0){
                for(var i=0;i<cols;i++){
                    var colsNameEN;
                        colsNameEN=obj[i].column_en;
                        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

猜你喜欢

转载自blog.csdn.net/qq_27815133/article/details/80817428
今日推荐