基于Jquery实现表格动态分页实现代码

基于jQuery实现表格动态分页的过程其实很简单，主要包含以下三个步骤：

准备HTML代码

首先准备一个包含表格的HTML代码，例如以下代码段：

<table id="table">
  <thead>
    <tr>
      <th>ID</th>
      <th>Name</th>
      <th>Email</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>John</td>
      <td>john@example.com</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Jane</td>
      <td>jane@example.com</td>
    </tr>
    ...
  </tbody>
</table>

其中，id属性用于给表格指定一个唯一的标识符，方便后续在JavaScript代码中引用。

编写JavaScript代码

在HTML代码中引入jQuery库，并编写用于实现表格动态分页的JavaScript代码。以下是一个示例代码：

$(document).ready(function() {
   var table = $('#table');

   var tableRows = table.find('tbody tr');
   var numRows = tableRows.length;
   var rowsPerPage = 10;
   var numPages = Math.ceil(numRows / rowsPerPage);

   for (var i = 0; i < numPages; i++) {
      $('<li><a href="#" class="pagination-link">' + (i+1) + '</a></li>').appendTo('.pagination');
   }

   tableRows.hide().slice(0, rowsPerPage).show();

   $('.pagination-link').click(function(e){
       e.preventDefault();
       var page = $(this).text();
       var start = (page - 1) * rowsPerPage;
       var end = start + rowsPerPage;
       tableRows.hide().slice(start, end).show();
   });
});

这段代码的主要作用是：

计算出总行数、每页显示行数、总页数；
动态生成分页链接；
根据分页链接点击事件，计算出当前页码，然后根据页码显示对应的数据行。

具体来说，代码中的table变量保存了查找到的表格元素，tableRows变量包含了表格的所有行，numRows、rowsPerPage、numPages分别表示总行数、每页显示行数和总页数。然后，循环生成分页链接并插入到HTML代码中。最后，通过给分页链接绑定一个点击事件，实现了动态分页的效果。

样式

为了让分页效果更加直观，我们需要将分页链接美化一下。以下是一个示例CSS代码：

.pagination {
   display: flex;
   justify-content: center;
   list-style: none;
   margin: 20px 0;
   padding: 0;
}

.pagination li {
   margin-right: 10px;
   font-size: 16px;
}

.pagination-link {
   color: #333;
   text-decoration: none;
}

.pagination-link:hover {
   text-decoration: underline;
}

这段CSS代码主要是对分页链接进行样式调整，包括了居中、间距、字体大小等方面的设置。你可以根据自己的需要进行调整。

至此，基于jQuery实现表格动态分页的过程就完成了。只需要将以上三个步骤中的代码整合起来，即可实现一个完整的表格动态分页功能。

下面是一个完整的示例页面：

<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
   <title>Table Pagination</title>
   <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet">
   <style>
      .pagination {
         display: flex;
         justify-content: center;
         list-style: none;
         margin: 20px 0;
         padding: 0;
      }

      .pagination li {
         margin-right: 10px;
         font-size: 16px;
      }

      .pagination-link {
         color: #333;
         text-decoration: none;
      }

      .pagination-link:hover {
         text-decoration: underline;
      }

      #table {
         width: 100%;
      }

      th, td {
         padding: 10px;
         border: 1px solid #ccc;
      }
   </style>
</head>
<body>
   <table id="table">
      <thead>
         <tr>
            <th>ID</th>
            <th>Name</th>
            <th>Email</th>
         </tr>
      </thead>
      <tbody>
         <tr>
            <td>1</td>
            <td>John</td>
            <td>john@example.com</td>
         </tr>
         <tr>
            <td>2</td>
            <td>Jane</td>
            <td>jane@example.com</td>
         </tr>
         <tr>
            <td>3</td>
            <td>Tom</td>
            <td>tom@example.com</td>
         </tr>
         <tr>
            <td>4</td>
            <td>Jason</td>
            <td>jason@example.com</td>
         </tr>
         <tr>
            <td>5</td>
            <td>Lucy</td>
            <td>lucy@example.com</td>
         </tr>
         ...
      </tbody>
   </table>

   <ul class="pagination">
   </ul>

   <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
   <script>
      $(document).ready(function() {
         var table = $('#table');

         var tableRows = table.find('tbody tr');
         var numRows = tableRows.length;
         var rowsPerPage = 2;
         var numPages = Math.ceil(numRows / rowsPerPage);

         for (var i = 0; i < numPages; i++) {
            $('<li><a href="#" class="pagination-link">' + (i+1) + '</a></li>').appendTo('.pagination');
         }

         tableRows.hide().slice(0, rowsPerPage).show();

         $('.pagination-link').click(function(e){
             e.preventDefault();
             var page = $(this).text();
             var start = (page - 1) * rowsPerPage;
             var end = start + rowsPerPage;
             tableRows.hide().slice(start, end).show();
         });
      });
   </script>
</body>
</html>

你可以将以上代码保存为HTML文件，然后在浏览器中打开，就可以看到一个基于jQuery实现的表格动态分页效果啦。

示例说明：

在示例代码中，我们假设有一个表格，其中包含了一些数据。首先，我们使用jQuery选择器查找到该表格元素，并计算出总行数、每页显示行数、总页数等相关信息。接着，在循环中动态生成分页链接，并插入到HTML代码中。最后，给分页链接绑定一个点击事件，根据页码显示对应的数据行。

在第57行中，我们给表格元素设置了一个id="table"属性，这样就可以在JavaScript代码中引用它了。同时，在第58行中，我们根据表格元素查找到了所有的数据行。接下来，我们根据数据行数和每页显示行数，计算出了总页数和分页链接需要显示的页码。

在第62行中，我们使用了jQuery的appendTo()方法将分页链接插入到了一个class="pagination"的<ul>元素中。最后，在第66~71行中，我们为分页链接绑定了一个点击事件，在点击链接时根据页码显示对应的数据行。

在这个示例中，我们显示了每页2行数据，这意味着总共有3页数据。你可以通过修改第47行的rowsPerPage变量来修改每页显示的行数，从而改变每页显示的数据量。

对于不同数据结构的表格，你需要修改代码从而对其进行适配。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：基于Jquery实现表格动态分页实现代码 - Python技术站

基于Jquery实现表格动态分页实现代码

相关文章