डेटाटेबल.जेएस jQuery प्लगइन

Question

में कॉलम को अपरिवर्तनीय बनाते हैं मैं डेटाटेबल्स.जेएस jQuery प्लगइन का उपयोग कर रहा हूं।

मेरी तालिका का पहला स्तंभ एक पंक्ति काउंटर है, इसलिए मैं नहीं चाहता कि यह उपयोगकर्ता द्वारा क्रमबद्ध हो। अंतिम कॉलम में कुछ एक्शन लिंक होते हैं जो उपयोगकर्ता एक पंक्ति पर प्रदर्शन कर सकते हैं। मैं इन दो कॉलम को अपरिवर्तनीय कैसे बना सकता हूं?

नोट: मैं डेटाटेबल्स के पाइपलाइन (सर्वर-साइड प्रोसेस) मोड का उपयोग कर रहा हूं।

Answer 1

aaSortingFixed

यह पैरामीटर मूल रूप से समान aaSorting पैरामीटर के लिए है, लेकिन नहीं तालिका के साथ उपयोगकर्ता बातचीत द्वारा अधिरोहित जा सकता है। इसका अर्थ यह है कि आप में कॉलम (दृश्यमान या छिपा हुआ) हो सकता है जो सॉर्टिंग हमेशा को पहले मजबूर किया जाएगा - के बाद कोई भी सॉर्टिंग (उपयोगकर्ता से) आवश्यकतानुसार किया जाएगा। यह पंक्तियों को समूहबद्ध करने के लिए उपयोगी हो सकता है। उपयोग के

उदाहरण:

$(document).ready(function() { 
    $('#example').dataTable({ 
     "aaSortingFixed": [[0,'asc'],[5,'asc']] 
    }); 
}); 

0 (बाएं से) अपने 'unsortable' पंक्ति की संख्या है। (ताकि उदाहरण में पहली और sixths स्तंभ ठीक)

Official Documentation

Answer 2

यह गलत पर bSortable की स्थापना द्वारा किया जाता है:

/* Using aoColumnDefs */ 
$(document).ready(function() { 
    $('#example').dataTable({ 
     "aoColumnDefs": [ 
      { "bSortable": false, "aTargets": [ 0 ] } 
     ] }); 
}); 

/* Using aoColumns */ 
$(document).ready(function() { 
    $('#example').dataTable({ 
     "aoColumns": [ 
      { "bSortable": false }, 
      null, 
      null, 
      null, 
      null 
     ] }); 
}); 

Answer 3

आप समर्थन अपरिवर्तनीय संख्या आदेश के लिए एक कॉलबैक फ़ंक्शन परिभाषित कर सकते हैं अलग कॉलम में:

$('#someId').dataTable({ 
     // ... 
     "aoColumns": [ 
      // ... 
      {"bSortable": false}, // set unsortable this column 
      // ... 
     ], 
     fnDrawCallback: function(oSettings) { 
      $(this).find('tbody tr').each(function(index) { 
       $(this).find('td').eq(1).text(index + 1); // .eq([index of column]) 
      }); 
     } 
    }); 

Answer 4

विशिष्ट कॉलम पर सॉर्टिंग को अक्षम करने के कुछ तरीके हैं।

/* 
* aoColumnDefs must be an array of objects (definitions) 
* each definition must contain the aTargets property that 
* specifies the columns on which the definition applies 
* and other properties such as bSortable, bSearchable, bVisible 
*/ 
var aoColumnDefs = [ 
    { 
     "aTargets": [0, 6], 
     "bSortable": false 
    } 
]; 
var dataTable = $('#example').dataTable({ 
    "aoColumnDefs": aoColumnDefs 
}); 

अन्य, कम लचीला विकल्प स्तंभ (रों) कॉन्फ़िगर करने के लिए aoColumn पैरामीटर का उपयोग करने है:

सबसे सीधे आगे विधि स्तंभ (रों) कॉन्फ़िगर करने के लिए aoColumnDefs पैरामीटर का उपयोग करने है:

/* 
* aoColumn must be an array of objects 
* the array size must match the number of columns 
* use null to tell the plugin to use default settings for that column 
*/ 
var aoColumns = [ 
    /* 0 */ { "bSortable": false }, 
    /* 1 */ null, 
    /* 2 */ null, 
    /* 3 */ null, 
    /* 4 */ null, 
    /* 5 */ null, 
    /* 6 */ { "bSortable": false } 
]; 
var dataTable = $('#example').dataTable({ 
    "aoColumns": aoColumns 
}); 

डेमो:

• Default behavior
• Make un-sortable using aoColumnDefs option
• Make un-sortable using aoColumn option

प्रलेखन:

• Column options
• Reference

Answer 5

DataTables भी 1.10+ supports HTML5 data- style attributes,सहित, क्योंकि उसमें कॉलम छँटाई के लिए अयोग्य बनाता है:

<table> 
    <thead> 
     <tr> 
      <th data-sortable="false">Row</th> 
      <th>Name</th> 
      <th>Join Date</th> 
      <th>Organization</th> 
      <th data-sortable="false">Options</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      [etc] 
     </tr> 
    </tbody> 
</table> 

See this demo in jsFiddle