如何在jquery數據表中對多個列進行分組

Question

如何基於多列分組折疊和展開表。

例如，我有這樣的表

---------------------------------------------------------------
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  |
    -------------------------------

我想基於位置和大小列進行分組，例如：USA有3個XX和0個YY和1個ZZ，

然后當我點擊我要展開的行並顯示那些3 XX和0 YY和1 ZZ其他四列cont_no，價格，倉庫，cond

請有人幫助我或給我一些建議或鏈接以供參考。

謝謝

Answer 1

它可以按行詳細信息示例中所示完成。

訣竅是在向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
]

Answer 2

我想這就是你想要做的！

檢查以下問題和答案

DataTables隱藏行詳細信息示例 - 表頭放錯位置（連接測試用例）

JSFIDDLE 示例1

JSFIDDLE 示例2

Answer 3

你可以通過其他庫來破解你的方式。 值得努力嗎？

或者你可以使用Tabulator 。 它有多列分組。

例如：

  //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> 

---

可以按多列分組的唯一表lib是Tabulator，AFAIK。

這是其他表庫。

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

制表工具有引導程序，簡單的白色主題：

• 主題概述： 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