web-dev-qa-db-fra.com

Comment ajouter Rowspan dans les tables de données JQuery

J'utilise des tables de données Jquery pour construire une table.
Mon exigence est comme ci-dessous
enter image description here

Ce n'est pas un tableau statique, et nous le rendons en utilisant des données json.
Ici, je rend les lignes dynamiquement en utilisant "aoColumns".
Existe-t-il un moyen d'utiliser rowpan pour que les cellules (1,2, David, Alex) puissent être réparties.
Les tables de données prennent-elles en charge ce type de tableau?

javascriptjquerydatatableshtml-table
15
Shree

Les tables de données ne prennent pas en charge ce type de regroupement prêt à l'emploi. Mais, comme dans de nombreux cas, un plugin est disponible.

Il s'appelle RowsGroup et se trouve ici: Datatables Forums . Un exemple en direct est également inclus.

Si vous changez la partie JS dans cet exemple par celle ci-dessous, la sortie souhaitée vous sera présentée dans la fenêtre de sortie.

$(document).ready( function () {
  var data = [
    ['1', 'David', 'Maths', '80'],
    ['1', 'David', 'Physics', '90'],
    ['1', 'David', 'Computers', '70'],
    ['2', 'Alex', 'Maths', '80'],
    ['2', 'Alex', 'Physics', '70'],
    ['2', 'Alex', 'Computers', '90'],
  ];
  var table = $('#example').DataTable({
    columns: [
        {
            name: 'first',
            title: 'ID',
        },
        {
            name: 'second',
            title: 'Name',
        },
        {
            title: 'Subject',
        }, 
        {
            title: 'Marks',
        },
    ],
    data: data,
    rowsGroup: [
      'first:name',
      'second:name'
    ],
    pageLength: '20',
    });
} );

Voici une capture d'écran du résultat:

enter image description here

23
DKSan

J'ai essayé le plugin RowsGroup , mais il y parvient juste en détournant le mécanisme de tri DataTables. Si vous lui dites de grouper une colonne donnée, ce qu'elle fait pour vous est essentiellement d'appliquer un tri à cette colonne que vous ne pouvez pas désactiver. Donc, si vous voulez trier par une autre colonne, vous ne pouvez pas. Cela n'a pas fonctionné dans mon application.

Au lieu de cela, voici un violon de travail pour une recette qui vous permet d'obtenir ce résultat:

https://jsfiddle.net/bwDialogs/fscaos2n

L'idée de base est d'aplatir toutes vos données multi-lignes en une seule ligne. Le contenu de vos 2e, 3e, etc. lignes est stocké en tant que balise de modèle <script> Cachée dans votre première ligne.

Il fonctionne en utilisant la fonction drawCallback de DataTables pour manipuler le DOM une fois que DataTables l'a rendu, sans confondre DataTables en devant essayer d'analyser le contenu des cellules rowspan.

Comme cela modifie le DOM une fois que DataTables a fait sa magie, vos sections à plusieurs lignes resteront collées même avec la pagination, la recherche et le tri.

À votre santé.

4
BrentW