如何按多列分组，jquery数据表

Question

从datatables-row_grouping开始

我有一个业务需求来格式化数据表，其中结果按 2 列分组。

这是我的数据表配置所拥有的，它确实产生了接近我需要的结果，但是我无法获得第二列的值。

下面的 api.column(1 引用第一列，我还需要第二 (2) 列。我尝试了 columns([1, 2] 并希望得到 .each() 的结果数组，但是失败了。

var dtOptions = {
    "dom": '<"clearfix"><"pull-left"l><"pull-right"Bf>r<"horizontal-scroll"t><"pull-left"i><"pull-right"p><"clearfix">',
    "pageLength": 10,
    "paging": true,
    "columnDefs": [
    {
        "targets": groupCols, /// this is an array [1, 2]
        "visible": false
    }],
    "order": [[1, 'asc']],
    "displayLength": 15,
    "drawCallback": function ( settings ) {
        var api = this.api();
        var rows = api.rows( {page:'current'} ).nodes();
        var last = null;

        api.column(1, { page: 'current' }).data().each(function (group, i) {
            if (last !== group) {

                $(rows).eq(i).before(
                    '<tr class="group"><td colspan="3">' + group + '</td><td colspan="14">' + need_second_column_string_here + '</td></tr>'
                );

                last = group;
            }
        });
    }
}

感谢您的帮助。

Answer 1

我想我会分享对我有用的解决方案....见 下面js中的$currTable.rows(rows[i]._DT_RowIndex).data()[0][CommentCol]

var dtOptions = {
    "dom": '<"clearfix"><"pull-left"l<"toolbar">><"pull-right"Bf>r<"horizontal-scroll"t><"pull-left"i><"pull-right"p><"clearfix">',
    "pageLength": 10,
    "paging": false,
    "columnDefs": [
        { "visible": false, "targets": hiddenCols },
        { "orderable": false, "targets": allColumns }
    ],
    "sort": true,
    "order": [[0, 'asc'], [1, 'asc']],
    "displayLength": 15,
    "drawCallback": function (settings) {
        var api = this.api();
        var rows = api.rows({ page: 'current' }).nodes();
        var last = null;

        var CommentCol = -1;

        _.each(api.columns().header(), function (e, i) {
            if(e.innerHTML == "Comments"){
                CommentCol = i;
            }
        })

        api.column(groupByCol, { page: 'current' }).data().each(function (group, i, $currTable) {
            if (last !== group) {

                $(rows).eq(i).before(
                    '<tr class="group"><td class="nowrap" colspan="3">' + buttons + '<div style="margin-right:6px;"><b>Lot:</b> ' + group + '</div></td><td colspan="16"><b>Comments:</b> ' + $currTable.rows(rows[i]._DT_RowIndex).data()[0][CommentCol] + '</td></tr>'
                );

                last = group;
            }
        });
    }
}

也许不优雅....但有效。

Answer 2

您可以破解其他库。值得付出努力吗？？

或者您可以使用制表符。它具有多列分组。

示例：

  //load data as json
    var tableData = [
        {id:1, name:"Billy Bob", age:"12", gender:"male", height:1, col:"red", dob:"", cheese:1},
        {id:2, name:"Mary May", age:"1", gender:"female", height:2, col:"blue", dob:"14/05/1982", cheese:true},
        {id:3, name:"Christine Lobowski", age:"42", height:0, col:"green", dob:"22/05/1982", cheese:"true"},
        {id:4, name:"Brendon Philips", age:"125", gender:"male", height:1, col:"orange", dob:"01/08/1980"},
        {id:5, name:"Margret Marmajuke", age:"16", gender:"female", height:5, col:"yellow", dob:"31/01/1999"},
        {id:6, name:"Billy Bob", age:"12", gender:"male", height:1, col:"red", dob:"", cheese:1},
    ]
    
    var table = new Tabulator("#example-table", {
        height:"311px",
        layout:"fitColumns",
         groupBy:function(data){ 
            return data.gender + " - " + data.age; //groups by data and age
        },
    autoColumns:true,
    });    

    table.setData(tableData);

<script src="https://unpkg.com/tabulator-tables@4.2.7/dist/js/tabulator.min.js"></script>
<link href="https://unpkg.com/tabulator-tables@4.2.7/dist/css/tabulator.min.css" rel="stylesheet"/>


<div id="example-table"></div>

 

---

唯一可以按多列分组的表库是 Tabulator，AFAIK。

这是其他表库。

                   -------- group by  -------
                   single column | multi column  
tabulator       :        yes     | yes           |  
datatables.net  :        yes     | yes           |  
bootstrap-table :        yes     | no            | 
dynatable.js    :        no      | no            | 

tabulator 有 bootstrap ，简单的白色主题：

• 主题概述：http://tabulator.info/docs/4.1/theme
• 实时取景主题：http://tabulator.info/examples/4.1?#theming

阅读更多：

• http://tabulator.info/docs/4.2/group
• https://datatables.net/examples/advanced_init/row_grouping.html
• https://examples.bootstrap-table.com/index.html#extensions/group-by-v2.html