2012-08-25 15 views
50

Estoy usando jQuery DataTables y me gustaría saber si es posible deshabilitar la ordenación automática en la primera columna de la tabla?Deshabilitar la ordenación automática en la primera columna al usar jQuery DataTables

Mi código es el siguiente:

 /* Default class modification */ 
     $.extend($.fn.dataTableExt.oStdClasses, { 
      "sWrapper": "dataTables_wrapper form-inline" 
     }); 

     /* API method to get paging information */ 
     $.fn.dataTableExt.oApi.fnPagingInfo = function (oSettings) 
     { 
      return { 
       "iStart":   oSettings._iDisplayStart, 
       "iEnd":   oSettings.fnDisplayEnd(), 
       "iLength":  oSettings._iDisplayLength, 
       "iTotal":   oSettings.fnRecordsTotal(), 
       "iFilteredTotal": oSettings.fnRecordsDisplay(), 
       "iPage":   Math.ceil(oSettings._iDisplayStart/oSettings._iDisplayLength), 
       "iTotalPages": Math.ceil(oSettings.fnRecordsDisplay()/oSettings._iDisplayLength) 
      }; 
     } 

     /* Bootstrap style pagination control */ 
     $.extend($.fn.dataTableExt.oPagination, { 
      "bootstrap": { 
       "fnInit": function(oSettings, nPaging, fnDraw) { 
        var oLang = oSettings.oLanguage.oPaginate; 
        var fnClickHandler = function (e) { 
         e.preventDefault(); 
         if (oSettings.oApi._fnPageChange(oSettings, e.data.action)) { 
          fnDraw(oSettings); 
         } 
        }; 

        $(nPaging).addClass('pagination').append(
         '<ul>'+ 
          '<li class="prev disabled"><a href="#">&larr; '+oLang.sPrevious+'</a></li>'+ 
          '<li class="next disabled"><a href="#">'+oLang.sNext+' &rarr; </a></li>'+ 
         '</ul>' 
        ); 
        var els = $('a', nPaging); 
        $(els[0]).bind('click.DT', { action: "previous" }, fnClickHandler); 
        $(els[1]).bind('click.DT', { action: "next" }, fnClickHandler); 
       }, 

       "fnUpdate": function (oSettings, fnDraw) { 
        var iListLength = 5; 
        var oPaging = oSettings.oInstance.fnPagingInfo(); 
        var an = oSettings.aanFeatures.p; 
        var i, j, sClass, iStart, iEnd, iHalf=Math.floor(iListLength/2); 

        if (oPaging.iTotalPages < iListLength) { 
         iStart = 1; 
         iEnd = oPaging.iTotalPages; 
        } 
        else if (oPaging.iPage <= iHalf) { 
         iStart = 1; 
         iEnd = iListLength; 
        } else if (oPaging.iPage >= (oPaging.iTotalPages-iHalf)) { 
         iStart = oPaging.iTotalPages - iListLength + 1; 
         iEnd = oPaging.iTotalPages; 
        } else { 
         iStart = oPaging.iPage - iHalf + 1; 
         iEnd = iStart + iListLength - 1; 
        } 

        for (i=0, iLen=an.length ; i<iLen ; i++) { 
         // Remove the middle elements 
         $('li:gt(0)', an[i]).filter(':not(:last)').remove(); 

         // Add the new list items and their event handlers 
         for (j=iStart ; j<=iEnd ; j++) { 
          sClass = (j==oPaging.iPage+1) ? 'class="active"' : ''; 
          $('<li '+sClass+'><a href="#">'+j+'</a></li>') 
           .insertBefore($('li:last', an[i])[0]) 
           .bind('click', function (e) { 
            e.preventDefault(); 
            oSettings._iDisplayStart = (parseInt($('a', this).text(),10)-1) * oPaging.iLength; 
            fnDraw(oSettings); 
           }); 
         } 

         // Add/remove disabled classes from the static elements 
         if (oPaging.iPage === 0) { 
          $('li:first', an[i]).addClass('disabled'); 
         } else { 
          $('li:first', an[i]).removeClass('disabled'); 
         } 

         if (oPaging.iPage === oPaging.iTotalPages-1 || oPaging.iTotalPages === 0) { 
          $('li:last', an[i]).addClass('disabled'); 
         } else { 
          $('li:last', an[i]).removeClass('disabled'); 
         } 
        } 
       } 
      } 
     }); 

     /* Show/hide table column */ 
     function dtShowHideCol(iCol) { 
      var oTable = $('#example-2').dataTable(); 
      var bVis = oTable.fnSettings().aoColumns[iCol].bVisible; 
      oTable.fnSetColumnVis(iCol, bVis ? false : true); 
     }; 

     /* Table #example */ 
     $(document).ready(function() { 
      $('.datatable').dataTable({ 
       "sDom": "<'row'<'span6'l><'span6'f>r>t<'row'<'span6'i><'span6'p>>", 
       "sPaginationType": "bootstrap",      
       "oLanguage": { 
        "sLengthMenu": "_MENU_ records per page" 
       }, 
       "aoColumnDefs": [ 
        { 
         "bSortable": false, 
         "aTargets": [ -1 ] // <-- gets last column and turns off sorting 
        } 
       ] 
      }); 
      $('.datatable-controls').on('click','li input',function(){ 
       dtShowHideCol($(this).val()); 
      }) 
     }); 

