Abbiamo già visto come creare velocemente una tabella con jQuery DataTables e come disabilitare completamente l’ordinamento di colonne.
Può risultare necessario a volte disabilitare l’ordinamento solo per una determinata colonna o gruppi di colonne. Ad esempio se nella nostra tabella è presente una colonna contenente un controllo grafico (un checkbox, un radio, una select, etc…) può risultare inutile permettere l’ordinamento di questa colonna; altro caso è quello in cui il dato presente in colonna non è significativo e quindi non richiede un ordinamento (un’immagine ad esempio…).

Se volessimoo quindi disabilitare l’ordinamento di una colonna di una DataTable?

L’opzione da utilizzare in fase di inizializzazione di DataTable è denominata columnDefs.
L’opzione columnDefs accetta come parametro un array di opzioni varie, tutte predisposte a definire le funzioni delle singole colonne. In particolare, nel nostro caso, è necessario definire la “sottopzione” orderable.

Se ad esempio volessimo quindi disabilitare l’ordinamento della seconda colonna dovremmo scrivere:

<script type="text/javascript">
      $('#idTabella').DataTable({
          "columnDefs": [
                { "orderable": false, "targets": 1 }
          ],
          "language": {
                "url": "//cdn.datatables.net/plug-ins/1.10.19/i18n/Italian.json"
          }
      });
</script>

L’opzione columnDefs può contenere più definizioni, ciascuna di queste va riferita ad una determinata colonna identificata dalla sua posizione in tabella (la prima colonna ha targets 0, la seconda 1, la terza 2, etc…).

Possiamo anche decidere di disabilitare l’ordinamento di più colonne semplicemente aggiungendo un’altra voce a columnDefs:

<script type="text/javascript">
      $('#idTabella').DataTable({
          "columnDefs": [
                { "orderable": false, "targets": 1 },
                { "orderable": false, "targets": 2 },
          ],
          "language": {
                "url": "//cdn.datatables.net/plug-ins/1.10.19/i18n/Italian.json"
          }
      });
</script>

Nulla vieta, inoltre, di combinare colonne disabilitate con un ordinamento personalizzato della tabella.

Ecco la nostra tabella jQuery DataTables con due colonne senza ordinamento:

Scarica il codice completo cliccando qui.
Scopri altri Tips & Tricks.