数据表行分组答案

【问题标题】：Datatable row grouping数据表行分组
【发布时间】：2016-03-10 16:28:52
【问题描述】：

我有一个正在从文件中检索数据的工作数据表：

我想对行进行分组，如下所示：

https://datatables.net/examples/advanced_init/row_grouping.html

我的目标是让我的数据表看起来像这样，按日期（最后一列）对行进行分组，但即使查看代码，我也很难让它工作。如果可以的话，我需要一些帮助来完成这项工作。

这是我的数据表的代码：

$(document).ready(function() {
         $('#datatable').DataTable( {
         "ajax": "<?php echo base_url()."assets/files/data/data.txt"; ?>" ,
         "columns": [
            { "data": "etat" },
            { "data": "dest" },
            { "data": "message" },
            { "data": "exp" },
            { "data": "date" }
            ],
            "order": [[ 0, "desc" ]],
            "responsive": true
            } );
         } );

【问题讨论】：

你有什么尝试让分组工作？您在帖子中链接的示例显示您需要 "drawCallback" 属性才能进行任何分组。我在您发布的代码中没有看到该属性。
我试过这个属性，但由于某种原因我无法让它工作。反正我做错了什么

标签： javascript jquery datatables

【解决方案1】：

你应该使用drawCallback函数。

试试吧。

$(document).ready(function() {
$('#datatable').DataTable({
"columns": [
        { "data": "etat" },
        { "data": "dest" },
        { "data": "message" },
        { "data": "exp" },
        { "data": "date" },
        { "data": "extra" }
        ],
        "order": [[ 4, "desc" ]],
        "responsive": true,
        drawCallback: function (settings) {
            var api = this.api();
            var rows = api.rows({ page: 'current' }).nodes();
            var last = null;

            api.column(4, { page: 'current' }).data().each(function (group, i) {

                if (last !== group) {

                    $(rows).eq(i).before(
                        '<tr class="group"><td colspan="8" style="BACKGROUND-COLOR:rgb(237, 208, 0);font-weight:700;color:#006232;">' + 'GRUPO ....' + group  + '</td></tr>'
                    );

                    last = group;
                }
            });
        }

});

} );

结果：https://jsfiddle.net/cmedina/7kfmyw6x/13/

【讨论】：

【解决方案2】：

您在通过 PHP 将 url 输出到 Javascript 时似乎遇到了错误。

试试这个：

ajax: "<?php echo base_url() . 'assets/files/data/data.txt'; ?>"

不是 PHP 代码中的单引号。

【讨论】：