JQuery页面的表格数据的增加与分页的实现

下面将为您详细讲解实现“JQuery页面的表格数据的增加与分页”的完整攻略。

一、需求分析

我们需要实现一个功能，可以在页面上增加表格数据并实现分页。在分页过程中，可以显示当前页码和数据总页数。

二、步骤说明

1. 首先，我们需要手动将表格数据写入HTML中，定义好表头和表格的id。

<table id="mytable">
  <thead>
    <tr>
      <th>ID</th>
      <th>姓名</th>
      <th>年龄</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>张三</td>
      <td>18</td>
    </tr>
    <tr>
      <td>2</td>
      <td>李四</td>
      <td>22</td>
    </tr>
  </tbody>
</table>

1. 编写JS代码，先定义一些变量，包括总页数，当前页码等信息，以及一个初始化函数用于获取表格数据并初始化当前页码和总页数。

var pageSize = 2; // 每页显示的记录数
var pageNum = 1; // 当前页码
var totalPage = 0; // 总页数
var rowCount = $("#mytable tbody tr").length; // 总记录数
var startIndex = 0; // 当前页记录的起始索引
var endIndex = 0; // 当前页记录的结束索引

// 初始化函数，获取表格数据并初始化当前页码和总页数
function init() {
  totalPage = Math.ceil(rowCount / pageSize);
  $("#pageInfo").text("第" + pageNum + "页 / 共" + totalPage + "页");
  if (pageNum == 1) {
    $("#prePage").hide();
  } else {
    $("#prePage").show();
  }
  if (pageNum == totalPage) {
    $("#nextPage").hide();
  } else {
    $("#nextPage").show();
  }
}

1. 接下来，我们需要编写一些函数来实现添加表格数据、翻页、以及一些条件判断等功能。其中，addData函数用于向表格中添加新的数据，changePage函数用于切换页面，并修改显示页面信息。需要注意的是，需要将表格数据和分页按钮分别封装在两个不同的div中，并使用CSS进行样式设置，以方便后续的调用和显示。

// 添加表格数据
function addData() {
  $("#mytable tbody").append("<tr><td>" + (rowCount + 1) + "</td><td>新记录" + (rowCount + 1) + "</td><td>" + (Math.floor(Math.random() * 10) + 20) + "</td></tr>");
  rowCount++;
  totalPage = Math.ceil(rowCount / pageSize);
  init();
}

// 切换页面
function changePage(index) {
  pageNum += index;
  if (pageNum < 1) {
    pageNum = 1;
  }
  if (pageNum > totalPage) {
    pageNum = totalPage;
  }
  startIndex = (pageNum - 1) * pageSize;
  endIndex = startIndex + pageSize - 1;
  $("#mytable tbody tr").hide();
  for (var i = startIndex; i <= endIndex && i < rowCount; i++) {
    $("#mytable tbody tr").eq(i).show();
  }
  init();
}

// 条件判断，防止过界
function checkIndex() {
  if ($(this).attr("id") == "prePage" && pageNum == 1) {
    alert("已经是第一页了！");
    return;
  }
  if ($(this).attr("id") == "nextPage" && pageNum == totalPage) {
    alert("已经是最后一页了！");
    return;
  }
  if ($("#mytable tbody tr").length == 0) {
    alert("表格数据为空！");
    return;
  }
  changePage($(this).data("index"));
}

// 样式设置，方便后续调用和显示
$("#mytable tbody tr").hide();
for (var i = 0; i < pageSize && i < rowCount; i++) {
  $("#mytable tbody tr").eq(i).show();
}
init();

$("#prePage").on("click", checkIndex).data("index", -1);
$("#nextPage").on("click", checkIndex).data("index", 1);
$("#addData").on("click", addData);

1. 最后，我们需要在HTML中添加一些元素，包括表格数据和分页按钮的div，以及一些用于显示当前页码和总页数的div和按钮等。需要使用CSS进行样式设置，使其美观易用。

<div id="tableDiv">
  <table id="mytable">
    <thead>
      <tr>
        <th>ID</th>
        <th>姓名</th>
        <th>年龄</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>张三</td>
        <td>18</td>
      </tr>
      <tr>
        <td>2</td>
        <td>李四</td>
        <td>22</td>
      </tr>
    </tbody>
  </table>
</div>

<div id="pageDiv">
  <button id="prePage">&lt;&lt; 上一页</button>
  <span id="pageInfo"></span>
  <button id="nextPage">下一页 &gt;&gt;</button>
  <button id="addData">添加数据</button>
</div>

三、示例说明

下面，我们通过两个示例来说明如何使用这个JQuery分页插件。
1. 示例1：当页面上的表格数据为3条时，依次点击“添加数据”按钮后，页面上的表格数据将会依次增加新纪录，并显示在当前页与下一页中。当页面到达第三页时，“下一页”按钮将会变灰，无法点击。
2. 示例2：当页面上的表格数据超过10条时（具体以界面截图为准），通过点击分页按钮实现数据的分页显示，并在每个分页中显示当前页码以及总页数。

四、总结

通过以上的实现，我们成功的完成了“JQuery页面的表格数据的增加与分页的实现”。需要注意的是，在实现过程中，我们要充分考虑用户体验，并进行良好的数据处理和页面跳转。同时，我们要注意一些细节处理和条件判断，以确保程序运行的稳定性和健壮性。