Datatables Row selection - row selector on specific cells MySQL


Sélection d'une ligne - sélecteur de ligne sur des cellules spécifiques

Ce tableau offre la possibilité grâce au plugin TableTools et ( font-awesome ) de pouvoir sélectionner des lignes du tableau comme sur la démo avec des données dynamiques MySql.
Deux boutons vous permettent de sélectionner ou déselectionner toutes les lignes.

Cette extension a été retiré et a été remplacé par des Boutons et Select pour choisir les extensions. La documentation est conservée pour référence hérité seulement. Les nouveaux projets doivent utiliser les boutons et sélectionner de préférence à TableTools.
Pour plus d'information veuillez consulter cette page (https://datatables.net/examples/api/select_single_row.html).

Appel des fichiers

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/plug-ins/f2c75b7247b/integration/jqueryui/dataTables.jqueryui.css">
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/tabletools/2.2.3/css/dataTables.tableTools.css">
<link rel="stylesheet" type="text/css" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.0.3/css/font-awesome.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.5/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/plug-ins/f2c75b7247b/integration/jqueryui/dataTables.jqueryui.js"></script>
<script src="https://cdn.datatables.net/tabletools/2.2.3/js/dataTables.tableTools.min.js"></script>

Script JavaScript

Le script ci-dessous est assez parlant, notamment par l'ajout de commentaire.

<script type="text/javascript" class="init">
    $("div#loader").append('<center><img src="images/loading.gif" alt="chargement..."/></center>');
  oTable = $('#menuTable').DataTable( {
        "lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "Tous"]],
    
    columns: [
      { data: null, defaultContent: '', orderable: false },
      { data: 'id' },
      { data: 'matricule' },
      { data: 'nom' },
      { data: 'service' },
      { data: 'poste' },
      { data: 'date' },
      { data: 'membre'},
      { data: 'action'}
    ],
    order: [ 1, 'asc' ],//les colonnes parte de 0 à x
        //on dit que la colonne 1 sera desc, si vous omettez ce parametre les données s'afficheront asc
    //même si dans la requete SQL vous spécifiez un order by desc

    dom: 'T<"H"lfr>t<"F"ip>',
    jQueryUI: true,
    
    tableTools: {
      sRowSelect:   'os',
      sRowSelector: 'td:first-child',
      //aButtons:     [ 'select_all', 'select_none' ], //bouton par défaut
      
      "aButtons": [
              {
                "sExtends": "select_all",
                "sButtonText": "Selectionner tout"
              },
              {
                "sExtends": "select_none",
                "sButtonText": "Deselectionner tout"
              }
            ]      
    },
    
    "columnDefs": [
            {
                "targets": [ 1 ],//on spécifie le numéro de colonne représente la colonne id
                "visible": false,//on spécifie quelle sera cachée
                "searchable": false//on spécifie quelle ne sera pas utilisée pour la recherche
            }
        ],
    "language": { "url": "https://cdn.datatables.net/plug-ins/725b2a2115b/i18n/French.json"  },
    
    "fnDrawCallback": function() {
          $(this).show();
      $('div#loader').hide();
          $(this).show().css('width', '100%');
      },
    "initComplete": function () {
            var api = this.api();
      api.$('td.api').click( function () {
                api.search( this.innerHTML ).draw();
            } );
        }//fin init complete
  } );//fin datatable  

  $('button.btn').click(function() {
    $('input[type=search]').val('');
    oTable.fnFilter('');
  } );

  $("button.btn" ).button({
    icons: { primary: 'ui-icon-refresh' },
    text: false
  });

  $('a.delete').button({
    icons: { primary: 'ui-icon-trash'  },
    text: false
  });
 
  $('a.edit').button({
    icons: { primary: 'ui-icon-pencil'  },
    text: false
  });
  
 });//fin ready

</script>
          

Placement des icônes en css

Ces classes CSS sont valables pour toutes les tableaux montrés en démo, toutefois la position de l'icône à coté de la zone de recherche dépend de la largeur de votre tableau, ce qui veut dire aussi repositionnement de la zone de recherche..

          tr td:first-child {
              text-align: center;
          }
      
          tr td:first-child:before {
              content: "\f096"; /* fa-square-o */
              font-family: FontAwesome;
          }

          tr.selected td:first-child:before {
              content: "\f046"; /* fa-check-square-o */
          }
          /*icone delete et edit*/
          a.delete, a.edit {padding:6px 1px 6px 1px;}
        

 

Conclusion

L'option de modifier le nom des boutons par un texte plus spécifique, ce fait dans le paramètre ( aButtons ).

Bon dev.