无法使 dataTable 响应式扩展正常工作

Posted 2023-05-08

【中文标题】无法使 dataTable 响应式扩展正常工作

【英文标题】：Cannot get dataTable responsive extension to work

【发布时间】：2018-05-10 19:29:00

【问题描述】：

我有一个正在使用 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>

我的表也使用引导程序，我正在按此顺序加载 JS 和 CSS

“脚本/供应商/jquery-1.12.4.js”， "Scripts/vendor/datatables-1.10.15.js", "Scripts/vendor/dataTables.responsive.js", “脚本/供应商/datatables-select-1.2.2.js”， “脚本/供应商/less-1.5.1.min.js”， “脚本/供应商/bootstrap.min.js”， "Scripts/vendor/dataTables.bootstrap.min.js",

"内容/bootstrap.min.css", "内容/font-awesome.min.css", "内容/jquery.dataTables.min.css", "内容/responsive.dataTables.css", "内容/responsive.bootstrap.css",

并按如下方式启动表

!$.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,

我做错了吗？响应式不能与引导程序一起使用吗？

我先加载响应式资源

迈克

【参考方案1】：

datatables + bootstrap 可以响应吗？答案是可以。您可以在数据表文档中找到示例

你是不是做错了什么？也许吧。因为我看到你的文件包含顺序是错误的。

答案只是：以正确的顺序包含文件。

jquery 引导 数据表

您的脚本完全有效，即使我没有更改您的 HTML。我只是改变了包含文件的顺序

CSS：

引导 css boostrap 主题 css //可选 datatables boostrap css //如果你使用bootstrap，不要使用jquery datatables css 数据表响应式 css 另一个CSS

HTML：

<table class="table another_class" width="100%"> ... </table

JS：

jquery js jquery 数据表 js 数据表 boostrap js 数据表响应式 js 另一个js

演示：http://jsbin.com/cohilayesa/edit?html,output

【参考方案2】：

您可以将引导程序与数据表响应式结合使用。见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