jQuery数据表响应不支持Boostrap 3

jQuery DataTable responsive doesnt work with Boostrap 3

本文关键字：Boostrap 不支持 响应 数据表 jQuery      更新时间：2023-09-26

当我使用DataTable js插件时，我有响应式布局的问题。它不会显示它，即使有响应: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示例中，您缺少Jquery和datatable插件。

使用Jquery和数据库插件的例子: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>
相关文章：