Come usare rowspan e colspan in tbody usando datatable.js?

Ogni volta che uso

, ottengo il seguente errore:

Uncaught TypeError: imansible impostare la proprietà ‘_DT_CellIndex’ di undefined (…)

dimostrazione

 $("table").DataTable({}); 
    
1 2 3 4 5 6
1 2 3 4 5 6
1 3 4 4 5 6

Funziona correttamente senza DataTables.js, ma quando usiamo questa struttura con datatable.js non funziona. Abbiamo bisogno della struttura della tabella sopra. Qualcuno ha idea di come possiamo usare questa struttura di tabella datatable.js?

Puoi aggirare la mancanza di supporto di colspan aggiungendo una cella “invisibile” per ogni cella eliminata:

  Wide column     Normal column Normal column Normal column  

DataTables non si lamenta, la tabella esegue il rendering normalmente e l’ordinamento funziona (le colonne invisibili vengono ordinate come stringa vuota).

Non ho provato questo con rowspan.

Al momento, i datatables non supportano rowspan o colspan sul corpo della tabella.

Riferimento

Ma la soluzione ansible dovrebbe essere

Esempio di dettagli di riga nascosta DataTables

Spero funzioni.

COLSPAN: dati originari Ajax o JavaScript

L’eccellente soluzione fornita da Dirk Bergstrom funziona solo con i dati di origine HTML.

È anche ansible utilizzare la stessa idea con i dati di origine Ajax.

È necessario utilizzare l’ opzione createdRow per modificare le celle richieste quando l’elemento TR viene creato nel corpo della tabella.

Per esempio:

 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'); } } }); 

Vedi questo esempio per codice e dimostrazione.

Vedi jQuery DataTables: COLSPAN nel corpo della tabella TBODY – Articolo di dati Ajax per ulteriori dettagli.

ROWSPAN

È ansible emulare ROWSPAN attributo ROWSPAN utilizzando il plug-in RowsGroup .

Per utilizzare il plug-in, è necessario includere il file JavaScript dataTables.rowsGroup.js e utilizzare rowsGroup opzione rowsGroup per indicare gli indici delle colonne in cui si desidera applicare il raggruppamento.

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

Vedi questo esempio per codice e dimostrazione.

Vedi jQuery DataTables: ROWSPAN nell’articolo TBODY del corpo della tabella per ulteriori dettagli.

COLSPAN e ROWSPAN

È ansible raggruppare le celle sia verticalmente che orizzontalmente simultaneamente se combiniamo entrambi i metodi descritti sopra.

Vedi questo esempio per codice e dimostrazione.

Vedi jQuery DataTables: COLSPAN nell’articolo TBODY della tabella – COLSPAN e ROWSPAN per ulteriori dettagli.

Fare riferimento al link sottostante.

fnFakeRowspan

Vedi anche il plugin qui.

fnFakeRowspan plugin

Spero che questo ti possa aiutare

Non so a che punto, ma suppongo che fnFakeRowspan non supporti la versione DataTable corrente.

Per un’alternativa, controlla il plugin RowsGroup .

Trovato abbastanza facile da implementare e funziona bene. La ricerca funziona perfettamente, l’ordine no.

Controlla qui per un’implementazione.

Dato che i datatables non supportano colspan, in genere mi sono ritrovato a utilizzare elenchi non ordinati (ul) con stile elenco: nessuno;

ecco il risultato