如何在 jquery 数据表中对多列进行分组答案

【问题标题】：How to group multiple columns in jquery datatables如何在 jquery 数据表中对多列进行分组
【发布时间】：2015-09-18 10:59:01
【问题描述】：

如何根据多列分组折叠和展开表格。

例如我有这样的表

---------------------------------------------------------------
location   |   size   | cont_no |   price  |  depot  |  cond  |
---------------------------------------------------------------
   USA     |    XX    |   123   |    230   |   SED   |    LK  |
   USA     |    YY    |   343   |    330   |   ASD   |    HK  |
   UAE     |    XX    |   233   |    230   |   SED   |    LK  |
   IND     |    ZZ    |   123   |    230   |   SAD   |    FK  |
   IND     |    XX    |   213   |    430   |   ASD   |    KK  |
   IND     |    YY    |   433   |    870   |   GFD   |    FK  |
   USA     |    YY    |   865   |    230   |   SED   |    LK  |
   UAE     |    XX    |   976   |    430   |   SED   |    HK  |
   USA     |    ZZ    |   342   |    230   |   CCD   |    HK  |
   UAE     |    XX    |   132   |    445   |   SED   |    KK  |
   UAE     |    ZZ    |   064   |    323   |   YYD   |    LK  |
   IND     |    YY    |   452   |    130   |   ITG   |    HK  |
---------------------------------------------------------------

这就是我需要对上表进行分组的方式

  -------------------------------
    location |  XX  |  YY  |  ZZ  |
    -------------------------------
       UAE   |   3  |   0  |   1  |
       USA   |   1  |   2  |   1  |
       IND   |   1  |   2  |   1  |
    -------------------------------

我想根据位置和大小列进行分组，例如：美国有 3 个 XX 和 0 个 YY 和 1 个 ZZ，

然后，当我单击要展开的行并显示那些 3 XX 和 0 YY 和 1 ZZ 其他四列 cont_no、price、depot、cond

请有人帮助我或给我一些建议或链接以供参考。

谢谢

【问题讨论】：

这听起来像是使用两个不同的表格会更容易，并根据用户交互隐藏/显示表格和列

标签： javascript jquery datatables datatables-1.10

【解决方案1】：

我想这就是你想要做的！

检查以下问题和答案

DataTables hidden row details example - the table header is misplaced (test case attached)

JSFIDDLE Sample 1

JSFIDDLESample 2

【讨论】：

【解决方案2】：

可以如Row details 示例所示完成。

诀窍是在将数据提供给 DataTables 之前预处理数据并使用 JavaScript 执行计算和分组。这取决于您的数据来自哪里，静态表或 Ajax 请求。如果您在服务器上生成数据，也可以在服务器端完成。

基本上JSON格式的结果数据可以如下所示。这将简化 DataTables 中子行的处理。

[
   { 
      "location": "UAE",
      "XX": 2,
      "YY": 0,
      "ZZ": 1,
      "details": [
         ["UAE","XX","123","230","SED","LK"],
         // more records for the same location
      ]
   },
   // more locations
]

【讨论】：

【解决方案3】：

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

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

示例：

  //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
bootstrap-table :        yes     | no
datatables.net  :        yes     | no
dynatable.js    :        no      | no

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

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

阅读更多：

【讨论】：