DataTables可滚动表格而不是折叠表格

Question

在移动视图中的DataTables中，是否可以将表格设置为水平滚动，而不是将表格折叠为“响应式”表格？

实际上，我的数据表在移动设备中如下所示：

​

​

在展开状态下，它是如此丑陋，因为我在最后一列中有一些按钮，所以我想知道是否有一种方法可以使表格“全宽”，并且只需查看用户必须在该卡片中水平滚动的其他列。

下面是我的datatable配置

 $('#table').DataTable({
        responsive: true,
        destroy: true,
        data: dati,
        select: false,
        ordering: false,
        lengthChange: false,
        pageLength: 5,
        info: false,
        pagingType: "numbers",
        dom: 'B<t><p>',
        columns: [
            {
                data: 'DATA',
                render: data => {
                    return moment(data).format('DD/MM/YYYY');
                }
            },
            { data: 'ORA' },
            { data: 'OPERATORE' },
            { data: 'OPERAZIONE' },
            {
                data: 'IMPORTO',
                render: data => {
                    return '€' + data.toFixed(2)
                }
            },
            {
                data: null,
                defaultContent: ''
            }
        ],
        buttons: [
            {
                extend: 'copy',
                exportOptions: {
                    columns: [0, 1, 2, 3, 4]
                }
            },
            {
                extend: 'csv',
                exportOptions: {
                    columns: [0, 1, 2, 3, 4]
                }
            },
            {
                extend: 'excel',
                exportOptions: {
                    columns: [0, 1, 2, 3, 4]
                }
            },
            {
                extend: 'pdf',
                exportOptions: {
                    columns: [0, 1, 2, 3, 4]
                }
            },
            {
                extend: 'print',
                exportOptions: {
                    columns: [0, 1, 2, 3, 4]
                }
            }
        ],
        initComplete: function () {
            var $buttons = $('.dt-buttons').hide();
            $("#export_type").on("click", "a", function (event) {
                event.preventDefault();
                var btnClass = $(this).attr("data-export")
                    ? '.buttons-' + $(this).attr("data-export")
                    : null;
                if (btnClass) $buttons.find(btnClass).click();
            });
        }
    });

实际上，我已经尝试过将responsive设置为false，并将scrollX设置为true，在移动设备上看起来“还可以”，但在没有responsive标签设置为true的web中，它不会采用全宽，并且当调整屏幕大小时它会“中断”

​

​

Answer 1

您可以使用对象作为“响应性”设置来评估屏幕大小，以便在屏幕大小低于一定宽度时将“响应性”设置为false。

例如：

const isLargerThanMobileScreen = ($(window).width() > 480) ? true : false;

$('#table').DataTable( {
   "scrollX": true,
   "responsive": isLargerThanMobileScreen, 
} );