javascript - jquery डेटाटेबल्स का उपयोग कर कॉलम सॉर्टिंग अक्षम करें




sorting datatables (15)

मैं टेबल फ़ील्ड को सॉर्ट करने के लिए jQuery डेटाटेबल्स प्लगइन का उपयोग कर रहा हूं। मेरा सवाल यह है कि मैं किसी विशेष कॉलम के लिए सॉर्टिंग कैसे अक्षम करूं? मैंने निम्नलिखित कोड के साथ प्रयास किया है, लेकिन यह काम नहीं किया है:

"aoColumns": [
    { "bSearchable": false },
    null
]   

मैंने निम्नलिखित कोड भी आजमाए हैं:

"aoColumnDefs": [
     { "bSearchable": false, "aTargets": [ 1 ] }
 ]

लेकिन यह अभी भी वांछित परिणाम नहीं पैदा किया।


डेटाटेबल्स 1.10.5 के रूप में अब एचटीएमएल 5 डेटा- * विशेषताओं का उपयोग करके प्रारंभिक विकल्पों को परिभाषित करना संभव है।

- डेटाटेबल्स प्रलेखन: एचटीएमएल 5 डेटा- * विशेषताएं - तालिका विकल्प

तो आप उस कॉलम के th पर data-orderable="false" उपयोग कर सकते हैं जिसे आप क्रमबद्ध नहीं करना चाहते हैं। उदाहरण के लिए, नीचे दी गई तालिका में दूसरा स्तंभ "अवतार" क्रमबद्ध नहीं होगा:

<table id="example" class="display" width="100%" data-page-length="25">
    <thead>
        <tr>
            <th>Name</th>
            <th data-orderable="false">Avatar</th>
            <th>Start date</th>
            <th>Salary</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Tiger Nixon</td>
            <td><img src="https://www.gravatar.com/avatar/8edcff60cdcca2ad650758fa524d4990?s=64&amp;d=identicon&amp;r=PG" alt="" style="width: 64px; height: 64px; visibility: visible;"></td>
            <td>2011/04/25</td>
            <td>$320,800</td>
        </tr>
        <tr>
            <td>Garrett Winters</td>
            <td><img src="https://www.gravatar.com/avatar/98fe9834dcca2ad650758fa524d4990?s=64&amp;d=identicon&amp;r=PG" alt="" style="width: 64px; height: 64px; visibility: visible;"></td>
            <td>2011/07/25</td>
            <td>$170,750</td>
        </tr>
        ...[ETC]...
    </tbody>
</table>

Https://jsfiddle.net/jhfrench/6yxvxt7L/ पर एक कार्य उदाहरण देखें


  1. पहले कॉलम पर ऑर्डर अक्षम करने के लिए निम्न कोड का उपयोग करें:

    $('#example').dataTable( {
      "columnDefs": [
        { "orderable": false, "targets": 0 }
      ]
    } );
    
  2. डिफ़ॉल्ट ऑर्डरिंग अक्षम करने के लिए, आप इसका भी उपयोग कर सकते हैं:

    $('#example').dataTable( {
         "ordering": false, 
    } );
    

आप इस तरह नकारात्मक सूचकांक का भी उपयोग कर सकते हैं:

$('.datatable').dataTable({
    "sDom": "<'row-fluid'<'span6'l><'span6'f>r>t<'row-fluid'<'span6'i><'span6'p>>",
    "sPaginationType": "bootstrap",
    "aoColumnDefs": [
        { 'bSortable': false, 'aTargets': [ -1 ] }
    ]
});

आप कॉलम पर .notsortable () विधि का उपयोग निर्देशित कर सकते हैं

 vm.dtOpt_product = DTOptionsBuilder.newOptions()
                .withOption('responsive', true)
        vm.dtOpt_product.withPaginationType('full_numbers');
        vm.dtOpt_product.withColumnFilter({
            aoColumns: [{
                    type: 'null'
                }, {
                    type: 'text',
                    bRegex: true,
                    bSmart: true
                }, {
                    type: 'text',
                    bRegex: true,
                    bSmart: true
                }, {
                    type: 'text',
                    bRegex: true,
                    bSmart: true
                }, {
                    type: 'select',
                    bRegex: false,
                    bSmart: true,
                    values: vm.dtProductTypes
                }]

        });

        vm.dtColDefs_product = [
            DTColumnDefBuilder.newColumnDef(0), DTColumnDefBuilder.newColumnDef(1),
            DTColumnDefBuilder.newColumnDef(2), DTColumnDefBuilder.newColumnDef(3).withClass('none'),
            DTColumnDefBuilder.newColumnDef(4), DTColumnDefBuilder.newColumnDef(5).notSortable()
        ];

जवाब यहाँ है!

targets कॉलम संख्या है, यह 0 से शुरू होता है

$('#example').dataTable( {
  "columnDefs": [
    { "orderable": false, "targets": 0 }
  ]
} );

डेटाटेबल्स का उपयोग 1.9.4 मैंने इस कोड के साथ पहले कॉलम के लिए सॉर्टिंग अक्षम कर दी है:

/* Table initialisation */
$(document).ready(function() {
    $('#rules').dataTable({
        "sDom" : "<'row'<'span6'l><'span6'f>r>t<'row'<'span6'i><'span6'p>>",
        "sPaginationType" : "bootstrap",
        "oLanguage" : {
            "sLengthMenu" : "_MENU_ records per page"
        },
        // Disable sorting on the first column
        "aoColumnDefs" : [ {
            'bSortable' : false,
            'aTargets' : [ 0 ]
        } ]
    });
});

संपादित करें:

आप अपने <th> पर no-sort क्लास का उपयोग करके भी अक्षम कर सकते हैं,

