jquery - 如何在 Datatables.net 的响应式 View 中显示多于 1 行？

Question

这是我在桌面模式下的表格:

在响应式或移动 View 中，目前只有用户可以在不单击 + 按钮的情况下查看国家/地区名称，但我想在不单击 + 按钮的情况下显示(名称、买入价、卖出价)，并且当用户单击 + 按钮时显示用户其他列(日期、图表、国家名称)。
我该如何使用 datatables.net 的表格来做到这一点？

Answer 1

文档:

https://datatables.net/extensions/responsive/examples/column-control/columnPriority.html

因此，您必须在 DataTable 构造函数中正确使用 columnDefs 中的 responsivePriority:

$(document).ready(function() {
    $('#example').DataTable( {
        responsive: true,
        columnDefs: [
            { responsivePriority: 1, targets: 1 }, // name
            { responsivePriority: 2, targets: 2 }, // buy price
            { responsivePriority: 3, targets: 3 }, // sell price
            { responsivePriority: 4, targets: 0 },
            { responsivePriority: 5, targets: 4 },
            { responsivePriority: 6, targets: 5 }
        ]
    } );
} );

编辑:

好吧，这更复杂，所以...首先，将其用于固定列:How to fixed the last column of a responsive DataTable然后使用 row_details 插件(您必须通过迭代当前行来填充每行内的数据):https://datatables.net/examples/api/row_details.html