Question

当我使用DataTable js插件时，我遇到了响应式布局的问题。它即使有响应也不会显示出来：真实。我试图用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

在你的小提琴示例中，你缺少Jquery和datatable插件。

使用Jquery和Datable插件的小提琴示例： 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>

jQuery DataTable响应无法与Boostrap 3一起使用

1 个答案: