DataTables - адаптивные скрывающиеся столбцы на больших экранах - PullRequest
2 голосов
/ 30 апреля 2019

У меня проблема с DataTables - я хочу использовать отзывчивое дополнение, чтобы скрыть столбцы на экранах меньшего размера, к сожалению, отзывчивое дополнение скрывает столбцы на экранах большего размера, когда это действительно не нужно.

Вот мой код JavaScript:

    var table = $('#peopleTable').DataTable({
        responsive: true,
        ajax: {
            dataType: 'text',
            type: 'POST',
            url: apiUrl,
            dataSrc: function (json) {
                return $.parseJSON(json);
            }
        },
        columns: [
            {
                data: 'name',
                responsivePriority: 1,
                width: '5%',
                render: function (data, type, row) {
                    return '<a href="<?php echo $localPath;?>/people/person.php?id=' + row.id + '"><img class="icon" title="' + row.people_type + '" src="<?php echo $localPath; ?>/webimg/people-type/b/' + row.people_type_id + '.png">' + row.main_contact + ' @ ' + row.name + '</a>';
                }
            },
            /*{
                data: 'main_contact',
                responsivePriority: 1,
                width: '5%'
            },*/
            { 
                data: 'add1',
                responsivePriority: 1,
                width: '5%',
                render: function (data, type, row) {
                    var output = [];
                    if (row.add1) { output.push(row.add1); }
                    if (row.add2) { output.push(row.add2); }
                    if (row.add3) { output.push(row.add3); }
                    if (row.town) { output.push(row.town); }
                    var outputStr = output.join(', ');
                    return '<span class="address-trunc" title="' + outputStr + '">' + outputStr + '</span>';
                }
            },
            {
                data: 'phone',
                responsivePriority: 1,
                width: '5%'
            },
            /*{
                data: 'email',
                responsivePriority: 1,
                width: '5%',
                render: function (data, type, row) {
                    return '<a href="mailto:' + row.email + '">' + row.email + '</a>';
                }
            },*/
            {
                data: 'id',
                orderable: false,
                responsivePriority: 1,
                width: '5%',
                render: function (data, type, row) {
                    var url = '<?php echo $localPath;?>/people/person.php?id=' + row.id;
                    return '<a href="' + url + '" class="btn btn-sm btn-secondary">View</a> '
                        <?php if ($activeUser->can('delete')) { ?>
                            + '<a href="#" class="btn btn-sm btn-secondary delete-person" data-person="' + row.name + '" data-id="' + row.id + '">Delete</a>'
                        <?php } ?>
                            ;
                }
            }
        ]
    });

Как видите, я играл с кодом, чтобы все столбцы отображались на большом экране.

Когда я начинал, у меня было больше столбцов в игре (теперь они закомментированы), у меня была добавлена ​​вся ширина до 100%, и у меня все responsivePriority установлены на правильные значения (вместо всех них) быть 1).

Сокращение количества столбцов, установка меньшей ширины, изменение responsivePriority s - выполнение всех этих действий не имело никакого эффекта, на большом экране отзывчивое дополнение все еще настаивало на том, чтобы скрыть хотя бы 1 столбец.

Как мне это остановить? Я все еще хочу использовать надстройку, поскольку она очень полезна на небольших экранах, но я не хочу, чтобы она заставляла скрывать столбцы, когда в этом нет необходимости.

Чтобы показать вам, что происходит, вот снимок экрана - вы можете увидеть огромные почти пустые столбцы, где достаточно места для другого столбца - и все же DataTables настаивает на том, чтобы скрыть столбец за символом + в крайнем левом углу.

enter image description here

Ответы [ 2 ]

2 голосов
/ 30 апреля 2019

Отзывчивое расширение имеет множество классов для настройки, когда столбцы должны быть видны / скрыты.

Вы можете использовать класс desktop, чтобы указать столбцы, отображаемые для ширины окна, большей или равной 1024px.

См. этот пример для кода и демонстрации.

1 голос
/ 30 апреля 2019

Почему бы просто не использовать

var table = $('#peopleTable').DataTable({
  responsive: window.innerWidth < 1000 ? true : false,
  ...
})

Я имею в виду просто не инициализировать отзывчивое расширение, когда оно не нужно. 1000 - это просто предложение, относительные "большие размеры экрана" являются относительными:)

демо -> http://jsfiddle.net/8vtqsf7z/

...