Javascript 兩個Datatables分別套用display none/block後其中一個table無法responsive

#javascript #datatables #responsive

neilcwn20 2022-08-25 14:07:25 ‧ 958 瀏覽

分享至

在首頁的部分新增一個Datatables後
內頁的Datatables無法responsive
想請問各位大神們這是什麼原因
小的新手上路請用力鞭打謝謝！
有需要什麼畫面可以留言我會再補上！

兩個table的class="display dtr-control dataTable no-footer dtr-column"

(寬992px)

寬度縮小(991px)後下面的table主體會沒辦法縮小

YT連結示例-無法正常responsive
https://youtu.be/ZbcBiG_bm0U

YT連結示例-正常版本
https://youtu.be/54rmnQsTAQ4

登入發表討論

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

1 個回答

sky940811

iT邦研究生 5 級 ‧ 2022-08-25 14:30:18

如果兩個Table是在同一個頁面的話
可以檢查一下設定
例如table的id分別為table1和table2
必須這樣套用

$(document).ready(function() {
    $('#table1','#table2').DataTable();
} );

若寫成這樣會有異常

$(document).ready(function() {
    $('#table1,#table2').DataTable();
} );

回應 2
分享
檢舉

neilcwn20 iT邦新手 5 級 ‧ 2022-08-25 14:55:07 檢舉

您好！
我是分開寫的

首頁table

$('#table1').DataTable({
    responsive: {
            details: {
                type: 'column'
            }
        },
    columnDefs: [ {
            className: 'dtr-control',
            orderable: false,
            targets:   0
        },
});

內頁table

$('#table2').DataTable({
    responsive: {
            details: {
                type: 'column'
            }
        },
    columnDefs: [ {
            className: 'dtr-control',
            orderable: false,
            targets:   0
        },
});

再麻煩您替我解答謝謝您！