Datatables - Как скрыть столбцы (отзывчивый) - PullRequest
Новая
       74

Datatables - Как скрыть столбцы (отзывчивый)

0 голосов
/ 14 февраля 2019

Моя таблица отлично выбирает данные с моего сервера и показывает все в порядке.Но я пытаюсь сделать его отзывчивым, поэтому, когда пользователь использует мобильное / маленькое устройство, он должен скрывать нужные мне столбцы.

Я использую smart admin для достиженияэтот.Но у меня не было успеха.

Это ошибка, которую я получил, когда изменил размер экрана моего рабочего стола ниже размера точки останова: 

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>

Эта функция вызывается, когда пользователь отправляет форму: 

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();
            }
        });
    }

Это таблица, которая будет заполнена после запроса ajax: 

<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>

И это ответ json: 

data: [["col1", "col2", "col3", "col4", "col5", "col6",…],…]
draw: 1
recordsFiltered: 80
recordsTotal: 10

Таблица заполнена правильно, нумерация страниц показана по желанию.

Что именно происходит: после заполнения таблицы я пытаюсь изменить размер браузера до ширины ниже точки останова «таблетка», ПОТОМ он скрывает заголовок столбца, но не его содержимое, поэтому в конце после изменения размера teУ меня 10 столбцов данных, 9 заголовков столбцов и еще 1 заголовок столбцов BLANK справа от других заголовков.

Пожалуйста, прости мой английский.

...