JQuery DataTables में एक विशेष कॉलम के लिए छँटाई अक्षम करें

Question

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

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

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

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

लेकिन इसके बाद भी वांछित परिणाम नहीं आए।

Comments

मैंने अपना उत्तर संपादित कर लिया है, एक विकल्प के साथ जहाँ आप अपनी TH परिभाषा में अक्षम कॉलम सेट कर सकते हैं।

— पाउलो फिडाल्गो

सीएसएस का उपयोग करके बटन को अक्षम करें। इस पृष्ठ को देखें। datatables.net/forums/discussion/21164/…

— यूजीन जोसेफ

तुम भी देखने के लिए चाहते हो सकता है cbabhusal.wordpress.com/2015/05/20/...

— जादूगर

Answer 1

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

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

Comments

यह मेरे लिए काम किया। यदि आप पहला कॉलम, 'aTargets': [-1] को क्रमबद्ध करना चाहते हैं, तो दूसरा 'aTargets': [1], तीसरे 'aTargets': [2] इत्यादि के लिए।

— लसांग

आप बस 'aTargets' कर सकते हैं: [1, 2]

— Adrien Be

@Lasang - क्या तुम सच में मतलब है [-1], तो [1], [2], आदि? क्या -1मतलब है? स्तंभों के लिए अनुक्रमण 1डेटाटैब पर शुरू नहीं होता है ?

— दान निसेनबौम

-1तालिका के अंत से सूचकांक की गिनती है। ( -1तालिका का अंतिम स्तंभ है)

— रामी नस्र

DataTables 1.10.5 के रूप में अब HTML5 डेटा- * विशेषताओं का उपयोग करके आरंभिक विकल्पों को परिभाषित करना संभव है। देखें stackoverflow.com/a/32281113/1430996

— Jeromy फ्रेंच

Answer 2

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

-from डेटाटेबल्स उदाहरण के लिए - HTML5 डेटा- * विशेषताएँ - तालिका विकल्प

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

<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/ पर एक काम उदाहरण ।

Comments

IMO, यह यहां सबसे अच्छा जवाब है, सबसे सरल और सबसे सुंदर दृष्टिकोण

— हैमैन सैमुअल

यह सॉर्ट कार्यक्षमता को अक्षम करता है, लेकिन मैंने (1.10.12 में) पाया कि कॉलम अभी भी डिफ़ॉल्ट रूप से सॉर्ट किया जाता है जब DataTable को इनिशियलाइज़ किया जाता है, जो कॉलम को आरोही सॉर्ट ग्लिफ़ के साथ स्टाइल करता है। यदि आप ऐसा नहीं चाहते हैं, तो आप इस तरह छँटाई किए बिना डेटाटेबल को इनिशियलाइज़ कर सकते हैं: $ ('# example')। DataTable ({'ऑर्डर': []});

— ब्रायन मेरेल

@BrianMerrell Wellllllll ... उस पर गौर करें! jsfiddle.net/ja0ty8xr आपको उस व्यवहार के लिए एक GitHub मुद्दा खोलना चाहिए। :)

— जेरॉमी फ्रेंच

Answer 3

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

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

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

Comments

@Paulraj लिंक टूट गया है, क्या आप इसे बदलना चाहेंगे?

— टौफिक

DataTables 1.10.5 के रूप में अब HTML5 डेटा- * विशेषताओं का उपयोग करके आरंभिक विकल्पों को परिभाषित करना संभव है। देखें stackoverflow.com/a/32281113/1430996

— जेरॉमी फ्रेंच

Answer 4

डेटाटैबल्स का उपयोग 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 ]
        } ]
    });
});

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

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

और इस आरंभीकरण कोड का उपयोग करें:

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

EDIT 2

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

Comments

@larrylampco मैंने अद्यतन लिंक के साथ पोस्ट को अपडेट किया है।

— पाउलो फिदेल्गो

धन्यवाद .. जब हम छँटाई लागू करते हैं तो सीएसएस के नुकसान के बारे में क्या है

— शेंकर पौडेल

