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>

DataTables 插件的javascript如下：

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

注意：当前表格在“PUBLISHING STATE”处截止，“PUBLISHING DATE”和之后的表格显示在可展开部分中，单击第一个数据旁边的加号 (+) 后会显示该部分柱子。此外，如果我将 responsive: true 更改为 responsive: false 选项，则会显示所有列。但我不想为了显示所有列而失去网页的响应性。请提出可行的解决方案。

Answer 1

您需要在配置中删除或设置为 false 响应属性。
Jquery Datatables Responsive Documentation

Responsive:false

遵循 BS4 的这一概念：

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

Responsive Tables BS4