javascript - init 上的 DataTables 子行或嵌套表

Question

我想知道是否有一种方法可以使所选列出现在嵌套/子行中，如 this example from DataTables.net 中但是没有用 jquery 手动解析？

有类似的问题，但没有得到解答，所以我希望这个问题能得到更多关注:)

我尝试过像这样的响应式选项:

var table = $("#example").DataTable({
        "processing": true,
        "serverSide": true,
        "scrollY":'60vh',
        "scrollCollapse":true,
        //"scrollX":true,
        "responsive":true,
        "ajax": {
            "url":upTableUrl,
            "data":function(d) {
              d.file = $.urlParam('file');//'data_extr.json';
            search_obj = d;
           }
      },      "columns":[
              ...
      ],
      "columnDefs":[
              ...
      ]
    });

和一些html(注意这里的django):

<table width="100%" class="display nowrap table table-striped table-bordered" id="example" cellspacing="0">
        <thead>
            <tr>
              {% for col in columns %}<th>{{col}}</th>
              {% endfor %}
            </tr>
        </thead>
        <tfoot>
          <tr>
            {% for col in columns %}<th>{{col}}</th>
            {% endfor %}
          </tr>
        </tfoot>
      </table>

表格仍然可以在 x 轴上滚动，并且不会出现任何按钮或其他内容。

Answer 1

使用Row details要求您编写自己的格式化函数。

但是您可以使用 Responsive扩展，其中在某些条件下可以在子行中显示列。

默认情况下，扩展会隐藏所有不适合子行中的容器的列，请参阅 this example .

但是，您可以使用 special classes 控制列的可见性应用于相应的第 th 元素或使用 columns.className选项，请参阅this example .