Nonaktifkan pengurutan untuk kolom tertentu di jQuery DataTables

Saya menggunakan plugin jQuery DataTables untuk mengurutkan bidang tabel. Pertanyaan saya adalah: bagaimana cara menonaktifkan penyortiran untuk kolom tertentu? Saya sudah mencoba dengan kode berikut, tetapi tidak berhasil:

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

Saya juga sudah mencoba kode berikut:

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

tetapi ini masih tidak menghasilkan hasil yang diinginkan.

Inilah yang Anda cari:

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

Pada DataTables 1.10.5 sekarang mungkin untuk menentukan opsi inisialisasi menggunakan atribut data HTML5 *.

-dari Contoh DataTables - data HTML5 * atribut - opsi tabel

Sehingga Anda dapat menggunakan data-orderable="false"di thkolom Anda tidak ingin menjadi diurutkan. Misalnya, kolom kedua "Avatar" pada tabel di bawah ini tidak akan diurutkan:

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

Lihat contoh yang berfungsi di https://jsfiddle.net/jhfrench/6yxvxt7L/ .

Untuk membuat penyortiran kolom pertama dinonaktifkan, coba dengan kode di bawah ini di jatah datatables. Nol merupakan pengaktifan penyortiran di sini.

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

Nonaktifkan Penyortiran pada Kolom di jQuery Datatables

Menggunakan Datatables 1.9.4 Saya telah menonaktifkan penyortiran untuk kolom pertama dengan kode ini:

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

EDIT:

Anda dapat menonaktifkan bahkan dengan menggunakan no-sortkelas pada Anda <th>,

dan gunakan kode inisialisasi ini:

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

EDIT 2

Dalam contoh ini saya menggunakan Datables dengan Bootstrap, mengikuti posting blog lama. Sekarang ada satu tautan dengan materi yang diperbarui tentang styling Datatables dengan bootstrap .

Apa yang saya gunakan hanyalah menambahkan atribut khusus di thead td dan mengontrol penyortiran dengan memeriksa nilai attr secara otomatis.

Jadi kode HTML akan seperti itu

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

Dan JavaScript untuk menginisialisasi datatables akan (secara dinamis akan mendapatkan informasi pengurutan dari tabel itu sendiri;)

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

columnDefssekarang menerima kelas. Saya akan mengatakan ini adalah metode yang disukai jika Anda ingin menentukan kolom untuk dinonaktifkan di markup Anda:

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

Kemudian, di JS Anda:

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

Inilah yang dapat Anda gunakan untuk menonaktifkan kolom tertentu yang akan dinonaktifkan:

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

Jadi yang harus Anda lakukan adalah menambahkan "orderable": false ke kolom yang tidak ingin Anda sortir.

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

Untuk menonaktifkan penyortiran kolom tunggal, coba contoh ini:

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

Untuk Beberapa kolom coba contoh ini: Anda hanya perlu menambahkan nomor kolom. Secara default mulai dari 0

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

Di sini hanya Column 3berfungsi

Pada 1.10.5 , cukup sertakan

'dapat dipesan: salah'

di kolomDefs dan targetkan kolom Anda dengan

'target: [0,1]'

Tabel harus seperti:

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

Jika Anda mengatur orderableproperti kolom FIRST ke false, Anda juga harus mengatur orderkolom default jika tidak, karena kolom pertama adalah kolom pemesanan default. Contoh di bawah ini menonaktifkan pengurutan pada kolom pertama tetapi menetapkan kolom kedua sebagai kolom urutan default (ingat indeks dataTables berbasis nol).

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

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

Berikut 0adalah indeks kolom, jika Anda ingin beberapa kolom tidak diurutkan, sebutkan nilai indeks kolom yang dipisahkan olehcomma(,)

Untuk memperbarui jawaban Bhavish (yang menurut saya adalah untuk versi lama dari DataTables dan tidak berfungsi untuk saya). Saya pikir mereka mengubah nama atribut. Coba ini:

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

Menggunakan kelas:

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

Sekarang Anda bisa memberikan kelas "nosort" ke <TH>

Ini berfungsi untuk saya untuk satu kolom

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

Jika Anda sudah harus menyembunyikan beberapa kolom, seperti saya menyembunyikan kolom nama belakang. Saya hanya harus menggabungkan fname, lname, Jadi saya membuat permintaan tetapi menyembunyikan kolom itu dari ujung depan. Modifikasi dalam Disable sorting pada situasi seperti ini adalah:

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

Perhatikan bahwa saya memiliki fungsi Menyembunyikan di sini

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

Lalu saya menggabungkannya menjadi "aoColumnDefs"

1. Gunakan kode berikut untuk menonaktifkan pemesanan pada kolom pertama:

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

2. Untuk menonaktifkan pemesanan default, Anda juga dapat menggunakan:

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

Anda dapat mengarahkan menggunakan metode .notsortable () pada kolom

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

Ada dua cara, satu didefinisikan dalam html ketika Anda mendefinisikan header tabel

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

Cara lain menggunakan javascript, misalnya, Anda memiliki tabel

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

kemudian,

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

Anda juga dapat menggunakan indeks negatif seperti ini:

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

Kode akan terlihat seperti ini:

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

Inilah jawabannya!

targets adalah nomor kolom, dimulai dari 0

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

atur kelas "no-sort" di tabel lalu tambahkan css .no-sort {pointer-events: none! important; kursor: default! important; background-image: none! important; } dengan ini akan menyembunyikan panah dimutakhirkan dan mengacaukan acara di kepala.