web-dev-qa-db-fra.com

DataTables Définir la colonne de tri par défaut et définir les colonnes non triables

Est-il possible de définir la colonne par défaut pour trier une fois la page chargée? Je souhaite utiliser le seul appel datatable pour différentes tables sur mon site. Est-il possible d'ajouter une classe th pour y parvenir?

Je souhaite également désactiver le tri sur certaines colonnes et, depuis que je recherche l'appel à un seul datatables pour tout faire, y a-t-il une classe que je peux ajouter à la th qui le rendra non triable? 

Ceci est mon script appelé dataTable

if (jQuery().dataTable) {
    $('#table-list-items').dataTable({
        "fnDrawCallback" : function () {
        },
        "aLengthMenu": [
        [10, 15, 25, 50, 100, -1],
        [10, 15, 25, 50, 100, "All"]
        ],
        "iDisplayLength": 25,
        "oLanguage": {
            "sLengthMenu": "_MENU_ Records per page",
            "sInfo": "_START_ - _END_ of _TOTAL_",
            "sInfoEmpty": "0 - 0 of 0",
            "oPaginate": {
                "sPrevious": "Prev",
                "sNext": "Next"
            }
        },
        "aoColumnDefs": [{
            'bSortable': true,
            'aTargets': [0]
        }]
    });
}
javascriptjquerydatatables
16
Pierce McGeough

Oui, vous pouvez le faire en utilisant l'option aaSorting comme:

$('.table-asc0').dataTable({
  aaSorting: [[0, 'asc']]
});

Ordre croissant dans la première colonne.

$('.table-asc1').dataTable({
  aaSorting: [[1, 'asc']]
});

Pour DataTables 1.10, aaSorting a été remplacé par order.

$('.table-asc0').dataTable({
  order: [[0, 'asc']]
});
34
Balthazar

SET INITIAL ORDER (DataTables 1.10)

Utilisez order pour définir l'ordre initial de la table.

Par exemple, pour trier par seconde colonne dans l’ordre décroissant:

$('#example').dataTable({
   "order": [[ 1, 'desc' ]]
});

Voir this jsFiddle pour le code et la démonstration.

DÉSACTIVEZ LE TRI POUR UNE COLONNE (DataTables 1.10)

Utilisez columnDefs et orderable pour désactiver le tri sur certaines colonnes.

Par exemple, pour désactiver le tri sur les troisième et quatrième colonnes:

$('#example').dataTable({
   "columnDefs": [
      { "targets": [2,3], "orderable": false }
  ]
});

Voir this jsFiddle pour le code et la démonstration.

SET ORDRE INITIAL ET DESACTIVE DE TRI POUR LA MEME COLONNE (DataTables 1.10)

Vous pouvez combiner les options order pour définir l'ordre initial de la table et orderable pour désactiver le tri sur la même colonne.

Par exemple:

$('#example').dataTable({
   "order": [[ 0, 'desc' ]],
   "columnDefs": [
      { "targets": [0], "orderable": false }
  ]
});

Voir this jsFiddle pour le code et la démonstration.

15
Gyrocode.com

Vous pouvez le faire via l'attribut data-order data du tableau HTML, ce qui vous donnera la flexibilité dont vous avez besoin table par table tout en vous permettant d'utiliser un seul appel pour initialiser vos dataTables:

<table className="table table-condensed table-striped" data-order="[[ 2, &quot;asc&quot; ]]" id="tableId">
    <thead>
        <tr>
          <th>Col1</th>
          <th>Col2</th>
          <th>Col3</th>
          <th>Col4</th>
          <th>Col5</th>
          <th>Col6</th>
        </tr>
    </thead>
    <tbody>
        <tr>
          <td>Val1</td>
          <td>Val2</td>
          <td>Val3</td>
          <td>Val4</td>
          <td>Val5</td>
          <td>Val6</td>
        </tr>
    </tbody>
</table>
5
lee_mcmullen

Il suffit d'inclure le code suivant:

    $(document).ready(function() {
        $('#tableID').DataTable( {
            "order": [[ 3, "desc" ]]
        } );
    } 
);

Référence: 

https://datatables.net/examples/basic_init/table_sorting.html

0
Akshay Pethani

est correct et travaillé:

    $('#admin').DataTable({
        "aaSorting": [[3, 'desc']],
        "bPaginate": true,
        "bProcessing": true,
        "columns": [
            {'data' : 'request_code'},
            {'data' : 'name_receiver'},
            {'data' : 'name_area'},
            {'data' : 'created_at'},
            {'data' : 'state'},
            {'data' : 'city'},
            {'data' : 'history'},
        ],
        "ajax": "{{route('my.route.name')}}",
        dom: 'Bfrtip',
        buttons: ['copy', 'Excel', 'print'],
    });
0
Dariush