dataTables - วิธีทำให้คอลัมน์ทั้งหมดเรียงลำดับได้บน 'draw.dt'

ฉันมีชุดข้อมูลที่ดึงข้อมูลลงใน dataTable ผ่าน Ajax และมีการหน่วงเวลาซึ่งหมายความว่าผู้ใช้สามารถดำเนินการก่อนที่จะโหลดได้ ฉันต้องโหลดชุดข้อมูลนี้ทั้งหมดในครั้งเดียว ดังนั้นฉันจึงใช้การประมวลผลฝั่งเซิร์ฟเวอร์เพื่อให้บริการเป็นชิ้นๆ ไม่ได้ในครั้งนี้

ฉันใช้ปุ่ม dataTables สำหรับการดาวน์โหลด xls ซึ่งฉันจะปิดการใช้งานจนกว่าชุดข้อมูลจะมาถึง จากนั้นจึงเปิดใช้งานอีกครั้ง หากฉันไม่ทำเช่นนี้ ผู้ใช้จะสามารถดาวน์โหลดสเปรดชีตว่างก่อนที่คำขอ ajax จะเสร็จสมบูรณ์ สำหรับปุ่มต่างๆ ฉันได้เขียนโค้ดไว้ดังนี้:

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

แล้ว:

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

ฉันต้องทำเช่นเดียวกันกับคอลัมน์ที่เรียงลำดับได้ เพราะหากคลิกคอลัมน์ที่เรียงลำดับได้ก่อนที่ข้อมูลจะโหลด ข้อความจะแสดงการเปลี่ยนแปลงจาก 'กำลังโหลด' เป็น 'ไม่มีข้อมูลในตาราง' (เข้าใจได้) แต่ไม่ใช่ประสบการณ์การใช้งานที่ดีนัก

ฉันกำลังตั้งค่าทุกคอลัมน์เป็น orderable: false ดังนี้:

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

ได้ผล โดยจะตั้งค่าคอลัมน์ทั้งหมดเพื่อไม่ให้เรียงลำดับได้ สิ่งที่ฉันทำไม่ได้คือทำให้สามารถสั่งซื้อทั้งหมดได้หลังจากที่โหลดข้อมูลแล้ว

สิ่งที่ฉันหวังว่าจะเป็นไปได้คือสิ่งนี้ แต่/ไม่มีอะไรที่ฉันพยายามจะได้ผล:

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

มีความคิดอะไรบ้าง? หากฉันต้องเปิดใช้งานแต่ละคอลัมน์แยกกันก็ไม่เป็นไร ฉันก็หาวิธีทำเช่นนั้นไม่ได้เช่นกัน

ขอบคุณล่วงหน้า.


person user783322    schedule 24.05.2018    source แหล่งที่มา


คำตอบ (1)


เหตุผลที่การตั้งค่า orderable: false ในระหว่างการกำหนดค่าเริ่มต้น แล้วเปลี่ยนในภายหลังด้วย table.columns().orderable().enable(); จะไม่ทำงานก็คือ orderable: false เป็น ตัวเลือกการเริ่มต้น เนื่องจากวิธีการทำงานของ DataTables คุณไม่สามารถเปลี่ยนตัวเลือกการเริ่มต้นได้หลังจากการกำหนดค่าเริ่มต้นเสร็จสมบูรณ์ ซึ่งหมายความว่าคุณต้องหาวิธีอื่นในการปิดใช้การเรียงลำดับในขณะที่ข้อมูลกำลังโหลด

โดยส่วนตัวแล้ว หากนี่เป็นเพียงการโหลดครั้งแรก ฉันจะซ่อนตารางด้วย style="display: none;" จนกว่าคุณจะสามารถเรียกการโทรกลับ initComplete ได้ จากนั้นจึงโทร $(...).show(); หากคุณไม่ต้องการซ่อนทั้งตาราง คุณสามารถเลือกซ่อนส่วนหัวได้ (อาจเป็น $.("#table thead").hide();) และแสดงไว้หลังจากการโหลด

ด้วยไซต์ที่ฉันกำลังพัฒนา เรามีสถานการณ์ที่คล้ายกันซึ่งมีการโหลดแถว 50,000 แถวในคราวเดียว ฉันใช้ $.blockUI() เพื่อวางตัวป้องกันป๊อปอัปแบบกำหนดเองไว้เหนือตารางในขณะที่มันดำเนินการ ajax เรียก. ฉันคิดว่าโซลูชันนี้มีประสบการณ์ UI ที่ดีที่สุด คุณสามารถใช้ $.blockUI() เพื่อเลือกใช้โมดอลการบล็อกบนตาราง โดยมีข้อความโหลดแบบกำหนดเอง

person Rich    schedule 25.05.2018