Respuesta

122

Establecer la opción aaSorting a una matriz vacía. Deshabilitará la clasificación inicial, a la vez que permite la clasificación manual cuando hace clic en una columna.

"aaSorting": [] 

La matriz aaSorting debe contener una matriz para cada columna para ser ordenados inicialmente que contiene el índice de la columna y una cadena de dirección ('asc' o 'desc').

+0

funciona muy bien, gracias! – Psyche

+0

Esta es la solución;) gracias amigo –

+0

No funciona con la opción "bStateSave": verdadero. –

23

En la versión más reciente de tablas de datos (versión 1.10.7) parece que las cosas han cambiado. La forma de evitar que DataTables se clasifique automáticamente por la primera columna es establecer la opción order en una matriz vacía.

sólo tiene que añadir el siguiente parámetro a las opciones DataTables:

"order": [] 

Configurar el DataTable de la siguiente manera con el fin de anular el valor predeterminado:

$('#example').dataTable({ 
    "order": [], 
    // Your other options here... 
}); 

que anulará el valor por defecto ajuste de "order": [[ 0, 'asc' ]].

se pueden encontrar más detalles con respecto a la opción order aquí: https://datatables.net/reference/option/order

+1

Me gustaría aclarar que lo que ha cambiado con las versiones más recientes de DataTables es que la convención de nomenclatura de las opciones se ha simplificado, pero las opciones en sí mismas no han cambiado. Los nombres de las opciones antiguas aún funcionan; "aaSorting" y "order" son intercambiables.Además, "aaData" ahora es "datos", "sTitle" ahora es "título", "bSortable" ahora es "ordenable" y así sucesivamente. – BobRodes

2
var table; 

$(document).ready(function() { 

    //datatables 
    table = $('#userTable').DataTable({ 

     "processing": true, //Feature control the processing indicator. 
     "serverSide": true, //Feature control DataTables' server-side processing mode. 
     "order": [], //Initial no order. 
     "aaSorting": [], 
     // Load data for the table's content from an Ajax source 
     "ajax": { 
      "url": "<?php echo base_url().'admin/ajax_list';?>", 
      "type": "POST" 
     }, 

     //Set column definition initialisation properties. 
     "columnDefs": [ 
     { 
      "targets": [ ], //first column/numbering column 
      "orderable": false, //set not orderable 
     }, 
     ], 

    }); 

}); 

conjunto

"targets": [0] 

a

"targets": [ ] 
0

Usar este código de clasificación simple para tablas de datos personalizado. Su trabajo del 100%

<script> 
    $(document).ready(function() { 
     $('#myTable').DataTable({ 
      "order": [[ 0, "desc" ]] // "0" means First column and "desc" is order type; 
     }); 
    }); 
</script> 


Ver en página web DataTables

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

Cuestiones relacionadas