dataTables - cara membuat semua kolom dapat diurutkan di 'draw.dt'

Saya memiliki kumpulan data yang diambil ke dataTable melalui Ajax dan ada penundaan waktu yang berarti pengguna dapat melakukan tindakan sebelum dimuat. Saya harus memuat kumpulan data ini sekaligus, jadi kali ini saya tidak dapat menggunakan pemrosesan sisi server untuk menyajikannya dalam beberapa bagian.

Saya menggunakan Tombol dataTables untuk unduhan xls di dalamnya, yang saya nonaktifkan hingga kumpulan data tiba, lalu aktifkan kembali. Jika saya tidak melakukan ini, pengguna dapat mengunduh spreadsheet kosong sebelum permintaan ajax selesai. Jadi, untuk tombolnya, saya mengkodekannya seperti ini:

buttons: [
        {
            extend: 'excel',
            text: '<i class="fa fa-file-excel-o"></i>',
            titleAttr: 'Download to Excel',
            enabled: false
        },
    ],

Kemudian:

table.on( 'draw.dt', function () {
    table.buttons().enable();
});

Saya perlu melakukan hal yang sama dengan kolom yang dapat dipesan karena, jika kolom yang dapat dipesan diklik sebelum data dimuat, pesan yang ditampilkan berubah dari 'Memuat' menjadi 'Tidak ada data yang tersedia di tabel' (dapat dimengerti), tetapi ini bukan pengalaman pengguna yang luar biasa.

Saya mengatur setiap kolom sebagai orderable: false seperti ini:

columns: [
        {
            data: 'myData', 
            orderable: false, // all columns are set to false like this
        },

Berhasil, ini mengatur semua kolom sehingga tidak dapat diurutkan. Yang tidak bisa saya lakukan adalah membuat semuanya dapat dipesan setelah data dimuat.

Apa yang saya harapkan akan menjadi mungkin adalah sesuatu seperti ini, tetapi tidak ada yang saya coba akan berhasil:

table.on( 'draw.dt', function () {
    table.columns().orderable().enable();
});

Ada ide? Jika saya harus mengaktifkan setiap kolom satu per satu maka tidak apa-apa juga, saya juga tidak dapat menemukan cara untuk melakukannya.

Terima kasih sebelumnya.


javascript jquery datatables
person user783322    schedule 24.05.2018    source sumber

Jawaban (1)


arrow_upward
1
arrow_downward

Alasan mengapa menyetel orderable: false selama inisialisasi, lalu mengubahnya nanti dengan table.columns().orderable().enable(); tidak akan berfungsi adalah karena orderable: false merupakan opsi inisialisasi. Karena cara kerja DataTables, Anda tidak dapat mengubah opsi inisialisasi setelah inisialisasi selesai. Ini berarti Anda perlu mencari cara lain untuk menonaktifkan pemesanan saat data sedang dimuat.

Secara pribadi, jika ini hanya pemuatan awal, saya hanya akan menyembunyikan tabel dengan style="display: none;" sampai Anda dapat memanggil panggilan balik initComplete, lalu panggil saja $(...).show();. Jika Anda tidak ingin menyembunyikan seluruh tabel saja, Anda dapat menyembunyikan header secara selektif (mungkin $.("#table thead").hide();), dan menampilkannya setelah pemuatan.

Dengan situs yang saya kembangkan, kami memiliki situasi serupa di mana sekitar 50 ribu baris dimuat sekaligus. Saya menggunakan $.blockUI() untuk menempatkan pemblokir popup khusus di atas tabel saat sedang melakukan ajax panggilan. Saya rasa solusi ini memiliki pengalaman UI terbaik. Anda dapat menggunakan $.blockUI() untuk secara selektif menerapkan modal pemblokiran pada tabel, dengan pesan pemuatan khusus.

person Rich    schedule 25.05.2018