如何在HTML表格中使用分页功能

Question

如何在HTML表格中使用分页功能

javascripthtmlcsstwitter-bootstraphtml-table

3

我试图在表格中使用分页系统，如此文章所述，但似乎不起作用。

期望的结果如下：

但实际结果如下：

我已将所有样式放置在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>

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

- Olivia Brown

2个回答

0

重新调整你的脚本，使其看起来像这样：

<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>
  $(document).ready(function(){
    $('#myTable').dataTable();
  });
</script>

这是我得到的结果：

希望这对你有所帮助！

- Dan

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Sreekanth Reddy Balne · Accepted Answer

你的脚本还未加载，而你正在调用该函数。

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

内联脚本在加载时立即执行。但外部脚本需要时间来加载，并且放置在您的内联脚本下方。

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