Question

我正在尝试在此post中提到的表格中使用分页系统，但它似乎无法正常工作

预期结果：

我得到的是什么：

我像往常一样将所有样式放在head部分和body部分底部的所有脚本中，但我不知道为什么它没有任何猜测

代码

<!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>

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

Answer 1

您的脚本尚未加载。你正在呼吁这个功能。

<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()是一个位于脚本内的方法：

内联脚本在加载时执行。但外部脚本需要时间加载，它位于内联脚本下方。

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

如何在html中的表中使用分页

1 个答案: