webentwicklung-frage-antwort-db.com.de

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

Immer wenn ich <td colspan="x"></td> verwende, erhalte ich folgende Fehlermeldung:

Nicht erfasster TypeError: Die Eigenschaft '_DT_CellIndex' von undefined (…) kann nicht festgelegt werden.

Demo

$("table").DataTable({});
<link href="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.12/css/jquery.dataTables.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.12/js/jquery.dataTables.min.js"></script>

<table style="width:50%;">
  <thead>
    <tr>
      <th>1</th>
      <th>2</th>
      <th>3</th>
      <th>4</th>
      <th>5</th>
      <th>6</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
      <td>6</td>
    </tr>
    <tr>
      <td>1</td>
      <td colspan="2">3 4</td>
      <td colspan="3">4 5 6</td>
    </tr>
  </tbody>
</table>

Ohne DataTables.js funktioniert es ordnungsgemäß, aber wenn wir diese Struktur mit datatable.js verwenden, funktioniert es nicht. Wir brauchen über Tabellenstruktur. Hat jemand eine Idee, wie wir diese Tabellenstruktur datatable.js verwenden können?

javascriptjquerydatatables
27
krutssss

Sie können die mangelnde Colspan-Unterstützung umgehen, indem Sie für jede Zelle, die entfernt wird, eine "unsichtbare" Zelle hinzufügen:

<tr>
 <td colspan="3">Wide column</td>
 <td style="display: none;"></td>
 <td style="display: none;"></td>
</tr>
<tr>
 <td>Normal column</td>
 <td>Normal column</td>
 <td>Normal column</td>
</tr>

DataTables beschwert sich nicht, die Tabelle stellt normal dar und das Sortieren funktioniert (unsichtbare Spalten sortieren als leere Zeichenfolge).

Ich habe das nicht mit Rowspan versucht.

68
Dirk Bergstrom

Momentan unterstützen Datenbänke keine Zeilen- oder Spaltenbereiche für den Tabellenkörper.

Referenz

Die mögliche Lösung sollte jedoch sein

Beispiel für ausgeblendete Zeilen in DataTables

Hoffe, es funktioniert.

4
Pupil

COLSPAN: Daten aus Ajax- oder JavaScript-Quellen

Die ausgezeichnete Lösung von Dirk Bergstrom funktioniert nur mit HTML-Daten.

Es ist auch möglich, dieselbe Idee mit Daten aus Ajax-Quellen zu verwenden. 

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

Zum Beispiel:

var table = $('#example').DataTable({
    ajax: 'https://api.myjson.com/bins/qgcu',
    createdRow: function(row, data, dataIndex){
        // If name is "Ashton Cox"
        if(data[0] === 'Ashton Cox'){
            // Add COLSPAN attribute
            $('td:eq(1)', row).attr('colspan', 3);

            // Hide required number of columns
            // next to the cell with COLSPAN attribute
            $('td:eq(2)', row).css('display', 'none');
            $('td:eq(3)', row).css('display', 'none');

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

Siehe dieses Beispiel für Code und Demonstration.

Weitere Informationen finden Sie in jQuery DataTables: COLSPAN im Tabellenkörper TBODY - Ajax data .

ROWSPAN

Es ist möglich, das ROWSPAN-Attribut mit dem RowsGroup -Plug-In zu emulieren.

Um das Plugin verwenden zu können, müssen Sie die JavaScript-Datei dataTables.rowsGroup.js einschließen und die Option rowsGroup verwenden, um Indizes der Spalten anzugeben, auf die die Gruppierung angewendet werden soll.

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

Siehe dieses Beispiel für Code und Demonstration.

Weitere Informationen finden Sie in jQuery DataTables: ROWSPAN im TBODY -Text des Artikels.

COLSPAN und ROWSPAN

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

Siehe dieses Beispiel für Code und Demonstration.

Weitere Informationen finden Sie in jQuery DataTables: COLSPAN im Tabellenkörper TBODY - COLSPAN und ROWSPAN .

2
Gyrocode.com

Ich weiß nicht, an welchem ​​Punkt, aber ich glaube, der FnFakeRowspan unterstützt die aktuelle DataTable-Version nicht. 

Für eine Alternative checkout RowsGroup plugin.

Fand es ziemlich einfach zu implementieren und funktioniert gut. Die Suche funktioniert perfekt, die Bestellung nicht.

Überprüfen Sie hier für eine Implementierung.

0
Bharat Geleda

Wenn Sie scrollX verwenden

<thead>
<tr>
 <th style="width: 20px;"></th>
 <th>column H</td>
 <th>column H</td>
</tr>
</thead>
<tbody>
<tr>
 <td colspan="3">Wide column</td>
 <td style="display: none;"></td>
 <td style="display: none;"></td>
</tr>
<tr>
 <td>123</td>
 <td>Normal column</td>
 <td>Normal column</td>
</tr>
</tbody>

Geänderte Antwort von #Dirk_Bergstrom

0
Malik Zahid

Da datatables Colspan nicht unterstützt, benutze ich normalerweise ungeordnete Listen (ul) mit Listenstil: none;

hier ist das Ergebnis

0
puntodamar

Siehe unten.

fnFakeRowspan

Verweisen Sie auch hier auf das Plugin.

fnFakeRowspan Plugin

Hoffe, das wird dir helfen

0
Casperon