Question

开始

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

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

api.column（下面的1引用第一列，我也需要第二列（2）。我尝试了列（[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

以为我会分享对我有用的解决方案....看 $ currTable.rows（rows [i] ._ DT_RowIndex）.data（）[0] [CommentCol]在js下面

{{1}}

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

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>

唯一可以按多列进行分组的表库是制表符AFAIK。

这是其他表库。

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

制表符具有bootstrap，简单的白色主题：

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

了解更多：

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

2 个答案: