Question

我正在尝试使用带有引导样式的datatable时发现错误。我是新手，我按照datatables.net上提到的步骤。

$(document).ready(function() {
  $('#upcTable').dataTable({
    "sPaginationType": "full_numbers",

    "responsive": true
  });
});

<table id="upcTable" class="table table-striped table-bordered" style="margin-top: 30px;" cellspacing="0" width="100%">

  <thead>
    <tr>
      <th>SmallImageURL</th>
      <th>ASIN</th>
      <th>UPC</th>
      <th>Title</th>
      <th>Size</th>
      <th>PackageQuantity</th>
      <th>PackageDimensions</th>
      <th>OfferListingCountNew</th>
      <th>Price</th>
      <th>M1</th>
      <th>M2</th>
      <th>M3</th>
      <th>M4</th>
      <th>M5</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Tiger</td>
      <td>Nixon</td>
      <td>System Architect</td>
      <td>Edinburgh</td>
      <td>61</td>
      <td>2011/04/25</td>
      <td>$320,800</td>
      <td>5421</td>
      <td>t.nixon@datatables.net</td>
      <td>61</td>
      <td>2011/04/25</td>
      <td>$320,800</td>
      <td>5421</td>
      <td>t.nixon@datatables.net</td>
    </tr>
    <tr>
      <td>Garrett</td>
      <td>Winters</td>
      <td>Accountant</td>
      <td>Tokyo</td>
      <td>63</td>
      <td>2011/07/25</td>
      <td>$170,750</td>
      <td>8422</td>
      <td>g.winters@datatables.net</td>
      <td>61</td>
      <td>2011/04/25</td>
      <td>$320,800</td>
      <td>5421</td>
      <td>t.nixon@datatables.net</td>
    </tr>
  </tbody>
</table>

CSS

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="css/styles.css">
<link rel="stylesheet" type="text/css" href="css/themeroller.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="css/dataTables.bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/responsive.bootstrap.min.css">

我已经包含了以下Js

<script src="js/myscript.js"></script>
<script src="js/jquery-1.12.4.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="js/jquery.dataTables.min.js"></script>
<script src="js/dataTables.bootstrap.min.js"></script>
<script src="js/dataTables.responsive.min.js"></script>
<script src="js/responsive.bootstrap.min.js"></script>

我有两个datatable，它可以正常使用一个表而不是另一个表。我已将所有JS和CSS文件下载到本地计算机上。我刚刚给了一个datatable。

Answer 1

我认为表格的内容＆＃34; upcTable＆＃34;脚本中没有给出$（＆＃39;＃myTable＆＃39;）。dataTable（）;

请用#upcTable替换#myTable。

$(document).ready(function() {
  $('#upcTable').dataTable({
    "sPaginationType": "full_numbers",    
    "responsive": true
  });
});

Answer 2

尝试为结果添加所有必需的css和js。

//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css
https://cdn.datatables.net/1.10.15/css/dataTables.bootstrap.min.css
https://cdn.datatables.net/responsive/2.1.1/css/responsive.bootstrap.min.css

这是你要找的......？ https://jsfiddle.net/kajalc/krdp5Lo9/

数据表与boostrap无法正常工作

2 个答案: