So gruppieren Sie mehrere Spalten in jquery datatables

Wie zu reduzieren und erweitern Sie die Tabelle nach mehreren Spalten gruppieren.

Ich habe zum Beispiel-Tabelle wie diese

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

Dies ist, wie ich, müssen Sie zur Gruppe der obigen Tabelle

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

Ich möchte die Gruppe auf der Grundlage von Lage und Größe der Spalte, ZB: USA hat 3 XX und 0 JJ und 1 ZZ,

Und wenn ich dann auf die Zeile ich will, zu erweitern und zeigen die 3, XX und 0 JJ und 1 ZZ vier anderen Spalte cont_no, Preis, depot, cond

bitte jemand mir helfen, oder mir einen Vorschlag machen oder einen link zur Referenz.

Danke

  • Das klingt wie etwas, das wäre einfacher mit zwei verschiedenen Tabellen, und verbergen/anzeigen von Tabellen und Spalten, die abhängig von der Benutzer-Interaktion
InformationsquelleAutor Jonathan John | 2015-07-01
  1. 1

    Ich denke, das ist das, was Ihr versucht zu machen !

    überprüfen Sie die folgende Frage und Antwort

    DataTables ausgeblendete Zeile-details Beispiel - in der Kopfzeile der Tabelle ist falsch (test-case angehängt)

    JSFIDDLE Beispiel 1

    JSFIDDLE Beispiel 2

    InformationsquelleAutor Munna Babu
  2. 1

    Es könnte getan werden, wie gezeigt in Zeile details Beispiel.

    Den trick wäre die pre-Prozess der Daten und die Berechnungen durchzuführen und die Gruppierung mit JavaScript, bevor er die Daten in Datentabellen. Dies hängt davon ab, wo Ihre Daten kommt, statische Tabelle oder Ajax-request. Wenn Sie die Herstellung der Daten auf dem server, dies könnte getan werden, server-Seite als auch.

    Grundsätzlich der Ergebnis-Daten im JSON-format könnte wie unten gezeigt. Das vereinfacht die Arbeit mit untergeordneten Zeilen, die in Datentabellen.

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

    können Sie hack Ihren Weg durch die anderen libs. wird lohnt sich der Aufwand??.

    oder verwenden Sie Tabulator. das hat mehrere Spalte gruppieren.

    Beispiel :

    JS:

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

    HTML:

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

    nur die Tabelle lib, die kann Gruppe von multi col ist Tabulator, AFAIK.

    hier sind die andere Tabelle libs. 

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

    tabulator hat bootstrap , einfaches weißes theme:

    Lesen Sie mehr:

    InformationsquelleAutor bh_earth0
Schreibe einen Kommentar