Question

我的表可以完美地从服务器中获取数据并显示所有内容。但是我正在尝试使其具有响应性，因此当用户使用移动/小型设备时，它应该隐藏我想要的列。

我正在使用smart admin实现这一目标。但是我没有成功。

这是我将桌面屏幕的大小调整为低于断点大小时遇到的错误：

sofar = abs(b[len(b[0])-1] - c)

我确定我已经加载了正确的脚本，因为它们与模板中的脚本相同：

Uncaught TypeError: Cannot read property 'style' of undefined
at sa (jquery.dataTables.min.js:4)
at n (jquery.dataTables.min.js:4)
at jquery.dataTables.min.js:4
at jquery.dataTables.min.js:4
at o (app.min.js:534)
at dispatch (jquery.min.js:3)
at q.handle (jquery.min.js:3)
at Object.trigger (jquery.min.js:4)
at HTMLDivElement.<anonymous> (jquery.min.js:4)
at Function.each (jquery.min.js:2)

这是用户提交表单时调用的函数：

<script src="<?php echo ASSETS_URL; ?>/js/plugin/datatables/jquery.dataTables.min.js"></script>
<script src="<?php echo ASSETS_URL; ?>/js/plugin/datatables/dataTables.colVis.min.js"></script>
<!-- <script src="<?php echo ASSETS_URL; ?>/js/plugin/datatables/dataTables.tableTools.min.js"></script> -->
<script src="<?php echo ASSETS_URL; ?>/js/plugin/datatables/dataTables.bootstrap.min.js"></script>
<script src="<?php echo ASSETS_URL; ?>/js/plugin/datatable-responsive/datatables.responsive.min.js"></script>

<script type="text/javascript" language="javascript"
    src="https://cdn.datatables.net/buttons/1.5.1/js/dataTables.buttons.min.js"></script>
<script type="text/javascript" language="javascript"
    src="https://cdn.datatables.net/buttons/1.5.1/js/buttons.flash.min.js"></script>
<script type="text/javascript" language="javascript"
    src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script type="text/javascript" language="javascript"
    src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/pdfmake.min.js"></script>
<script type="text/javascript" language="javascript"
    src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/vfs_fonts.js"></script>
<script type="text/javascript" language="javascript"
    src="https://cdn.datatables.net/buttons/1.5.1/js/buttons.html5.min.js"></script>
<script type="text/javascript" language="javascript"
    src="https://cdn.datatables.net/buttons/1.5.1/js/buttons.print.min.js"></script>

这是将在ajax请求之后填充的表：

var form = $("#form");
var responsiveHelper_dt_basic = undefined;
var breakpointDefinition = {
    tablet: 1024
};
var table = $('#myTable');

function procurar() {
        var responsiveHelper_dt_basic = undefined;
        $("#myTable").DataTable().destroy();
        table = $('#myTable').DataTable({
            "language": {
                "url": "http://cdn.datatables.net/plug-ins/9dcbecd42ad/i18n/Portuguese.json"
            },
            "processing": true,
            "serverSide": true,
            "ajax": {
                url: "my/file.php", // json datasource
                type: "post", // method  , by default get
                data: function(d) {
                    d.form = form.serializeObject();
                },
                error: function(err) { // error handling
                    console.log("error", err);
                }
            },
            "preDrawCallback": function() {
                // Initialize the responsive datatables helper once.
                if (!responsiveHelper_dt_basic) {
                    responsiveHelper_dt_basic = new ResponsiveDatatablesHelper($('#myTable'),
                        breakpointDefinition);
                }
            },
            "rowCallback": function(nRow) {
                responsiveHelper_dt_basic.createExpandIcon(nRow);
            },
            "drawCallback": function(oSettings) {
                responsiveHelper_dt_basic.respond();
            }
        });
    }

这是json响应：

<table id="tableConsulta" class="table table-bordered display" width="100%">
<thead>
    <tr>
        <th>Col 1</th>
        <th>Col 2</th>
        <th>Col 3</th>
        <th>Col 4</th>
        <th>Col 5</th>
        <th data-hide='tablet'>Col 6</th>
        <th>Col 7</th>
        <th>Col 8</th>
        <th>Col 9</th>
        <th>Col 10</th>
    </tr>
</thead>

已正确填充表格，并根据需要显示分页。

实际发生的是：填充表格后，我尝试将浏览器的大小调整为断点“ tablet”以下的宽度，然后将其隐藏列标题，但不隐藏其内容，因此最终在调整窗口大小之后其他标题的右侧有10列数据，9列标题和另外1个BLANK列标题。

请原谅我的英语。

数据表-如何隐藏列（响应式）

0 个答案: