Nonaktifkan pengurutan untuk kolom tertentu di jQuery DataTables


156

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.


1
Saya telah mengedit jawaban saya, dengan opsi di mana Anda dapat mengatur kolom menonaktifkan di definisi TH Anda.
Paulo Fidalgo

Nonaktifkan tombol menggunakan css. lihat halaman ini. datatables.net/forums/discussion/21164/…
Eugine Joseph

Anda mungkin juga ingin melihat cbabhusal.wordpress.com/2015/05/05/…
ilusionis

Jawaban:


176

Inilah yang Anda cari:

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

3
ini bekerja untuk saya. Jika Anda ingin mengurutkan kolom pertama, 'aTarget': [-1], untuk kedua 'aTarget': [1], untuk ketiga 'aTarget': [2] dan seterusnya.
Lasang

5
Anda cukup melakukan 'aTarget': [1, 2]
Adrien Be

2
@Lasang - Apakah Anda benar-benar berarti [-1], maka [1], [2], dll? Apa -1artinya? Bukankah pengindeksan untuk kolom dimulai pada 1untuk tabel data?
Dan Nissenbaum

1
-1adalah penghitungan indeks dari akhir tabel. ( -1adalah kolom terakhir dari tabel)
Ramy Nasr

1
Pada DataTables 1.10.5 sekarang mungkin untuk menentukan opsi inisialisasi menggunakan atribut data HTML5 *. Lihat stackoverflow.com/a/32281113/1430996
Jeromy French

87

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


9
IMO, ini adalah jawaban terbaik di sini, pendekatan paling sederhana dan paling elegan
Hamman Samuel

2
Ini menonaktifkan fungsi sortir, tetapi saya menemukan (pada 1.10.12) bahwa kolom masih diurutkan secara default ketika DataTable diinisialisasi, yang menata kolom dengan glyph sorting yang menaik. Jika Anda tidak menginginkan ini, Anda dapat menginisialisasi datatable tanpa mengurutkan seperti: $ ('# example'). DataTable ({'order': []});
Brian Merrell

@BrianMerrell Wellllllll ... lihat itu! jsfiddle.net/ja0ty8xr Anda harus membuka masalah GitHub untuk perilaku itu. :)
Jeromy French

64

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


@ Paulraj Tautan rusak, apakah Anda keberatan mengubahnya?
taufique

1
Pada DataTables 1.10.5 sekarang mungkin untuk menentukan opsi inisialisasi menggunakan atribut data HTML5 *. Lihat stackoverflow.com/a/32281113/1430996
Jeromy French

60

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 .


@larrylampco Saya telah memperbarui posting dengan tautan yang diperbarui.
Paulo Fidalgo

Terima kasih .. bagaimana dengan hilangnya css ketika kami menerapkan penyortiran
Shanker Paudel

1
Pada DataTables 1.10.5 sekarang mungkin untuk menentukan opsi inisialisasi menggunakan atribut data HTML5 *. Lihat stackoverflow.com/a/32281113/1430996
Jeromy French

27

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

3
Anda harus menggunakan data-bSortablebukan bSortable. bSortablebukan atribut HTML yang valid.
James Donnelly

Pada DataTables 1.10.5 sekarang mungkin untuk menentukan opsi inisialisasi menggunakan atribut data HTML5 *. Lihat stackoverflow.com/a/32281113/1430996
Jeromy French

15

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

10

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.


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

Jawaban Bhavesh adalah pintar, tetapi berlebihan. Untuk menonaktifkan penyortiran, cukup gunakan jawaban abhinav. Menonaktifkan pengurutan pada kolom pertama menambahkan target kolom dalam opsi aoColumnDefs:"bSortable": false, "aTargets": [0]
Matius

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


5

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

5

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

Ini adalah jawaban yang bekerja untuk saya pada 17 Juli 2020
Brian

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

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


apakah mungkin untuk menonaktifkan penyortiran untuk semua kolom?
fidel castro

Ya itu mungkin, Anda dapat mengunjungi tautan ini untuk mengetahui cbabhusal.wordpress.com/2015/08/18/…
ilusionis

3

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>

Ini sepertinya pendekatan yang bagus ... jika berhasil, tetapi tidak untuk saya. Apakah ini didokumentasikan?
AllInOne

1
@ AllInOne: ya, untuk data-orderable... lihat stackoverflow.com/a/32281113/1430996 . data-sortablejuga berfungsi, tetapi saya tidak dapat menemukan di mana itu didokumentasikan.
Jeromy French

solusi yang jauh lebih baik
Washington Morais

2

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>


2

Ini berfungsi untuk saya untuk satu kolom

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

1

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

1

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

1

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

0

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

0

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

0

Inilah jawabannya!

targets adalah nomor kolom, dimulai dari 0

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

-2

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.

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.