【DataTable】行折叠与展开问题记录

最新推荐文章于 2022-08-17 16:50:22 发布

爱吃香草冰淇淋的阿喵

最新推荐文章于 2022-08-17 16:50:22 发布

阅读量5k

点赞数

分类专栏： Java程序文章标签： datatable 行折叠展开 ajax

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

版权

Java程序专栏收录该内容

20 篇文章 0 订阅

订阅专栏

官网行折叠的例子：http://www.datatables.club/example/user_share/row_details.html

#-1> 初始版本：

<table>的初始结构放在<body>里，

通过ajax从后台Servlet取数据，根据某个下拉框查询刷新表格数据

每一次刷新会触发drawTable()函数

function drawTable(dataArray) {
    var table = $('#example').DataTable({
        "columnDefs": [
                    {
                        //第一列不可查询、不可排序
                        "searchable": false,
                        "orderable": false,
                        "targets": 0
                    },
                    {
                        //设置默认值
                        "defaultContent": "",
                        "targets": "_all"
                    }
                ],
                "info": false,
                "order": [[4, 'desc']],
                "language": {
                    "zeroRecords": "抱歉，无数据，请重新查询！",
                    "lengthMenu": "每页显示_MENU_条",
                    "paginate": {
                        "next": "下一页",
                        "previous": "上一页"
                    },
                    "info": "总共_TOTAL_条数据，目前显示的是第_START_到_END_条",
                    "thousands": ","
                },
                "searching": false,
                "destroy": true,

                scrollX: false,
                scrollY: '80vh',
                scrollCollapse: true,
                paging: false,

                "data": dataArray.BodyData,
                "columns": [
                    {
                        "className": 'details-control',
                        "orderable": false,
                        "data": null,
                        "defaultContent": ''
                    },
                    {"data": "name"},
                    {"data": "district"},
                    {"data": "data1"},
                    {"data": "data2"}
                ]
            });

            // Add event listener for opening and closing details
            $('#example tbody').on('click', 'td.details-control', function () {
                var tr = $(this).closest('tr');
                var row = table.row(tr);

                if (row.child.isShown()) {
                    // This row is already open - close it
                    row.child.hide();
                    tr.removeClass('shown');
                }
                else {
                    // Open this row
                    row.child(format(row.data())).show();
                    tr.addClass('shown');
                }
            });
        }

返回行折叠内容的函数format(d)，d 是行折叠要显示的内容

function format(d) {
    // `d` is the original data object for the row
    return '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">' +
        '<tr>' +
        '<td>Full name:</td>' +
        '<td>' + d.name+ '</td>' +
        '</tr>' +
        '<tr>' +
        '<td>Extra info:</td>' +
        '<td>And any further details here (images etc)...</td>' +
        '</tr>' +
        '</table>';
    }

运行结果：

初始化加载的时候没有问题，点开再关闭都是正确的

第二次ajax刷新加载完毕、第三次刷新加载完毕......第N次加载完毕的时候，再点击展开跟折叠的时候，突然出现了以下报错：

而且同一页面还出现，第一行可以点开，第二行、第三行点不开的情况：

对每一行点击事件输出当前行内容，data1、data2、data3分别是第一次ajax刷新、第二次、第三次刷新后点击的结果

从图中可以看到虽然表格重新刷新了，但是前面ajax刷新的数据没有清掉。

#-2> 初始解决思路：

每次drawtable之前，把table数据全部清空，但是希望保留表结构

var table = $('#example').DataTable();
table.clear().draw();

参考：

http://datatables.club/reference/api/clear().html

https://www.cnblogs.com/xiashengwang/p/4182494.html

运行结果：初始化加载的时候没有问题，到第二次ajax刷新就开始报错，并且没有任何行数据的输出

#-3> 正确的解决办法：remove

在重绘table之前删除已有表格，加上以下语句： $("div#example_wrapper").remove(); 完美解决！！

function drawTable(dataArray) {
    //首先删除已有表格
    $("div#example_wrapper").remove();
    // 表格框架
    var tableFrame = "<table id=\"example\" class=\"cell-border compact stripe\" style=\"width:100%\">\n" + 【tableFrame】+"</table>";
    //重新生成的表头添加到<body>中
    $("body").append(tableFrame);

    var table = $('#example').DataTable({
       //和上面一致
    });

    // Add event listener for opening and closing details
    $('#example tbody').on('click', 'td.details-control', function () {
        var tr = $(this).closest('tr');
        var row = table.row(tr);

        if (row.child.isShown()) {
            // This row is already open - close it
            row.child.hide();
            tr.removeClass('shown');
        }
        else {
            // Open this row
            row.child(format(row.data())).show();
            tr.addClass('shown');
        }
    });
}

爱吃香草冰淇淋的阿喵

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
2
评论
【DataTable】行折叠与展开问题记录

官网行折叠的例子：http://www.datatables.club/example/user_share/row_details.html#-1> 初始版本：<table>的初始结构放在<body>里，通过ajax从后台Servlet取数据，根据某个下拉框查询刷新表格数据每一次刷新会触发drawTable()函数function drawTa...
复制链接

扫一扫