javascript - 如何在HTML中的表格中使用分页

我正在尝试在此post中提到的表中使用分页系统，但它似乎不起作用

预期结果：

我得到的是：

我像往常一样将所有样式放在标题部分，并将所有脚本放在正文部分的底部，但是我不明白为什么它不起作用

码

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
    <link rel="stylesheet" href="http://cdn.datatables.net/1.10.2/css/jquery.dataTables.min.css">
</head>
<body>

    <div class="table-responsive">
    <table id="myTable" class="display table" width="100%">
        <thead>
          <tr>
            <th>ENO</th>
            <th>EMPName</th>
            <th>Country</th>
            <th>Salary</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>001</td>
            <td>Anusha</td>
            <td>India</td>
            <td>10000</td>
          </tr>
          <tr>
            <td>002</td>
            <td>Charles</td>
            <td>United Kingdom</td>
            <td>28000</td>
          </tr>
          <tr>
            <td>003</td>
            <td>Sravani</td>
            <td>Australia</td>
            <td>7000</td>
          </tr>
           <tr>
            <td>004</td>
            <td>Amar</td>
            <td>India</td>
            <td>18000</td>
          </tr>
          <tr>
            <td>005</td>
            <td>Lakshmi</td>
            <td>India</td>
            <td>12000</td>
          </tr>
        </tbody>
    </table>
    </div>

    <script>
    $(document).ready(function(){
        $('#myTable').dataTable();
    });
    </script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script type="text/javascript"  src="http://cdn.datatables.net/1.10.2/js/jquery.dataTables.min.js"></script>
    <script type="text/javascript"  src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

</body>
</html>

注意：我已经从表中删除了一些行，以忽略堆栈溢出错误

最佳答案

您的脚本尚未加载。您正在调用该函数。

<script>
$(document).ready(function(){
    $('#myTable').dataTable();
});
</script>


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript"  src="http://cdn.datatables.net/1.10.2/js/jquery.dataTables.min.js"></script>
<script type="text/javascript"  src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

将外部脚本标签放在内部脚本上方。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript"  src="http://cdn.datatables.net/1.10.2/js/jquery.dataTables.min.js"></script>
<script type="text/javascript"  src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

/*Now the external js are loaded and you can call any function from here.*/
<script>
$(document).ready(function(){
    $('#myTable').dataTable();
});
</script>

根据要求编辑2：

dataTable()是一种位于脚本内部的方法：

内联脚本在加载时执行。但是外部脚本需要花费一些时间才能加载，并且放置在嵌入式脚本的下方。

因此，您在定义方法之前就调用它。