Плагин jQuery DataTables не отображает ВСЕ столбцы, указанные

Question

Я использую плагин 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.log("There was no response from server!");
        }
    },
    error: function (XMLHttpRequest, textStatus, errorThrown) {
        console.log("An Ajax server error was returned");
        console.log(XMLHttpRequest);
        console.log(textStatus);
        console.log(errorThrown);
    }
 });
 });

Примечание. В настоящее время таблица обрезается на «СОСТОЯНИЕ ИЗДАНИЯ», с «ДАТА ИЗДАНИЯ» и теми, которые после ее отображения отображаются в раскрывающемся разделе, который отображается при нажатии знака плюс (+) рядом с данными в первом колонка. Кроме того, если я изменю параметр «отзывчивый: истина» на «отзывчивый: ложь», отображаются все столбцы. НО я не хочу потерять адаптивный характер моей веб-страницы, чтобы отобразить все столбцы. Пожалуйста, предложите жизнеспособное решение.

Answer 1

Вам необходимо удалить или установить значение false в свойствах Response в ваших конфигурациях.
Адаптивная документация по Jquery Datatables

Responsive:false

Следуя этой концепции для BS4:

<div class="table-responsive"> <table class="table"> ... </table> </div>

Отзывчивые таблицы BS4