Wyłącz automatyczne sortowanie w pierwszej kolumnie, gdy korzystasz z jQuery DataTables

Question

Używam jQuery DataTables i chciałbym wiedzieć, czy istnieje możliwość wyłączenia automatycznego sortowania w pierwszej kolumnie tabeli?

Mój kod wygląda następująco:

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

Answer 1

Ustaw opcję pustą tablicę aaSorting. Wyłącza sortowanie początkowe, a jednocześnie umożliwia ręczne sortowanie po kliknięciu na kolumnę.

"aaSorting": [] 

Tablica aaSorting powinien zawierać tablicę dla każdej kolumny do klasyfikowane początkowo zawierająca indeks kolumny, i ciąg kierunku (ASC "lub„desc”).

Answer 2

W nowszej wersji datatables (wersja 1.10.7) wygląda na to, że uległo zmianie. Aby zapobiec automatycznemu sortowaniu DataTables w pierwszej kolumnie, należy ustawić opcję order na pustą tablicę.

Wystarczy dodać następujący parametr do opcji DataTables:

"order": [] 

Skonfiguruj DataTable w następujący sposób, aby zastąpić ustawienie domyślne:

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

To zastąpi domyślną ustawienie "order": [[ 0, 'asc' ]].

można znaleźć więcej szczegółów dotyczących opcji order tutaj: https://datatables.net/reference/option/order

Answer 3

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 
     }, 
     ], 

    }); 

}); 

ustawić

"targets": [0] 

do

"targets": [ ] 

Answer 4

ten prosty kod DataTables zwyczaj sortowania. Jego 100% praca

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

Zobacz na stronie DataTables

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