Question

我有一个正在使用true

的响应属性创建的表

它正在将dtr-inline类添加到我的表中，但是表没有在断点处断开，并且无论屏幕大小，行都不会成为父行的子节点，并且不会添加折叠类。我最终得到了我的表格的HTML ...

<table id="member-details" class="table table-striped table-bordered dataTable no-footer dtr-inline" role="grid" cellspacing="0" aria-describedby="member-details_info">
    <thead>
        <tr role="row">
            <th class="sorting" tabindex="0" aria-controls="member-details" rowspan="1" colspan="1" aria-label="Pay No: activate to sort column ascending">Pay No</th>
            <th class="sorting" tabindex="0" aria-controls="member-details" rowspan="1" colspan="1" aria-label="Name: activate to sort column ascending">Name</th>
            <th class="sorting_asc" tabindex="0" aria-controls="member-details" rowspan="1" colspan="1" aria-sort="ascending" aria-label="Ni.No: activate to sort column descending">Ni.No</th>
            <th class="sorting" tabindex="0" aria-controls="member-details" rowspan="1" colspan="1" aria-label="DOB: activate to sort column ascending">DOB</th>
            <th class="sorting" tabindex="0" aria-controls="member-details" rowspan="1" colspan="1" aria-label="Dept: activate to sort column ascending">Dept</th>
            <th class="sorting" tabindex="0" aria-controls="member-details" rowspan="1" colspan="1" aria-label="Location: activate to sort column ascending">Location</th>
            <th class="sorting" tabindex="0" aria-controls="member-details" rowspan="1" colspan="1" aria-label="Pay point: activate to sort column ascending">Pay point</th>
            <th class="sorting" tabindex="0" aria-controls="member-details" rowspan="1" colspan="1" aria-label="Scheme: activate to sort column ascending">Scheme</th>
            <th class="sorting" tabindex="0" aria-controls="member-details" rowspan="1" colspan="1" aria-label="Category: activate to sort column ascending">Category</th>
            <th class="details-control sorting_disabled" rowspan="1" colspan="1" style="width: 10%;" aria-label="Options">Options</th>
        </tr>
    </thead>
    <tbody>
        ...
    </tbody>
</table>

我的表也使用bootstrap，我按此顺序加载JS和CSS

＆＃34;脚本/供应商/ jquery的-1.12.4.js＆＃34 ;,
  ＆＃34;脚本/供应商/数据表-1.10.15.js＆＃34 ;,
  ＆＃34;脚本/供应商/ dataTables.responsive.js＆＃34 ;,
  ＆＃34;脚本/供应商/数据表选-1.2.2.js＆＃34 ;,
  ＆＃34;脚本/供应商/不太1.5.1.min.js＆＃34 ;,
  ＆＃34;脚本/供应商/ bootstrap.min.js＆＃34 ;,
  ＆＃34;脚本/供应商/ dataTables.bootstrap.min.js＆＃34;，

＆＃34;内容/ bootstrap.min.css＆＃34 ;,   ＆＃34;内容/字体awesome.min.css＆＃34 ;,   ＆＃34;内容/ jquery.dataTables.min.css＆＃34 ;,   ＆＃34;内容/ responsive.dataTables.css＆＃34 ;,   ＆＃34;内容/ responsive.bootstrap.css＆＃34;，

并按如下方式启动表

!$.fn.DataTable.isDataTable("#" + domElement) ? $("#" + domElement).DataTable({
    responsive: true,
    language: { 
        "emptyTable": "No records found",
        "processing": eq.api.spinner()
    },
    processing: true,
    serverSide: true,
    info: true,
    stateSave: true,
    bFilter: false,
    bAutoWidth: false,
    lengthMenu: [[10, 20, 50, 100], [10, 20, 50, 100]],
    columns: columns,
    ajax: ajaxPart,

我做错了吗？响应不能与bootstrap一起使用吗？

我首先加载响应资源

麦克

Answer 1

您可以使用带有数据表响应的bootstrap。请参阅this example。

作为可数据表文档，您需要加载自适应插件文件，并将 nowarp 类添加到HTML代码中：

所以你的代码应该是这样的：

<table id="member-details" class="nowrap table table-striped table-bordered dataTable no-footer dtr-inline" role="grid" cellspacing="0" aria-describedby="member-details_info">

另见responsive example

无法使dataTable响应式扩展工作

1 个答案: