javascript - jQuery DataTable 响应式不适用于 Bootstrap 3

Question

当我使用 DataTable js 插件时，我遇到了响应式布局问题。即使有responsive: true也不会显示。我尝试使用 css (white-space: nowrap) 进行操作，但这不是解决方案。这是代码预览。

HTML

    <table id="example1" class="table table-bordered table-striped">
    <thead>
        <tr>
            <th class="no-sort"></th>
            <th>Product</th>
            <th>Product Category</th>
            <th>Views</th>
            <th>Average View Time</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td class="text-center">1</td>
            <td>Accu-Pass Suture Shuttle</td>
            <td>Suture Shuttle</td>
            <td>1,500 views</td>
            <td>8:38 minutes</td>
        </tr>
    </tbody>
  </table>

JS

$('#example1').DataTable({
      responsive: true,
      columnDefs: [
          { targets: 'no-sort', orderable: false }
        ],
      "paging": true,
      "lengthChange": true,
      "searching": true,
      "ordering": true,
      "info": false,
      "autoWidth": true,

    });

Fiddle

Answer 1

在您的 Fiddle 示例中，您缺少 Jquery 和数据表插件。

使用 Jquery 和 Datatable 插件的 Fiddle 示例: https://jsfiddle.net/n2vbzn8g/2/

JQuery

$(document).ready(function() {
    $('#example1').DataTable( {
        responsive: true,
              columnDefs: [
          { targets: 'no-sort', orderable: false }
        ],
      "paging": false,
      "lengthChange": true,
      "searching": false,
      "ordering": false,
      "info": false,
      "autoWidth": true
    } );
} );

表格

<table id="example1" class="table table-bordered table-striped">
<thead>
    <tr>
        <th class="no-sort"></th>
        <th>Product</th>
        <th>Product Category</th>
        <th>Views</th>
        <th>Average View Time</th>
    </tr>
</thead>
<tbody>
    <tr>
        <td class="text-center">1</td>
        <td>Accu-Pass Suture Shuttle</td>
        <td>Suture Shuttle</td>
        <td>1,500 views</td>
        <td>8:38 minutes</td>
    </tr>
</tbody>
</table>