【项目背景】
多个页面具有层级关系，从某个页面的链接点击到下一级别的页面，各个页面的表头不一致，同时要求添加统计信息。
例如有以下三个页面：
#-1-> 学校名称 学生人数
#-2-> 学校名称 年级 学生人数
#-3-> 学校名称 年级 班级 学生人数
【解决思路】
每次ajax刷新去后台取数据后通过绘制把数据显示到DataTable中，每次绘制之前把原先的表格删掉，然后重写表格表头和统计footer。
【参考代码】
table表设定的id为：StuQueryTable
<table class="cell-border compact stripe" style='width:100%'id="StuQueryTable"></table>设置一个函数 getTableData() 用于ajax去后台取数据
成功获取得到的数据dataArray有两部分
dataArray.BodyData -> 表格的主体数据
dataArray.TotalData -> 表格的统计数据
function getTableData() { $.ajax({ data:{}, //要传给后台的数据 type:"post", //以POST的方式传输 url:"QueryServlet", // async: true, //默认（true）ajax是异步执行，这里设置成同步，不然会导致ajax没有执行完就执行下面的代码了 dataType:"json", //返回数据格式为JSON beforeSend: function (){ //写传输之前要做的事情 }, success: function (dataArray) { console.log(dataArray); //绘制表格 drawTable(dataArray); }, error: function (e) { alert("错误！ " + e.status); }, complete: function () { //写完成传输后要做的事情 } }); }当数据成功从后台Servlet返回后去drawTable
首先设定了一个变量curPageRank用于判断当前是哪一级页面
#-1-> 学校名称 学生人数 --> curPageRank = 1
#-2-> 学校名称 年级 学生人数 --> curPageRank = 2
#-3-> 学校名称 年级 班级 学生人数 --> curPageRank = 3
然后设定三个变量分别对应需要改变的东西
//设定不同的表格，因为footer需要对应固定数目的<th> var tableFrame; //设定不同的表格列渲染 var columns; //设定不同的footcallback函数，渲染相应的footer var footCallBack;ex. curPageRank==1
#------tableFrame--------
需要注意的是如果使用footer需要添加对应的<th>才能正常显示
例如第一级的表有两个字段分别是学校名称、学生人数，就需要添加两个<th>
<table class="cell-border compact stripe" style='width:100%'id="StuQueryTable"> <tfoot> <tr> <th></th> <th></th> </tr> </tfoot> </table>#------columns--------
写具体的渲染列数据，data对应JSON中的key值，title则是表头要显示的字符串
columns = [ {"data": "学校名称",title:"学校名称"}, {"data": "学生人数",title:"学生人数"} ];#------footCallBack--------
首先取到后台的统计数据保存到totalJsonObj中，然后找到表格tfoot的th，一个一个通过$th.eq(index)进行赋值。
footCallBack = function (tfoot, data, start, end, display) { var totalJsonObj = dataArray.TotalData; //从后台传过来的JSON取出统计数据 var $th = $('tfoot').find('th'); //找到表格foot的th $th.eq(0).html(TotalData['学校名称']); //赋值：学校名称是JSON对象的key值 $th.eq(1).html(TotalData['学生总人数']); //同上赋值 };每次渲染之前要删掉之前的table结构
注意取id的时候需要在原有表格id上添加 _wrapper 才有效。
$("div#StuQueryTable_wrapper").remove();添加新的表头到<body>中，也可以添加到某个<div>后面
$("body").append(tableFrame);初始化DataTable
$("#StuQueryTable").DataTable({ "paging": false, "info": false, "language":{ "zeroRecords": "抱歉，无数据，请重新查询！", "lengthMenu": "每页显示_MENU_条", "paginate": { "next": "下一页", "previous": "上一页" }, "searching": false, "destroy": true, "data": dataArray.BodyData, "columns": columns, //根据不同的页面设定不同的列数据 //合计数据 "footerCallback": footCallBack //根据不同的页面返回不同的footCallBack函数 });完整代码：
function drawTable(dataArray){ //首先删除已有表格 $("div#StuQueryTable_wrapper").remove(); //设定不同的表格，因为footer需要对应固定数目的<th> var tableFrame; //设定不同的表格列渲染 var columns; //设定不同的footcallback函数，渲染相应的footer var footCallBack; //根据不同的页面级别，渲染不同的页面 // 1级页面表头：学校名称 学生人数 if(curPageRank == 1){ tableFrame = " <table class=\"cell-border compact stripe\" style='width:100%'id=\"StuQueryTable\">\n" + " <tfoot>\n" + " <tr>\n" + " <th></th>\n" + " <th></th>\n" + " </tr>\n" + " </tfoot>\n" + " </table>"; columns = [ {"data":"学校名称", title:"学校名称"}, {"data": "学生人数",title:"学生人数"} ]; footCallBack = function (tfoot, data, start, end, display) { var totalJsonObj = dataArray.TotalData; var $th = $('tfoot').find('th'); $th.eq(0).html(totalJsonObj['学校名称']); $th.eq(1).html(totalJsonObj['学生总人数']); }; } //2级页面表头：学校名称 年级 学生人数 if(curPageRank == 2){ tableFrame = " <table class=\"cell-border compact stripe\" style='width:100%'id=\"StuQueryTable\">\n" + " <tfoot>\n" + " <tr>\n" + " <th></th>\n" + " <th></th>\n" + " <th></th>\n" + " </tr>\n" + " </tfoot>\n" + " </table>"; columns = [ {"data": "学校名称", title: "学校名称"}, {"data": "年级",title: "年级"}, {"data": "学生人数",title:"学生人数"} ]; footCallBack = function (tfoot, data, start, end, display) { var totalJsonObj = dataArray.TotalData; var $th = $('tfoot').find('th'); $th.eq(0).html(totalJsonObj['学校名称']); $th.eq(1).html(totalJsonObj['年级']); $th.eq(2).html(totalJsonObj['总学生人数']); }; } //3级页面表头：学校名称 年级 班级 学生人数 if(curPageRank == 3){ tableFrame = " <table class=\"cell-border compact stripe\" style='width:100%'id=\"StuQueryTable\">\n" + " <tfoot>\n" + " <tr>\n" + " <th></th>\n" + " <th></th>\n" + " <th></th>\n" + " <th></th>\n" + " </tr>\n" + " </tfoot>\n" + " </table>"; columns = [ {"data": "学校名称", title: "学校名称"}, {"data": "年级",title: "年级"}, {"data": "班级",title: "班级"}, {"data": "学生人数",title:"学生人数"} ]; footCallBack = function (tfoot, data, start, end, display) { var totalJsonObj = dataArray.TotalData; var $th = $('tfoot').find('th'); $th.eq(0).html(totalJsonObj['学校名称']); $th.eq(1).html(totalJsonObj['年级']); $th.eq(2).html(totalJsonObj['班级']); $th.eq(3).html(totalJsonObj['学生总人数']); }; } //重新生成的表头添加到<body>中 $("body").append(tableFrame); $("#StuQueryTable").DataTable({ "paging": false, "info": false, "language":{ "zeroRecords": "抱歉，无数据，请重新查询！", "lengthMenu": "每页显示_MENU_条", "paginate": { "next": "下一页", "previous": "上一页" }, "searching": false, "destroy": true, "data": dataArray.BodyData, "columns": columns, //根据不同的页面设定不同的列数据 //合计数据 "footerCallback": footCallBack //根据不同的页面返回不同的footCallBack函数 }); }
