jQuery डेटाटेबल्स

Question

का उपयोग करते समय पहले कॉलम पर स्वचालित सॉर्टिंग को अक्षम करें मैं jQuery डेटाटेबल्स का उपयोग कर रहा हूं और मैं जानना चाहता हूं कि तालिका के पहले कॉलम पर स्वचालित सॉर्टिंग को अक्षम करना संभव है या नहीं?

मेरे कोड इस तरह दिखता है:

 /* 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

एक खाली सरणी aaSorting विकल्प सेट करें। यह प्रारंभिक सॉर्टिंग को अक्षम कर देगा, जबकि आप कॉलम पर क्लिक करते समय मैन्युअल सॉर्टिंग की अनुमति देते हैं।

"aaSorting": [] 

aaSorting सरणी प्रत्येक स्तंभ के लिए एक सरणी शामिल अनुसार क्रमबद्ध स्तंभ के सूचकांक और एक दिशा स्ट्रिंग ('एएससी' या 'desc') युक्त शुरू में होने के लिए करना चाहिए।

Answer 2

डेटाटेबल्स के नए संस्करण (संस्करण 1.10.7) में ऐसा लगता है कि चीजें बदल गई हैं। डेटा कॉलबल्स को पहले कॉलम से स्वचालित रूप से सॉर्ट करने से रोकने का तरीका order विकल्प को खाली सरणी में सेट करना है।

तुम बस DataTables विकल्पों के लिए निम्न पैरामीटर जोड़ना:

"order": [] 

अपने DataTable सेट करें आदेश डिफ़ॉल्ट सेटिंग को ओवरराइड करने के लिए इस प्रकार है:

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

कि डिफ़ॉल्ट स्थान पर आ जाएगी "order": [[ 0, 'asc' ]] की सेटिंग।

आप order विकल्प यहाँ के बारे में और अधिक जानकारी प्राप्त कर सकते हैं: 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 
     }, 
     ], 

    }); 

}); 

"targets": [0] 

सेट

"targets": [ ] 

Answer 4

उपयोग DataTables के लिए इस सरल कोड कस्टम छँटाई करने के लिए। इसकी 100% काम

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

DataTables वेबसाइट में देखें

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