分页到 HTML 表格答案

【问题标题】：Pagination to HTML table分页到 HTML 表格
【发布时间】：2018-01-12 00:51:50
【问题描述】：

我已经提到了几个 SO 问题和答案。我仍然找不到对表格进行分页的解决方案。请有人为我提供适当的 javascript 编码，以便使用必要的插件（如果有）进行分页。我的表充满了来自 API 调用的数据。提前致谢

<!DOCTYPE html>
<html lang="en" xmlns:margin-right="http://www.w3.org/1999/xhtml" xmlns:padding-bottom="http://www.w3.org/1999/xhtml"
      xmlns:width="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Telephone Extension Finder</title>
    <link href = "css/bootstrap.min.css" rel = "stylesheet">
    <link href = "css/main.css" rel = "stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

    <link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.16/css/jquery.dataTables.css">
    <script type="text/javascript" charset="utf8" src="//cdn.datatables.net/1.10.16/js/jquery.dataTables.js"></script>


</head>

<body>


        <div id = "tableDiv" class = "tab-pane fade in active">
            <table  id = "myTable"
                    class= "table-responsive container table table-hover table-bordered table-striped"
                    style="width:35%; margin-right: 15%;">
                        <thead style = "background-color: #800080; color: white;">
                            <th style = "width: 5%">Name</th>
                            <th style = "width: 1.2%">Code</th>
                        </thead>
                        <tbody></tbody>
            </table>
        </div>

    <script src = "js/jquery-3.2.1.min.js"></script>
    <script src ="js/bootstrap.min.js"></script>
    <script src = "js/main.js"></script>
    <script src = "js/impExt.js"></script>
    <script src="js/confRoom.js"></script>

    </body>
</html>

上面是我的 HTML 页面

【问题讨论】：

标签： html-table jquery-pagination

【解决方案1】：

我认为您想要的是表格中的分页。我有一个解决方案。您可以使用数据表。这是一个非常好的插件。 https://datatables.net 去这个链接看看。它也与引导程序和响应式兼容。检查示例。希望对您有所帮助。

<!DOCTYPE html>
<html lang="en" xmlns:margin-right="http://www.w3.org/1999/xhtml" xmlns:padding-bottom="http://www.w3.org/1999/xhtml"
   xmlns:width="http://www.w3.org/1999/xhtml">
   <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
      <title>Telephone Extension Finder</title>
      <link href = "css/bootstrap.min.css" rel = "stylesheet">
      <link href = "css/main.css" rel = "stylesheet">
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
      <link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.16/css/jquery.dataTables.css">
   </head>
   <body>
      <div id = "tableDiv" class = "tab-pane fade in active">
         <table  id = "myTable"
            class= "table-responsive container table table-hover table-bordered table-striped"
            style="width:35%; margin-right: 15%;">
            <thead style = "background-color: #800080; color: white;">
               <th style = "width: 5%">Name</th>
               <th style = "width: 1.2%">Code</th>
            </thead>
            <tfoot>
               <tr>
                  <th style = "width: 5%">Name</th>
                  <th style = "width: 1.2%">Code</th>
               </tr>
            </tfoot>
            <tbody>
               <tr>
                  <td>Tiger Nixon</td>
                  <td>System Architect</td>
               </tr>
               <tr>
                  <td>Tiger Nixon</td>
                  <td>System Architect</td>
               </tr>
               <tr>
                  <td>Tiger Nixon</td>
                  <td>System Architect</td>
               </tr>
               <tr>
                  <td>Tiger Nixon</td>
                  <td>System Architect</td>
               </tr>
               <tr>
                  <td>Tiger Nixon</td>
                  <td>System Architect</td>
               </tr>
               <tr>
                  <td>Tiger Nixon</td>
                  <td>System Architect</td>
               </tr>
               <tr>
                  <td>Garrett Winters</td>
                  <td>Accountant</td>
               </tr>
               <tr>
                  <td>Ashton Cox</td>
                  <td>Junior Technical Author</td>
               </tr>
               <tr>
                  <td>Tiger Nixon</td>
                  <td>System Architect</td>
               </tr>
               <tr>
                  <td>Tiger Nixon</td>
                  <td>System Architect</td>
               </tr>
               <tr>
                  <td>Tiger Nixon</td>
                  <td>System Architect</td>
               </tr>
            </tbody>
         </table>
      </div>
      <script src = "js/jquery-3.2.1.min.js"></script>
      <script src = "js/main.js"></script>
      <script src = "js/impExt.js"></script>
      <script src="js/confRoom.js"></script>
      <script type="text/javascript" charset="utf8" src="//cdn.datatables.net/1.10.16/js/jquery.dataTables.js"></script>
      <script type="text/javascript">
         $(document).ready(function() {
            $('#myTable').DataTable();
         } );
      </script>
   </body>
</html>

【讨论】：

抱歉图片。我已经把它们从我的手机里拿走了。但希望你能明白这一点。
感谢您的链接。但我已经提到过那个链接。我在 jquery.datatables.js 上收到错误，因为 jquery.dataTables.js:56 Uncaught ReferenceError: jQuery is not defined。你能告诉我如何解决这个错误吗？
如果能分享一下sn-p的代码就更好了。但我猜在那个文件 jquery.datatables.js 之前没有调用 jquery .. 检查一下。希望它能解决问题。
仍然无法正常工作。我已经用我的代码更新了我的问题！