Question

我正在建立一个响应迅速的网站，因此我正在使用datatables，因为它有响应，我想change the datatable appearance在不同的@media screens。我想要做的是当我在桌面版时，表格将处于正常状态，而平板电脑表格我希望它位于FIXED COLUMNS当我在移动版时，我希望它像 Responsive Table就像这样。对此最好的方法是什么？我需要创建多个表还是只使用脚本？请告诉我。

Answer 1

这应该可以解决问题。您需要在再次初始化之前销毁第一个DataTable。

$(window).on('resize load', function () {
var width = $(window).width();
if (width < 720) {
    //for screens with less than 720px
    var table = $('#example').DataTable({
            destroy : true,
            "scrollY": "300px",
            "scrollX": "100%",
            "scrollCollapse": true,
            "paging": false
    });
    new $.fn.dataTable.FixedColumns(table);
} else {
    $('#example').DataTable({
        destroy : true,
        responsive: true
    });
}

}

Answer 2

我建议使用单个脚本根据媒体屏幕属性更改表格的外观。下面是一个示例脚本，它将根据屏幕宽度加载表的不同视图。

$(window).on('resize load', function () {
    var width = $(window).width();
    if (width < 720) {
        //for screens with less than 720px
        var table = $('#example').DataTable({
            "scrollY": "300px",
                "scrollX": "100%",
                "scrollCollapse": true,
                "paging": false
        });
        new $.fn.dataTable.FixedColumns(table);
    } else {
        $('#example').DataTable({
            responsive: true
        });
    }
}

响应式和固定列代码取自您提供的数据表网站链接。这段代码应该在窗口调整大小时启动，并在按照here解释时加载。

Answer 3

您可以使用bootstrap的类，如给定的链接所示 http://getbootstrap.com/2.3.2/scaffolding.html#responsive

如何使用jquery动态更改数据表？

3 个答案: