javascript 如何在 jquery 数据表中对多列进行分组
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/31158732/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to group multiple columns in jquery datatables
提问by Jonathan John
How to collapse and expand the table based on multiple columns grouping.
如何基于多列分组折叠和展开表格。
For example I have table like this
例如我有这样的桌子
---------------------------------------------------------------
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 |
---------------------------------------------------------------
This is how I need to group the above table
这就是我需要对上表进行分组的方式
-------------------------------
location | XX | YY | ZZ |
-------------------------------
UAE | 3 | 0 | 1 |
USA | 1 | 2 | 1 |
IND | 1 | 2 | 1 |
-------------------------------
I want to group based on location and size column, Eg: USA has 3 XX and 0 YY and 1 ZZ,
我想根据位置和大小列进行分组，例如：美国有 3 XX 和 0 YY 和 1 ZZ，
And then when i click the row i want to expand and show those 3 XX and 0 YY and 1 ZZ other four column cont_no, price, depot, cond
然后当我单击要展开的行并显示那些 3 XX 和 0 YY 和 1 ZZ 其他四列 cont_no, price, depot, cond
please someone help me or give me some suggestion or link for reference.
请有人帮助我或给我一些建议或链接以供参考。
Thank you
谢谢
采纳答案by Munna Babu
I think this is what your trying to make !
我想这就是你想要做的！
check the following question and answer
检查以下问题和答案
DataTables hidden row details example - the table header is misplaced (test case attached)
DataTables 隐藏行详细信息示例 - 表头错位（附测试用例）
JSFIDDLE Sample 1
JSFIDDLE示例 1
JSFIDDLE Sample 2
JSFIDDLE示例 2
回答by Gyrocode.com
It could be done as shown in Row detailsexample.
可以按照行详细信息示例中所示完成。
The trick would be to pre-process the data and perform the calculations and grouping with JavaScript before giving data to DataTables. This would depend on where your data comes from, static table or Ajax request. If you're producing the data on the server, this could be done server-side as well.
诀窍是在将数据提供给 DataTables 之前预处理数据并使用 JavaScript 执行计算和分组。这取决于您的数据来自哪里，静态表或 Ajax 请求。如果您在服务器上生成数据，这也可以在服务器端完成。
Basically the result data in JSON format could be as shown below. This will simplify working with child rows in DataTables.
基本上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
]
回答by bh_earth0
you can hack your way through other libs. will it worth the effort??.
你可以通过其他库来破解你的方式。值得付出努力吗？？
or you can use Tabulator. which has multi column grouping.
或者你可以使用Tabulator。它具有多列分组。
example :
例子 ：
//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/[email protected]/dist/js/tabulator.min.js"></script>
<link href="https://unpkg.com/[email protected]/dist/css/tabulator.min.css" rel="stylesheet"/>
<div id="example-table"></div>
the only table lib that can group by multi col is Tabulator, AFAIK.
唯一可以按多列分组的表库是 Tabulator，AFAIK。
here are the other table libs.
这是其他表库。
-------- group by -------
single column | multi column
tabulator : yes | yes
bootstrap-table : yes | no
datatables.net : yes | no
dynatable.js : no | no
tabulator has bootstrap , simple white theme:
tabulator 有 bootstrap ，简单的白色主题：
- theme overview : http://tabulator.info/docs/4.1/theme
- live view themes : http://tabulator.info/examples/4.1?#theming
read more:
阅读更多：
