jQuery Girl
  1. jQuery Girl
  3. jquery Datatable Regroupement de lignes
Intereting Posts
TableSorter. Trier par sélection déroulante jQuery recherche que vous tapez avec ajax Sélecteur pour plusieurs tags dans un div avec id La requête Ajax a des caractères invalides changement de couleur de bordure ne fonctionne que pour la première fois Javascript – Créer une arborescence à trois niveaux, deux boîtes de sélection de colonnes – HTML Comment puis-je prendre un tableau de chaînes et les filtrer? créer un dialog sans id et append en jquery jQuery: comment sélectionner les valeurs de la colonne de la table en se basant uniquement sur l’en-tête de la table Branchement de grid élastique pour pouvoir fermer l’aperçu en cliquant n’importe où sur l’écran Ajout de données de tableau à la table HTML jQuery: Y at-il un meilleur moyen de changer deux divs? jQuery CSS () pour les éléments créés dynamicment jQuery ‘on’ ne s’enregistre pas dans un popup modal généré dynamicment change l’événement ne se déclenche pas après avoir défini la valeur de manière dynamic

jquery Datatable Regroupement de lignes

J’utilise jQuery DataTables (version 1.7.6). J’aimerais regrouper deux lignes consécutives afin d’avoir une option d’édition pour les deux lignes.

Voici mon tableau: 

  
 column1 column2 Edit 
   
  Loading data from server  
   
 column1 column2 Edit

Voici mon script, adopté à partir de la documentation de DataTable sur le groupement de lignes 

 $(function() { var oTable = $('#specificproduct_table').dataTable({ "aoColumns": [{ "sClass": "nonedit" }, { "sClass": "nonedit" }, { "sClass": "nonedit", "bSortable": false }, ], "bProcessing": true, "bServerSide": true, "bJQueryUI": true, "sPaginationType": "full_numbers", "sAjaxSource": "ajax_shotgun_table", "fnDrawCallback": function(oSettings) { if (oSettings.aiDisplay.length == 0) { return; } var nTrs = $('tbody tr', oSettings.nTable); var iColspan = nTrs[0].getElementsByTagName('td').length; var sLastGroup = ""; for (var i = 0; i < nTrs.length; i++) { var iDisplayIndex = oSettings._iDisplayStart + i; var sGroup = oSettings.aoData[oSettings.aiDisplay[iDisplayIndex]]._aData[0]; if (sGroup != sLastGroup) { var nGroup = document.createElement('tr'); var nCell = document.createElement('td'); nCell.colSpan = iColspan; nCell.className = "group"; nCell.innerHTML = sGroup; nGroup.appendChild(nCell); nTrs[i].parentNode.insertBefore(nGroup, nTrs[i]); sLastGroup = sGroup; } } }, "aoColumnDefs": [{ "bVisible": false, "aTargets": [0] }], "aaSortingFixed": [ [0, 'asc'] ], "aaSorting": [ [1, 'asc'] ], "sDom": 'lfrip' }); });

Je cherche une sortie comme celle-ci: 

 
 
 column1 column2 Edit 
 
 product A  A edit 
 
 product A 1  A 
 
 product B  B edit 
 
 product B 1  B 
 
 product C  C edit 
 
 product C 1  C

pour le moment (1.7.6) dataTables ne supporte pas col ou rowspan

vous pourriez probablement utiliser fnDrawCallback pour parcourir la table et remplacer toutes les deux lignes par deux nouvelles lignes avec un rowspan pour la dernière cellule, car fnDrawCallback est invoquée après le dessin de la table (cela entraînera une mise à jour)

je ne sais pas comment il va gérer le sorting / la recherche

La fonction fnFakeRowspan () peut le faire, probablement

Voici le lien: http://datatables.net/plug-ins/api#fnFakeRowspan