web-dev-qa-db-fra.com

Comment utiliser rowspan et colspan dans tbody en utilisant datatable.js?

Chaque fois que j'utilise <td colspan="x"></td>, j'obtiens l'erreur suivante:

Uncaught TypeError: impossible de définir la propriété '_DT_CellIndex' sur undefined (…)

Démo

$("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>

Cela fonctionne correctement sans DataTables.js, mais lorsque nous utilisons cette structure avec datatable.js, cela ne fonctionne pas. Nous avons besoin de la structure ci-dessus. Quelqu'un at-il une idée de la façon dont nous pouvons utiliser cette structure de table datatable.js?

javascriptjquerydatatables
27
krutssss

Vous pouvez corriger le manque de prise en charge de colspan en ajoutant une cellule "invisible" pour chaque cellule éliminée:

<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 ne se plaint pas, la table est rendue normalement et le tri est effectué (les colonnes invisibles sont classées comme une chaîne vide).

Je n'ai pas essayé avec RowSpan.

68
Dirk Bergstrom

À l'heure actuelle, les tables de données ne prennent pas en charge rowpan ou colspan dans le corps de la table.

Référence

Mais la solution possible devrait être

Exemple de détails de ligne cachée DataTables

Esperons que ça marche.

4
Pupil

COLSPAN: données provenant d'Ajax ou de JavaScript

Excellente solution fournie par Dirk Bergstrom fonctionne uniquement avec les données provenant de HTML.

Il est également possible d'utiliser la même idée avec des données provenant d'Ajax. 

Vous devez utiliser l’option createdRow pour modifier les cellules requises lorsque l’élément TR est créé dans le corps du tableau.

Par exemple:

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

Voir cet exemple pour le code et la démonstration.

Voir Tables de données jQuery: COLSPAN dans le corps de la table TBODY - Ajax data article pour plus de détails.

ROWSPAN

Il est possible d'émuler l'attribut ROWSPAN à l'aide de RowsGroup plug-in.

Pour utiliser le plug-in, vous devez inclure le fichier JavaScript dataTables.rowsGroup.js et utiliser l'option rowsGroup pour indiquer les index des colonnes auxquelles vous souhaitez appliquer le regroupement.

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

Voir cet exemple pour le code et la démonstration.

Voir Tables de données jQuery: ROWSPAN dans le corps de la table TBODY article pour plus de détails.

COLSPAN et ROWSPAN

Il est possible de regrouper des cellules simultanément verticalement et horizontalement si nous combinons les deux solutions décrites ci-dessus.

Voir cet exemple pour le code et la démonstration.

Voir Tables de données jQuery: COLSPAN dans le corps de la table TBODY - COLSPAN et ROWSPAN article pour plus de détails.

2
Gyrocode.com

Je ne sais pas à quel moment, mais je suppose que fnFakeRowspan ne prend pas en charge la version actuelle de DataTable. 

Pour une alternative, consultez RowsGroup plugin.

Je trouve cela assez facile à mettre en œuvre et fonctionne bien. La recherche fonctionne parfaitement, mais pas la commande.

Vérifiez ici pour une implémentation.

0
Bharat Geleda

Si vous utilisez scrollX

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

Réponse modifiée de #Dirk_Bergstrom

0
Malik Zahid

Comme datatables ne prend pas en charge colspan, je finissais généralement par utiliser des listes non ordonnées (ul) avec list-style: none;

voici le résultat

0
puntodamar

Voir le lien ci-dessous.

fnFakeRowspan

Référez-vous également le plugin ici.

plug-in fnFakeRowspan

J'espère que ceci vous aidera

0
Casperon