Question

我使用插件Datatables，并且当用户通过移动设备连接时我试图隐藏列。

该链接显示了Datatables的工作原理。

我认为我在数据表的属性中写了一些违反响应式风格的东西。

如果我使用responsive: true总是隐藏除了窗口大小之外的所有列。我的意思是，它确实有效，但是，即使它是一个24英寸的窗口，也总是隐藏所有列。

如果我添加rowReorder: { selector: 'td:nth-child(2)' }没有做任何事情。

我的代码：

var tabla = $("#"+idTabla).DataTable({
    serverSide: true,
    ajax: {
        url: url,
        type: "POST",
        data: {tipo : tipo, interface: interface},
        error: function (xhr, status, errorThrown) {
            console.log(xhr.status);
            console.log(xhr.responseText);
        }
    },
    order: [[ orden[0], orden[1] ]],
    language: {
        url: "../js/datatables/Spanish.json"
    },
    pageLength: 30,
    sScrollY: calcularAlturaTabla(),
    deferRender: true,
    scroller: {
        loadingIndicator: true
    },
    dom: "Bfrtip",
    buttons: [
        {
            text: "Excel",
            action: function (e, dt, node, config) {
                ... // irrelevant
            }
        },
    ],
    scrollX: "100%", // because if not, did not move the headers
    aoColumnDefs: [
        { "bVisible": ocultar[0], "aTargets": ocultar[1] }
    ],
    drawCallback: function (settings) {
        if (agrupar) {
            agruparFilas(this);
        }
    },


    // responsive: {
    //     breakpoints: [
    //         { "name": 'screen-xs',  "width": 600 }
    //     ]
    // },
    // columnDefs: [
    //     { "className": 'screen-xs', "aTargets": [1,2,3] }
    // ]


    // rowReorder: {
    //     selector: 'td:nth-child(2)'
    // },

    // responsive: true
});

已添加链接：

<script type="text/javascript" src="../js/jquery.min.js"></script>
<script type="text/javascript" src="../js/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" href="../js/datatables/datatables.min.css" />
<script type="text/javascript" src="../js/datatables/datatables.min.js"></script>
<script type="text/javascript" src="../js/datatables/Buttons-1.2.2/js/buttons.print.min.js"></script>
<script type="text/javascript" src="../js/datatables/Buttons-1.2.2/js/dataTables.buttons.min.js"></script>
<script type="text/javascript" src="../js/datatables/Buttons-1.2.2/js/buttons.html5.min.js"></script>
<script type="text/javascript" src="../js/datatables/Responsive-2.1.0/js/dataTables.responsive.min.js"></script>
<link rel="stylesheet" href="../js/datatables/Responsive-2.1.0/css/responsive.dataTables.min.css" />

JS Datatables - 响应不正常

0 个答案: