Cara membuat DataTables hanya menampilkan sebagian kolom lalu mengizinkan yang lain muncul dengan beralih

Saya memiliki JS berikut

$(document).ready(function() {
    var table = $('#example').DataTable( {
        "scrollY": "200px",
        "paging": false
    } );

    $('a.toggle-vis').on( 'click', function (e) {
        e.preventDefault();

        // Get the column API object
        var column = table.column( $(this).attr('data-column') );

        // Toggle the visibility
        column.visible( ! column.visible() );
    } );
} );

JSFiddle atau DataTablesExample

Yang menghasilkan tabel berikut yang memungkinkan pengguna untuk mengganti enam kolom dengan mengklik link di sebelah Toggle column.

masukkan deskripsi gambar di sini

Yang ingin saya lakukan kemudian adalah membuat tabel hanya menampilkan kolom Name dan Position sebagai default dan menyembunyikan kolom lainnya. Hanya ketika pengguna mengganti kolom pilihannya yang lain maka kolom tersebut akan muncul. Bagaimana hal ini dapat dicapai?

Kenyataannya saya memiliki ~50 kolom untuk ditampilkan. Saat ini halamannya meluap. Tidak yakin apa cara terbaik untuk menampilkan kasing seperti itu.


javascript jquery datatables jquery-datatables
person neversaint    schedule 21.05.2015    source sumber

Jawaban (2)


arrow_upward
3
arrow_downward

Dengan ColVis

Anda perlu menggunakan ekstensi ColVis untuk Datatables.

Kemungkinan besar Anda ingin menyembunyikan beberapa kolom pada awalnya, Anda dapat melakukannya menggunakan kode di bawah ini.

var oTable = $('#example').DataTable({
   "dom": 'C<"clear">lfrtip',
   "columnDefs" : [          
       { "targets": [4,5], "visible": false }
   ]
});

Lihat JSFiddle ini untuk demonstrasi.

Ekstensi ColVis juga memungkinkan Anda mengelompokkan kolom dan mengalihkan visibilitas grup sebagai gantinya kolom individual yang dapat berguna jika Anda memiliki 50 bidang.

Jika Anda memiliki kolom sebanyak itu, saya juga akan mempertimbangkan untuk menampilkan detail tambahan atau ekstensi responsif bersama dengan ColVis, Anda mungkin dapat mengintegrasikannya bersama-sama.

Tanpa ColVis

Itu juga bisa dilakukan tanpa ColVis menggunakan kode di bawah ini:

HTML

<p>Toggle: <a href="/idjavascript:;" class="column-toggle" data-id="4">Start date</a> | <a href="/idjavascript:;" class="column-toggle" data-id="5">Salary</a></p>
<table id="example" class="display" cellspacing="0" width="100%">
<!-- skipped -->
</table>

JavaScript

var oTable = $('#example').DataTable({
    "dom": 'lfrtip',
    "columnDefs" : [          
        { "targets": [4,5], "visible": false }
     ]
});

$('a.column-toggle').on('click', function(e){
    var column = oTable.column($(this).data('id'));
    column.visible(!column.visible());
    e.preventDefault();
});

Lihat JSFiddle ini untuk demonstrasi.

person Gyrocode.com    schedule 22.05.2015

arrow_upward
0
arrow_downward

Anda dapat menampilkan informasi lainnya di tabel anak

lihat: https://www.datatables.net/examples/api/row_details.htmlMeja Anak

person user2686282    schedule 21.05.2015
comment
Tidak. Ini berurusan dengan baris. Masalah saya adalah kolom meluap. - person neversaint; 21.05.2015