{"id":2649,"date":"2019-06-07T11:50:45","date_gmt":"2019-06-07T10:50:45","guid":{"rendered":"http:\/\/www.donatantonio.net\/blog\/?p=2649"},"modified":"2019-06-07T11:52:00","modified_gmt":"2019-06-07T10:52:00","slug":"disabilitare-lordinamento-per-singole-colonne-di-una-jquery-datatables","status":"publish","type":"post","link":"https:\/\/www.donatantonio.net\/blog\/tipsetricks\/disabilitare-lordinamento-per-singole-colonne-di-una-jquery-datatables\/","title":{"rendered":"Disabilitare l’ordinamento per singole colonne di una jQuery DataTables"},"content":{"rendered":"

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

Se volessimoo quindi disabilitare l’ordinamento di una colonna<\/strong> di una DataTable?<\/p>\n

\"Datatable<\/a>L’opzione da utilizzare in fase di inizializzazione di DataTable \u00e8 denominata columnDefs.
\n<\/strong>L’opzione columnDefs accetta come parametro un array di opzioni varie, tutte predisposte a definire<\/strong> le funzioni delle singole colonne<\/strong>. In particolare, nel nostro caso, \u00e8 necessario definire la “sottopzione” orderable<\/strong>.<\/p>\n

Se ad esempio volessimo quindi disabilitare l\u2019ordinamento della seconda colonna dovremmo scrivere:<\/p>\n

\r\n<script type="text\/javascript">\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 $('#idTabella').DataTable({\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 "columnDefs": [\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 { "orderable": false, "targets": 1 }\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 ],\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 "language": {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 "url": "\/\/cdn.datatables.net\/plug-ins\/1.10.19\/i18n\/Italian.json"\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 }\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 });\r\n<\/script>\r\n<\/pre>\n
L’opzione columnDefs pu\u00f2 contenere pi\u00f9 definizioni<\/strong>, ciascuna di queste va riferita ad una determinata colonna<\/em> identificata dalla sua posizione in tabella (la prima colonna ha targets<\/strong> 0, la seconda 1, la terza 2, etc…).<\/p>\n
Possiamo anche decidere di disabilitare l’ordinamento di pi\u00f9 colonne<\/strong> semplicemente aggiungendo un’altra voce a columnDefs:<\/p>\n
\r\n<script type="text\/javascript">\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 $('#idTabella').DataTable({\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 "columnDefs": [\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 { "orderable": false, "targets": 1 },\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 { "orderable": false, "targets": 2 },\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 ],\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 "language": {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 "url": "\/\/cdn.datatables.net\/plug-ins\/1.10.19\/i18n\/Italian.json"\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 }\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 });\r\n<\/script>\r\n<\/pre>\n
Nulla vieta, inoltre, di combinare colonne disabilitate con un ordinamento personalizzato<\/a> della tabella.<\/p>\n
Ecco la nostra tabella jQuery DataTables con due colonne senza ordinamento<\/strong>:<\/p>\n