और इस प्रारंभिक कोड का उपयोग करें:

// Disable sorting on the no-sort class
"aoColumnDefs" : [ {
    "bSortable" : false,
    "aTargets" : [ "no-sort" ]
} ]

संपादित करें 2

इस उदाहरण में मैं पुराने ब्लॉग पोस्ट के बाद, बूटस्ट्रैप के साथ डेटाटेबल का उपयोग कर रहा हूं। अब बूटस्ट्रैप के साथ डेटाटाबल्स स्टाइल के बारे में अद्यतन सामग्री के साथ एक लिंक है।


पहला कॉलम सॉर्टिंग अक्षम करने के लिए, डेटाटेबल्स jquery में नीचे दिए गए कोड के साथ प्रयास करें। नल यहां सक्षम सॉर्टिंग का प्रतिनिधित्व करता है।

$('#example').dataTable( {
  "aoColumns": [
  { "bSortable": false },
  null,
  null,
  null
  ]
} );

JQuery डेटाटेबल्स में कॉलम पर छंटनी अक्षम करें


भविश के जवाब को अपडेट करने के लिए (जो मुझे लगता है कि डेटाटेबल्स के पुराने संस्करण के लिए है और मेरे लिए काम नहीं किया है)। मुझे लगता है कि उन्होंने विशेषता नाम बदल दिया है। इसे इस्तेमाल करे:

<thead>
    <tr>
        <td data-sortable="false">Requirements</td>
        <td data-sortable="false">Automated</td>
        <td>Created On</td>
    </tr>
</thead>
<tbody>
    <tr>
        <td>

यदि आप पहली कॉलम order करने योग्य प्रॉपर्टी को गलत पर सेट करते हैं, तो आपको डिफ़ॉल्ट order कॉलम भी सेट करना होगा अन्यथा यह काम नहीं करेगा क्योंकि पहला कॉलम डिफ़ॉल्ट ऑर्डरिंग कॉलम है। नीचे दिया गया उदाहरण पहले कॉलम पर सॉर्टिंग अक्षम करता है लेकिन डिफ़ॉल्ट कॉलम कॉलम के रूप में दूसरा कॉलम सेट करता है (याद रखें डेटाटेबल्स इंडेक्स शून्य आधारित हैं)।

$('#example').dataTable( {
  "order": [[1, 'asc']],
  "columnDefs": [
    { "orderable": false, "targets": 0 }
  ]
} );

यदि आपको पहले से ही कुछ कॉलम छिपाना है, जैसे कि मैं अंतिम नाम कॉलम छुपाता हूं। मुझे बस fname, lname को जोड़ना पड़ा, इसलिए मैंने क्वेरी बनाई लेकिन उस कॉलम को फ्रंट एंड से छुपाएं। ऐसी स्थिति में सॉर्टिंग अक्षम करने में संशोधन हैं:

    "aoColumnDefs": [
        { 'bSortable': false, 'aTargets': [ 3 ] },
        {
            "targets": [ 4 ],
            "visible": false,
            "searchable": true
        }
    ],

ध्यान दें कि मैंने यहां छुपा कार्यक्षमता रखी है

    "columnDefs": [
            {
                "targets": [ 4 ],
                "visible": false,
                "searchable": true
            }
        ],

फिर मैंने इसे "aoColumnDefs" में विलय कर दिया


यही वह है जिसे आप ढूंढ रहे हैं:

$('#example').dataTable( {
      "aoColumnDefs": [
          { 'bSortable': false, 'aTargets': [ 1 ] }
       ]
});

वर्ग का उपयोग करना:

<table  class="table table-datatable table-bordered" id="tableID">
    <thead>
        <tr>
            <th class="nosort"><input type="checkbox" id="checkAllreInvitation" /></th>
            <th class="sort-alpha">Employee name</th>
            <th class="sort-alpha">Send Date</th>
            <th class="sort-alpha">Sender</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td><input type="checkbox" name="userUid[]" value="{user.uid}" id="checkAllreInvitation" class="checkItemre validate[required]" /></td>
            <td>Alexander Schwartz</td>
            <td>27.12.2015</td>
            <td>[email protected]</td>
        </tr>
    </tbody>
</table>
<script type="text/javascript">
    $(document).ready(function() {
        $('#tableID').DataTable({
            'iDisplayLength':100,
            "aaSorting": [[ 0, "asc" ]],
            'aoColumnDefs': [{
                'bSortable': false,
                'aTargets': ['nosort']
            }]
        });
    });
</script>

अब आप "nosort" कक्षा को <TH> दे सकते हैं


columnDefs अब कक्षा स्वीकार करता है। मैं कहूंगा कि यह पसंदीदा तरीका है यदि आप अपने मार्कअप में अक्षम करने के लिए कॉलम निर्दिष्ट करना चाहते हैं:

<table>
    <thead>
        <tr>
            <th>ID</th>
            <th>Name</th>
            <th class="datatable-nosort">Actions</th>
        </tr>
    </thead>
    ...
</table>

फिर, अपने जेएस में:

$("table").DataTable({
    columnDefs: [{
        targets: "datatable-nosort",
        orderable: false
    }]
});

1.10.5 के रूप में, बस शामिल करें

'आदेश योग्य: झूठा'

कॉलमडिफ में और अपने कॉलम को लक्षित करें

'लक्ष्य: [0,1]'

तालिका इस तरह की होनी चाहिए:

var table = $('#data-tables').DataTable({
    columnDefs: [{
        targets: [0],
        orderable: false
    }]
});

$("#example").dataTable(
  {
    "aoColumnDefs": [{
      "bSortable": false, 
      "aTargets": [0, 1, 2, 3, 4, 5]
    }]
  }
);




datatables