У меня проблема с 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 настаивает на том, чтобы скрыть столбец за символом +
в крайнем левом углу.