วิธีทำให้ DataTables แสดงเฉพาะส่วนย่อยของคอลัมน์ จากนั้นให้คอลัมน์อื่นๆ ปรากฏโดยการสลับ

ฉันมี JS ต่อไปนี้

$(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 หรือ DataTablesExample

ซึ่งสร้างตารางต่อไปนี้ที่ให้ผู้ใช้สามารถสลับคอลัมน์ทั้งหกได้โดยคลิกที่ลิงก์ถัดจาก Toggle column

ป้อนคำอธิบายรูปภาพที่นี่

สิ่งที่ฉันต้องการทำคือทำให้ตารางแสดงเฉพาะคอลัมน์ Name และ Position เป็นค่าเริ่มต้นและซ่อนคอลัมน์ที่เหลือ เฉพาะเมื่อผู้ใช้สลับคอลัมน์อื่นที่ต้องการเท่านั้นคอลัมน์นั้นจึงจะปรากฏขึ้น สิ่งนี้จะเกิดขึ้นได้อย่างไร?

ในความเป็นจริงฉันมีประมาณ 50 คอลัมน์ที่จะแสดง ขณะนี้มันล้นหน้า ไม่แน่ใจว่าวิธีที่ดีที่สุดในการแสดงกรณีดังกล่าวคืออะไร


javascript jquery datatables jquery-datatables
person neversaint    schedule 21.05.2015    source แหล่งที่มา

คำตอบ (2)


arrow_upward
3
arrow_downward

ด้วย ColVis

คุณต้องใช้ส่วนขยาย ColVis สำหรับ Datatables

เป็นไปได้มากว่าคุณต้องการซ่อนบางคอลัมน์ในตอนแรก คุณสามารถทำได้โดยใช้โค้ดด้านล่าง

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

ดูการสาธิต JSFiddle นี้

นอกจากนี้ ส่วนขยาย ColVis ยังช่วยให้คุณสามารถจัดกลุ่มคอลัมน์ และสลับการมองเห็นกลุ่มแทน ของแต่ละคอลัมน์ซึ่งอาจมีประโยชน์หากคุณมี 50 ฟิลด์

หากคุณมีช่องจำนวนมากขนาดนั้น ฉันจะพิจารณาแสดงรายละเอียดเพิ่มเติม หรือ ส่วนขยายการตอบสนอง พร้อมด้วย ColVis คุณอาจสามารถรวมสิ่งเหล่านี้เข้าด้วยกันได้

ไม่มี ColVis

สามารถทำได้โดยไม่ต้องใช้ ColVis โดยใช้โค้ดด้านล่าง:

HTML

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

จาวาสคริปต์

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

ดูการสาธิต JSFiddle นี้

person Gyrocode.com    schedule 22.05.2015

arrow_upward
0
arrow_downward

คุณสามารถแสดงข้อมูลที่เหลือในตารางลูกได้

โปรดดู: https://www.datatables.net/examples/api/row_details.htmlโต๊ะเด็ก

person user2686282    schedule 21.05.2015
comment
ไม่ นี่คือการจัดการกับแถว ปัญหาของฉันคือคอลัมน์ล้น - person neversaint; 21.05.2015