2015-07-01 7 views
4

Как свернуть и развернуть таблицу на основе группировки нескольких столбцов.Как сгруппировать несколько столбцов в jQuery datatables

Например, у меня есть таблица, как этот

--------------------------------------------------------------- 
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, цена, склад, контур

Пожалуйста, помогите мне или дайте мне какое-нибудь предложение или ссылку для справки.

Спасибо

+0

Это звучит как-то, что было бы проще с использованием двух различных таблиц, а также скрытие/отображение таблиц и столбцов в зависимости от взаимодействия пользователя –

ответ

1

Это может быть сделано, как показано в примере Row details.

Хитрость заключалась бы в предварительной обработке данных и выполнении расчетов и группировки с использованием JavaScript перед предоставлением данных в DataTables. Это будет зависеть от того, откуда происходят ваши данные, статической таблицы или запроса 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 
] 
Смежные вопросы