Wie verwendet man rowspan und colspan in tbody mit datatable.js?

Question

Immer wenn ich benutze, erhalte ich den folgenden Fehler:

Ungefangener Typerror: Kann Eigenschaft '_DT_CellIndex' von undefiniert nicht setzen (…)

Demo

$("table").DataTable({});

      1
      2
      3
      4
      5
      6

      1
      2
      3
      4
      5
      6

      1
      3 4
      4 5 6

Es funktioniert einwandfrei ohne DataTables.js, aber wenn wir diese Struktur mit datatable.js verwenden, funktioniert es nicht. Wir benötigen die obige Tabellenstruktur. Hat jemand eine Idee, wie wir diese Tabellenstruktur mit datatable.js verwenden können?

Answer 1

Sie können das Fehlen der colspan-Unterstützung umgehen, indem Sie für jede eliminierte Zelle eine "unsichtbare" Zelle hinzufügen:

 Breite Spalte

 Normale Spalte
 Normale Spalte
 Normale Spalte

DataTables beschwert sich nicht, die Tabelle wird normal gerendert und die Sortierung funktioniert (unsichtbare Spalten sortieren als leerer String).

Ich habe dies nicht mit rowspan ausprobiert.

Answer 2

COLSPAN: Ajax- oder JavaScript-Quelldaten

Ausgezeichnete Lösung von Dirk Bergstrom funktioniert nur mit HTML-Quelldaten.

Es ist auch möglich, die gleiche Idee mit Ajax-Quelldaten zu verwenden.

Sie müssen die createdRow-Option verwenden, um erforderliche Zellen zu ändern, wenn das TR-Element im Tabellenkörper erstellt wird.

Zum Beispiel:

var table = $('#example').DataTable({
    ajax: 'https://api.myjson.com/bins/qgcu',
    createdRow: function(row, data, dataIndex){
        // Wenn der Name "Ashton Cox" ist
        if(data[0] === 'Ashton Cox'){
            // Fügen Sie das COLSPAN-Attribut hinzu
            $('td:eq(1)', row).attr('colspan', 3);

            // Verstecke die erforderliche Anzahl von Spalten
            // neben der Zelle mit dem COLSPAN-Attribut
            $('td:eq(2)', row).css('display', 'none');
            $('td:eq(3)', row).css('display', 'none');

            // Aktualisieren der Zellendaten
            this.api().cell($('td:eq(1)', row)).data('N/A');
        }
    }
});

Sehen Sie sich dieses Beispiel für Code und Demonstration an.

Sehen Sie sich den Artikel jQuery DataTables: COLSPAN in table body TBODY - Ajax- Daten für weitere Details an.

ROWSPAN

Es ist möglich, das ROWSPAN-Attribut mithilfe des RowsGroup-Plug-ins zu emulieren.

Um das Plugin zu verwenden, müssen Sie die JavaScript-Datei dataTables.rowsGroup.js einbeziehen und die rowsGroup-Option verwenden, um die Indizes der Spalten anzugeben, auf die Sie die Gruppierung anwenden möchten.

var table = $('#example').DataTable({
   'rowsGroup': [2]
});

Sehen Sie sich dieses Beispiel für Code und Demonstration an.

Sehen Sie sich den Artikel jQuery DataTables: ROWSPAN in table body TBODY für weitere Details an.

COLSPAN und ROWSPAN

Es ist möglich, Zellen sowohl vertikal als auch horizontal gleichzeitig zu gruppieren, wenn wir beide oben beschriebenen Workarounds kombinieren.

Sehen Sie sich dieses Beispiel für Code und Demonstration an.

Sehen Sie sich den Artikel jQuery DataTables: COLSPAN in table body TBODY - COLSPAN und ROWSPAN für weitere Details an.

Answer 3

Wenn Sie scrollX verwenden

 Spalte H
 Spalte H

 Breite Spalte

 123
 Normale Spalte
 Normale Spalte

Geänderte Antwort von #Dirk_Bergstrom

Answer 4

Beziehen Sie sich auf den unten stehenden Link.

fnFakeRowspan

Beziehen Sie sich auch auf das Plugin hier.

fnFakeRowspan plugin

Hoffentlich hilft Ihnen das

Answer 5

Ich weiß nicht genau, an welchem Punkt, aber ich nehme an, dass die fnFakeRowspan die aktuelle DataTable-Version nicht unterstützt.

Als Alternative, schau dir das RowsGroup Plugin an.

Ich fand es ziemlich einfach zu implementieren und es funktioniert gut. Die Suche funktioniert einwandfrei, die Sortierung nicht.

Schau hier für eine Implementierung.