Question

我正在尝试运行示例（此线程Bootstrap - How to sort table columns中的答案中的第二个代码段）。我不应该只能将js片段放在html的脚本标签中，或者我完全误解它是如何工作的？我也尝试了https://datatables.net/中的一些示例，但没有出现任何可排序的功能。任何帮助将不胜感激。

编辑：在下面添加了代码，现在正在运行

<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.12/css/dataTables.bootstrap4.min.css" rel="stylesheet" />

</head>
<body>
<div class="container">
  <h1>Bootstrap 4 DataTables</h1>
  <table id="example" class="table table-striped table-inverse table-bordered table-hover" cellspacing="0" width="100%">
    <thead>
      <tr>
        <th>Name</th>
        <th>Position</th>
        <th>Office</th>
        <th>Age</th>
        <th>Start date</th>
        <th>Salary</th>
      </tr>
    </thead>
    <tfoot>
      <tr>
        <th>Name</th>
        <th>Position</th>
        <th>Office</th>
        <th>Age</th>
        <th>Start date</th>
        <th>Salary</th>
      </tr>
    </tfoot>
    <tbody>
      <tr>
        <td>Tiger Nixon</td>
        <td>System Architect</td>
        <td>Edinburgh</td>
        <td>61</td>
        <td>2011/04/25</td>
        <td>$320,800</td>
      </tr>
      <tr>
        <td>Garrett Winters</td>
        <td>Accountant</td>
        <td>Tokyo</td>
        <td>63</td>
        <td>2011/07/25</td>
        <td>$170,750</td>
      </tr>
      <tr>
        <td>Ashton Cox</td>
        <td>Junior Technical Author</td>
        <td>San Francisco</td>
        <td>66</td>
        <td>2009/01/12</td>
        <td>$86,000</td>
      </tr>
    </tbody>
  </table>
</div>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.12/js/jquery.dataTables.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.13/js/dataTables.bootstrap4.min.js"></script>
<script> type="text/javascript"
  $(document).ready(function() {
    $('#example').DataTable();
  });
</script>

Answer 1

<!DOCTYPE html>
<html>
   <head>
      <meta charset = "UTF-8">
      <meta http-equiv = "X-UA-Compatible" content = "IE = edge,chrome = 1">
      <title>Hello World using Backbone.js</title>
      <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" rel="stylesheet"/>
      <link href="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.12/css/dataTables.bootstrap4.min.css" rel="stylesheet"/>
   </head>

   <body>
      <div class="container"> <h1>Bootstrap 4 DataTables</h1> <table id="example" class="table table-striped table-inverse table-bordered table-hover" cellspacing="0" width="100%"> 
      <thead> 
        <tr> 
          <th>Name</th> 
          <th>Position</th> 
          <th>Office</th> 
          <th>Age</th> 
          <th>Start date</th> 
          <th>Salary</th> 
        </tr>
      </thead> 
        <tfoot> 
          <tr> 
            <th>Name</th> 
            <th>Position</th> 
            <th>Office</th> 
            <th>Age</th> 
            <th>Start date</th> 
            <th>Salary</th> 
          </tr>
        </tfoot> 
        <tbody> 
          <tr> 
            <td>Tiger Nixon</td>
            <td>System Architect</td>
            <td>Edinburgh</td>
            <td>61</td>
            <td>2011/04/25</td>
            <td>$320,800</td>
          </tr>
          <tr> 
            <td>Garrett Winters</td>
            <td>Accountant</td>
            <td>Tokyo</td>
            <td>63</td>
            <td>2011/07/25</td>
            <td>$170,750</td>
          </tr>
          <tr> 
            <td>Ashton Cox</td>
            <td>Junior Technical Author</td>
            <td>San Francisco</td>
            <td>66</td>
            <td>2009/01/12</td>
            <td>$86,000</td>
          </tr>
        </tbody> 
        </table>
      </div>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.12/js/jquery.dataTables.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.13/js/dataTables.bootstrap4.min.js"></script>
      <script type="text/javascript">
        $(document).ready(function() {
  $('#example').DataTable();
});
      </script>
   </body>
</html>

Answer 2

为什么你没有使用datatable api进行排序。这是对一列或多列进行排序的最简单方法。

您可以在此处查看有关如何在示例中实施的链接。

https://datatables.net/examples/basic_init/multi_col_sort.html

无法获取Bootstrap 4 Datatables示例来运行

2 个答案: