JQuery DataTables içinde belirli bir sütun için sıralamayı devre dışı bırak

Tablo alanlarını sıralamak için jQuery DataTables eklentisini kullanıyorum . Sorum şu: Belirli bir sütun için sıralamayı nasıl devre dışı bırakabilirim? Aşağıdaki kod ile denedim, ama işe yaramadı:

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

Ayrıca aşağıdaki kodu denedim:

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

ancak bu yine de istenen sonuçları vermedi.

Aradığın şey bu:

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

DataTables 1.10.5'ten itibaren HTML5 data- * özniteliklerini kullanarak başlatma seçeneklerini tanımlamak artık mümkün.

-from DataTables örneği - HTML5 data- * nitelikleri - tablo seçenekleri

Böylece sıralanabilir olmak istemediğiniz sütunun data-orderable="false"üzerinde kullanabilirsiniz th. Örneğin, aşağıdaki tablodaki ikinci "Avatar" sütunu sıralanmayacaktır:

<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/ adresinde çalışan bir örneğe bakın .

İlk sütun sıralamasını devre dışı bırakmak için datatables jquery'de aşağıdaki kodu deneyin. Null, buradaki sıralama etkinliğini temsil eder.

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

JQuery Veri Tablolarında Bir Sütunda Sıralamayı Devre Dışı Bırakma

Datatables 1.9.4 kullanarak bu kod ile ilk sütun için sıralama devre dışı bıraktım:

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

DÜZENLE:

no-sortSınıfınızdaki sınıfı kullanarak bile devre dışı bırakabilirsiniz <th>,

ve bu başlatma kodunu kullanın:

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

DÜZENLEME 2

Bu örnekte, eski bir blog gönderisini takiben Bootstrap ile Datables kullanıyorum. Şimdi Boottable ile Datatables şekillendirme hakkında güncellenmiş malzeme ile bir bağlantı var .

Ne kullanmak sadece thd td özel bir öznitelik eklemek ve bu attr değerini otomatik olarak kontrol ederek sıralama kontrol eder.

HTML kodu

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

Ve veri tablolarını başlatmak için JavaScript (dinamik olarak sıralama bilgilerini kendi tablosundan alacak;)

$('.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
    });
});

columnDefsşimdi bir dersi kabul ediyor. İşaretlemenizde devre dışı bırakılacak sütunları belirtmek istiyorsanız, bunun tercih edilen yöntem olduğunu söyleyebilirim:

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

Ardından, JS'nizde:

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

Devre dışı bırakılacak belirli sütunu devre dışı bırakmak için aşağıdakileri kullanabilirsiniz:

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

Tek yapmanız gereken sıralanabilir olmasını istemediğiniz sütuna "orderable": false eklemektir.

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

Tek sütun sıralama devre dışı bırakma için şu örneği deneyin:

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

Birden çok sütun için bu örneği deneyin: sadece sütun numarası eklemeniz gerekir. Varsayılan olarak 0'dan başlar

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

İşte sadece Column 3çalışıyor

İtibariyle 1.10.5 , basitçe dahil

'orderable: false'

sütununda gösterir ve sütununuzu

'hedefler: [0,1]'

Tablo şöyle olmalıdır:

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

İLK sütun orderableözelliğini false olarak ayarlarsanız, varsayılan sütunu da ayarlamanız gerekir , orderaksi takdirde ilk sütun varsayılan sipariş sütunu olduğundan çalışmaz. Aşağıdaki örnek ilk sütunda sıralamayı devre dışı bırakır, ancak ikinci sütunu varsayılan sipariş sütunu olarak ayarlar (dataTable'ların dizinlerinin sıfır temelli olduğunu unutmayın).

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

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

Buraya 0 birden çok sütun sıralanır istiyorsanız sütunun dizini vardır, söz sütun indeksi değerleri ayrılmışcomma(,)

Bhavish'in cevabını güncellemek için (ki bence DataTable'ların eski bir sürümü için ve benim için çalışmadı). Bence öznitelik adını değiştirdiler. Bunu dene:

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

Sınıfı kullanma:

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

Şimdi <TH> için "nosort" sınıfı verebilirsiniz

Bu benim için tek bir sütun için işe yarıyor

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

Zaten Soyadı sütununu gizlediğim gibi Bazı sütunları gizlemeniz gerekiyorsa. Ben sadece fname, lname bitirmek zorunda kaldı, bu yüzden sorgu yaptı ama ön uçtan bu sütunu gizlemek. Bu durumda Devre Dışı Bırak sıralamadaki değişiklikler şunlardır:

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

Burada Gizleme işlevine sahip olduğuma dikkat edin

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

Sonra onu birleştirdim "aoColumnDefs"

1. İlk sütundaki siparişi devre dışı bırakmak için aşağıdaki kodu kullanın:

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

2. Varsayılan siparişi devre dışı bırakmak için şunları da kullanabilirsiniz:

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

Sütunda .notsortable () yöntemini kullanabilirsiniz.

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

İki yol vardır, tablo başlıklarını tanımladığınızda html ile tanımlanır

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

Başka bir yol javascript kullanmaktır, örneğin, tablonuz var

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

sonra,

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

bunun gibi negatif dizin de kullanabilirsiniz:

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

Kod şöyle görünecektir:

$(".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": []
  });
});

İşte cevap!

targets sütun numarasıdır, 0 ile başlar

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

tablonun th "no-sort" sınıf ayarlamak sonra css ekleyin .no-sort {pointer-events: none! important; imleç: varsayılan! önemli; arka plan resmi: yok! önemli; } bu şekilde yukarı ok aşağı gizlemek ve kafa olayı disble.