DataTables 1.10.5 के रूप में अब HTML5 डेटा- * विशेषताओं का उपयोग करके आरंभिक विकल्पों को परिभाषित करना संभव है। Stackoverflow.com/a/32281113/1430996 देखें

— Jeromy फ्रेंच

Answer 5

जो मैं उपयोग करता हूं, वह केवल थ्रेड td में एक कस्टम विशेषता जोड़ें और उस एटीआर मान को स्वचालित रूप से जांच कर छँटाई को नियंत्रित करता है।

तो HTML कोड होगा

<table class="datatables" cellspacing="0px" >

    <thead>
        <tr>
            <td data-bSortable="true">Requirements</td>
            <td>Test Cases</td>
            <td data-bSortable="true">Automated</td>
            <td>Created On</td>
            <td>Automated Status</td>
            <td>Tags</td>
            <td>Action</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>

और डेटाटेबल्स को इनिशियलाइज़ करने के लिए जावास्क्रिप्ट होगा (यह गतिशील रूप से टेबल इटसेल्फ से छँटाई जानकारी प्राप्त करेगा;)

$('.datatables').each(function(){
    var bFilter = true;
    if($(this).hasClass('nofilter')){
        bFilter = false;
    }
    var columnSort = new Array; 
    $(this).find('thead tr td').each(function(){
        if($(this).attr('data-bSortable') == 'true') {
            columnSort.push({ "bSortable": true });
        } else {
            columnSort.push({ "bSortable": false });
        }
    });
    $(this).dataTable({
        "sPaginationType": "full_numbers",
        "bFilter": bFilter,
        "fnDrawCallback": function( oSettings ) {
        },
        "aoColumns": columnSort
    });
});

Comments

आपको data-bSortableइसके बजाय उपयोग करना चाहिए bSortable। bSortableमान्य HTML विशेषता नहीं है।

— जेम्स डोनली

DataTables 1.10.5 के रूप में अब HTML5 डेटा- * विशेषताओं का उपयोग करके आरंभिक विकल्पों को परिभाषित करना संभव है। Stackoverflow.com/a/32281113/1430996 देखें

— Jeromy फ्रेंच

Answer 6

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
    }]
});

Answer 7

यहाँ आप कुछ कॉलम को निष्क्रिय करने के लिए उपयोग कर सकते हैं:

 $('#tableId').dataTable({           
            "columns": [
                { "data": "id"},
                { "data": "sampleSortableColumn" },
                { "data": "otherSortableColumn" },
                { "data": "unsortableColumn", "orderable": false}
           ]
});

तो आपको बस इतना करना होगा कि आप "क्रमबद्ध" जोड़ सकते हैं: उस कॉलम के लिए जो आप छांटना नहीं चाहते हैं।

Answer 8

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

Comments

भावेश का जवाब चतुर है, लेकिन बहुत अधिक है। सॉर्टिंग को अक्षम करने के लिए बस अभिनव के उत्तर का उपयोग करें। पहले कॉलम पर छँटाई को अक्षम करना aoCumnumnDefs विकल्प में एक कॉलम लक्ष्य जोड़ें:"bSortable": false, "aTargets": [0]

— मैथ्यू

Answer 9

एकल कॉलम को अक्षम करने के लिए इस उदाहरण को आज़माएं:

<script type="text/javascript">                         
    $(document).ready(function() 
    {
        $("#example").dataTable({
           "aoColumnDefs": [
              { 'bSortable': false, 'aTargets': [ 0 ] }
           ]
        });
    });                                         
</script>

एकाधिक कॉलम के लिए इस उदाहरण का प्रयास करें: आपको केवल कॉलम संख्या जोड़ने की आवश्यकता है। डिफ़ॉल्ट रूप से यह 0 से शुरू हो रहा है

<script type="text/javascript">                         
    $(document).ready(function() 
    {
        $("#example").dataTable({
           "aoColumnDefs": [
              { 'bSortable': false, 'aTargets': [ 0,1,2,4,5,6] }
           ]
        });
    });                                         
</script>  

यहाँ केवल Column 3काम करता है

Answer 10

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

'क्रमबद्ध: असत्य'

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

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

तालिका को पसंद करना चाहिए:

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

Answer 11

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

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

Comments

