2012-08-25 7 views
50

Ich verwende jQuery DataTables und ich würde gerne wissen, ob es möglich ist, die automatische Sortierung in der ersten Spalte der Tabelle zu deaktivieren?Deaktivieren Sie die automatische Sortierung in der ersten Spalte bei der Verwendung von jQuery DataTables

Mein Code sieht wie folgt aus:

 /* 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()); 
      }) 
     }); 

Antwort

122

Stellen Sie die aaSorting Option auf ein leeres Array. Es wird die anfängliche Sortierung deaktivieren, während Sie beim Klicken auf eine Spalte weiterhin manuell sortieren können.

"aaSorting": [] 

Die aaSorting Array sollte ein Array für jede Spalte enthalten sortiert zunächst enthält der Spaltenindex und eine Richtung Zeichenfolge (‚ASC‘ oder ‚desc‘) zu sein.

+0

funktioniert gut, danke! – Psyche

+0

Das ist die Lösung;) danke dude –

+0

Es funktioniert nicht mit der Option "bStateSave": true. –

23

In der neueren Version von Databases (Version 1.10.7) scheint es Dinge zu ändern. Um zu verhindern, dass DataTables automatisch nach der ersten Spalte sortiert, legen Sie die Option order auf ein leeres Array fest.

Sie müssen nur die folgenden Parameter für die Datentabellen Optionen hinzuzufügen:

"order": [] 

Ihre Datatable ein wie folgt vor, um die Standardeinstellung außer Kraft zu setzen:

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

Das wird überschreibt den Standard Einstellung von "order": [[ 0, 'asc' ]].

Sie können weitere Informationen in Bezug auf die order Option finden Sie hier: https://datatables.net/reference/option/order

+1

Ich möchte klarstellen, dass die Sache, die mit neueren Versionen von DataTables geändert wurde, die Namenskonvention der Optionen wurde vereinfacht, aber die Optionen selbst haben sich nicht geändert. Die alten Optionsnamen funktionieren immer noch. "aSorting" und "order" sind austauschbar.Außerdem ist "aaData" jetzt "data", "sTitle" ist jetzt "title", "bSortable" ist jetzt "sortierbar" und so weiter. – 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 
     }, 
     ], 

    }); 

}); 

gesetzt
"targets": [0] 

zu

"targets": [ ] 
0

Mit diesem einfachen Code für benutzerdefinierte Datentabellen zu sortieren. Seine 100% Arbeit

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


Siehe in Datentabellen Webseite

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

Verwandte Themen