Question

我正在使用jquery插件DataTables在.cfm（oldfusion）页面中显示数据。一切正常，除了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);
    }
 });
 });

注意：当前表格的开头为“出版日期”，后为“出版日期”，其后的内容显示在可扩展部分中，该部分可通过单击第一个数据旁边的加号（+）来显示。柱。另外，如果我将响应式：真更改为响应式：假选项，则会显示所有列。但是我不想为了显示所有列而失去网页的响应特性。请提出可行的解决方案。

Answer 1

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

Responsive:false

遵循BS4的这一概念：

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

Responsive Tables BS4

jQuery DataTables插件未显示所有指定的列

1 个答案: