【DataTable】动态根据ajax刷新修改表头和底部统计footer

最新推荐文章于 2021-12-23 11:23:04 发布

爱吃香草冰淇淋的阿喵

最新推荐文章于 2021-12-23 11:23:04 发布

阅读量2.8k

点赞数 1

分类专栏： Java程序 projects 文章标签： datatable ajax 动态修改

本文链接：https://blog.csdn.net/coralime/article/details/90483040

版权

Java程序同时被 2 个专栏收录

20 篇文章 0 订阅

订阅专栏

projects

11 篇文章 0 订阅

订阅专栏

【项目背景】

多个页面具有层级关系，从某个页面的链接点击到下一级别的页面，各个页面的表头不一致，同时要求添加统计信息。

例如有以下三个页面：

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