首页 文章

无法使dataTable响应式扩展工作

提问于
浏览 次
0

我有一个正在创建的表，其响应属性为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

“Scripts / vendor / jquery-1.12.4.js”，“Scripts / vendor / datatables-1.10.15.js”，“Scripts / vendor / dataTables.responsive.js”，“Scripts / vendor / datatables-select- 1.2.2.js“，”Scripts / vendor / less-1.5.1.min.js“，”Scripts / vendor / bootstrap.min.js“，”Scripts / vendor / dataTables.bootstrap.min.js“，” Content / bootstrap.min.css“，”Content / font-awesome.min.css“，”Content / jquery.dataTables.min.css“，”Content / responsive.dataTables.css“，”Content / 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,

难道我做错了什么？响应不能与bootstrap一起使用？

我首先加载响应资源

麦克风

jquery twitter-bootstrap datatables

2 回答

  • 0

    您可以使用带有数据表响应的引导程序 . 见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

    回复于
  • 0

    can datatables + bootstrap be responsive? 答案是可以的 . 您可以在datatables文档中找到示例

    are you doing something wrong? 也许吧 . 因为我看到你的文件包括订单是错误的 .

    答案是：按正确的顺序包含文件 .

    • jquery

    • bootstrap

    • 数据表

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

    CSS：

    • bootstrap css

    • boostrap主题css //可选

    • datatables boostrap css //如果你使用bootstrap，不要使用jquery datatables css

    • datatables响应css

    • 另一个css

    HTML：

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

    JS：

    • jquery js

    • jquery datatables js

    • datatables boostrap js

    • 数据表响应js

    • 另一个js

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

    回复于

相关问题