Я использую подключаемый модуль jquery DataTables для отображения данных на странице .cfm (coldfusion). Все работает, ЗА ИСКЛЮЧЕНИЕМ DataTables автоматически обрезает столбцы (в настоящее время отображает только 5 из моих столбцов) и автоматически создает кнопку «плюс» (+) рядом со значением в первом столбце, которая при нажатии превращается в знак «минус», а остальные столбцы становятся отображается под текущей строкой!
Я проверил документацию DataTables, но это действительно сбивает с толку, и после попытки (больше похоже на то, чтобы взорвать его) несколько предложенных там способов, я застрял. Как мне отобразить ВСЕ столбцы в таблице вместо того, чтобы позволить DataTables контролировать количество видимых столбцов и количество скрытых столбцов?
Моя таблица html выглядит следующим образом:
<table id = "idsTbl" class = "table table-striped table-bordered" cellspacing = "0"
width = "100%">
<thead>
<tr>
<th>PRIMARY/FIRST ID</th>
<th>SECOND ID</th>
<th>PUBLISHING CO TYPE</th>
<th>PUBLISHING COMPANY NAME</th>
<th>PUBLISHING STATE</th>
<th>PUBLISHING DATE</th>
<th>PUB CREATED DATE</th>
<th>OTHER DATE</th>
<th>USER CREDENTIALS</th>
</tr>
</thead>
<tfoot>
<tr>
<th>PRIMARY/FIRST ID</th>
<th>SECOND ID</th>
<th>PUBLISHING CO TYPE</th>
<th>PUBLISHING COMPANY NAME</th>
<th>PUBLISHING STATE</th>
<th>PUBLISHING DATE</th>
<th>PUB CREATED DATE</th>
<th>OTHER DATE</th>
<th>USER CREDENTIALS</th>
</tr>
</tfoot>
<tbody>
</tbody>
</table>
JavaScript для плагина DataTables выглядит следующим образом:
$(document).ready(function () {
$.ajax({
type: "GET",
url: "https://xxx.xxxxxx.xxxx.xx.php?method=ids",
dataType: "json",
cache: false,
success: function (response) {
if (response.length != 0) {
//Footer section search capability
$('#idsTbl tfoot th').each(function () {
var title = $(this).text();
$(this).html('<input type = "text" placeholder = "' + title + '"
/>');
});
// /Footer section search capability
var returnedIds = $("#idsTbl").DataTable({
data: response,
columns: [{
data: 'ID',
"fnCreatedCell": function (nTd, sData, oData, iRow, iCol) {
var linkedId = '<a data-toggle = "modal" data- target = "#myModal" data-backdrop = "static" data-keyboard = "false" href = "#myModal" data-action = "upd" data-id = "' + oData.ID + '">' + oData.ID + '</a>';
$(nTd).html(linkedId );
}
},
{
data: 'ID2'
},
{
data: 'TYPE'
},
{
data: 'NAME'
},
{
data: 'CO_NAME'
},
{
data: 'STATE'
},
{
data: 'PUB_DATE'
},
{
data: 'MADE_DT',
"defaultContent": "N/A"
},
{
data: 'USER_ID',
"defaultContent": "N/A"
},
],
responsive: true,
order: [0, 'asc']
});
// Apply the footer search
idsTbl.columns().every(function () {
var that = this;
$('input', this.footer()).on('keyup change', function () {
if (that.search() !== this.value) {
that
.search(this.value)
.draw();
}
});
});
// /Apply the footer search
} else {
console.info("There was no response from server!");
}
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
console.info("An Ajax server error was returned");
console.info(XMLHttpRequest);
console.info(textStatus);
console.info(errorThrown);
}
});
});
Примечание. В настоящее время таблица обрывается на «СОСТОЯНИЕ ПУБЛИКАЦИИ», с «ДАТА ПУБЛИКАЦИИ» и те, которые находятся после нее, отображаются в расширяемом разделе, который отображается при нажатии на знак плюса (+) рядом с данными в первом столбце. Кроме того, если я изменю параметр responseive: true на responseive: false, будут отображаться все столбцы. НО я не хочу терять отзывчивый характер моей веб-страницы, чтобы отображать все столбцы. Пожалуйста, предложите жизнеспособное решение.

Вам необходимо удалить или установить значение false для свойства responseive в ваших конфигурациях.
Адаптивная документация JQuery Datatables
Responsive:false
Следуя этой концепции для BS4:
<div class = "table-responsive">
<table class = "table">
...
</table>
</div>
Я заявил об этом в своей заметке - что я не хочу этого делать, поскольку это означало бы потерю отзывчивости моей веб-страницы; Я ищу способ сделать это без потери отзывчивости.
Вы используете бутстрап?
Да - с помощью bootstrap 4.
Попробуйте следовать стилю отзывчивые таблицы для начальной загрузки 4. <div class = "table-responsive"> <table class = "table"> ... </table> </div>
Пытался, но не сделал его отзывчивым (при изменении размера окна до размера телефона страница не реагировала). Это то, что я добавил в свой существующий html: <div class = "container table-responseive"> <table>........</table> </div>
Если вы добавите класс, отвечающий за таблицу, в тег таблицы? Единственные решения, которые я могу сейчас придумать, - это добавить свойство стиля overflow: scroll, чтобы оно могло прокручиваться в меньших представлениях.
Пожалуйста, посмотрите на этот DataTable реагирует на отображение определенных столбцов, который позволяет вам решать, какие столбцы вы хотите отображать всегда, а также скрывать столбцы и показывать их, когда datatable находится в адаптивном состоянии. Вам просто нужно нанести
class controlsнаthтаблицы.