यह वह उत्तर है जिसने मेरे लिए 17 जुलाई, 2020

— ब्रायन

Answer 12

"aoColumnDefs" : [   
{
  'bSortable' : false,  
  'aTargets' : [ 0 ]
}]

यहां 0कॉलम का इंडेक्स है, यदि आप चाहते हैं कि कई कॉलम को क्रमबद्ध न किया जाए, तो कॉलम इंडेक्स वैल्यू का उल्लेख करेंcomma(,)

Comments

क्या सभी स्तंभों के लिए छंटाई अक्षम करना संभव है?

— फिदेल कास्त्रो

हाँ यह संभव है, आप इस लिंक पर जा सकते हैं जानने के लिए cbabhuse.wordpress.com/2015/08/18/…

— illusionist

Answer 13

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

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

Comments

यह एक अच्छा दृष्टिकोण की तरह लगता है ... अगर यह काम किया है, लेकिन यह मेरे लिए नहीं है। क्या यह प्रलेखित है?

— AllInOne

@AllInOne: हाँ, के लिए data-orderable... देख stackoverflow.com/a/32281113/1430996 । data-sortableयह भी काम करता है, लेकिन मुझे यह नहीं मिल रहा है कि यह कहां से प्रलेखित है।

— जेरोमे फ्रेंच

ज्यादा बेहतर समाधान

— वाशिंगटन मोरिस

Answer 14

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

<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>[e-mail]</td>
        </tr>
    </tbody>
</table>
<script type="text/javascript">
    $(document).ready(function() {
        $('#tableID').DataTable({
            'iDisplayLength':100,
            "aaSorting": [[ 0, "asc" ]],
            'aoColumnDefs': [{
                'bSortable': false,
                'aTargets': ['nosort']
            }]
        });
    });
</script>

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

Answer 15

यह मेरे लिए एक कॉलम के लिए काम करता है

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

Answer 16

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

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

ध्यान दें कि मेरे पास यहां छिपी हुई कार्यक्षमता थी

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

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

Answer 17

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

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

2. डिफॉल्ट ऑर्डर को डिसेबल करने के लिए, आप इसका उपयोग भी कर सकते हैं:

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

Answer 18

आप स्तंभ पर .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()
        ];

Answer 19

दो तरीके हैं, एक HTML में परिभाषित किया गया है जब आप टेबल हेडर को परिभाषित करते हैं

<thead>
  <th data-orderable="false"></th>
</thead>

एक और तरीका जावास्क्रिप्ट का उपयोग कर रहा है, उदाहरण के लिए, आपके पास तालिका है

<table id="datatables">
    <thead>
        <tr>
            <th class="testid input">test id</th>
            <th class="testname input">test name</th>
    </thead>
</table>

फिर,

$(document).ready(function() {
    $('#datatables').DataTable( {
        "columnDefs": [ {
            "targets": [ 0], // 0 indicates the first column you define in <thead>
            "searchable": false
        }
        , {
            // you can also use name to get the target column
            "targets": 'testid', // name is the class you define in <th>
            "searchable": false
        }
        ]
    }
    );
}
);

Answer 20

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

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

Answer 21

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

$(".data-cash").each(function (index) {
  $(this).dataTable({
    "sDom": "<'row-fluid'<'span6'l><'span6'f>r>t<'row-fluid'<'span6'i><'span6'p>>",
    "sPaginationType": "bootstrap",
    "oLanguage": {
      "sLengthMenu": "_MENU_ records per page",
      "oPaginate": {
        "sPrevious": "Prev",
        "sNext": "Next"
      }
    },
    "bSort": false,
    "aaSorting": []
  });
});

Answer 22

यहाँ जवाब है!

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

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

Answer 23

तालिका के वें भाग में "no-sort" सेट करें फिर css .no-sort {पॉइंटर-ईवेंट जोड़ें: कोई महत्वपूर्ण नहीं; कर्सर: डिफ़ॉल्ट महत्वपूर्ण! पृष्ठभूमि छवि: कोई नहीं! महत्वपूर्ण } इसके द्वारा यह सिर में एरो अपडाउन और डिसबल इवेंट को छिपा देगा।