基于datetable动态表头以及操作列的一些操作

一.页面代码

<div >
            <table id="dataTable"  >
     
            </table>
        </div>

二.js代码

$(function() {

    var dataSet;  //定义表格数据接口
    var columns; //定义表头接受

    //ajax请求接口返回的表头和表格数据
    $.ajax({
        data: {startTime:$("#startTime").val(), endTime:$("#endTime").val(),seriaNum:seriaNum},
        url: ctx+'/test/test1.json',
        datatype: "json",
        async: false,
        type: 'post',
        success: function (data) {
            if(data!=null){
                dataSet=data.data;
                columns = data.colist;
            }
        }
    });

    //构建表格
    $('#dataTable').DataTable( {

        destroy:true,//销毁表格结构这个是重点
        scrollX: true,
        scrollCollapse: true,
        bProcessing: true,
        data: dataSet, //填充表格数据
        columns : columns,  //填充表头数据
        "rowCallback": function (row,data,index) {
             if (index % 2 == 0) {//隔行变色
                   $(row).css("background", "#F5F5F5");
               }
           },
        aoColumnDefs:[//设置列的属性，此处设置第一列不排序
            {"bSortable": false, "aTargets": [0]},{ "class": "tn", "targets": [ 0 ] },

            //最后一列的操作列
            {
                "targets": -1,
                "class": "but_xq",
                "data": null,
                "bSortable": false,
                 "render": function ( data, type, full, meta ) {    //根据条件选择性展示最后操作列
                        debugger;
                        var firstitem = data[0];
                        if(firstitem != "")
                            {
                             return "<p>&nbsp;&nbsp;&nbsp;&nbsp;<a id=\"mingxiInfo\"  href=\"#\">查看明细</a></p>"
                            }
                    },
                
            } 
        ],
    } );

$('a#mingxiInfo').click(function () {
            var data = $('#dataTable').DataTable().row($(this).parents('tr')).data();
            var sign = data[1];
            var serialNum =data[0];
            alert(sign );
            alert(serialNum );
         } );

});

三.后台返回的表头数据和表格数据。按照所给的格式返回即可

var columns=[
        {"title":"姓名"},
        {"title":"班级"},
        {"title":"学号"},
        {"title":"性别"}，{"title":"明细"}]

var dataSet=[
         ['张三','初一七班','222','女'],

          ['李四','初一七班','333','女'],

           ['王五','初一七班','444','女']]

java数据组装参考：

        Map<String,Object> map = new HashMap<String,Object>();
        map.put("data", listcoluAll);//table数据
        map.put("colist", list);//表头列名
        return map;