【DataTable】動態根據ajax刷新修改表頭和底部統計footer

【項目背景】

多個頁面具有層級關係，從某個頁面的鏈接點擊到下一級別的頁面，各個頁面的表頭不一致，同時要求添加統計信息。

例如有以下三個頁面：

#-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函數
    });
}

【DataTable】動態根據ajax刷新修改表頭和底部統計footer

form表單提交帶參數的兩種方式

【JQuery】日期小插件使用問題小結

【Java】讀寫文件

【Demo】文件下載操作（console版和web版）

【DataTable】動態根據ajax刷新修改表頭和底部統計footer

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結