JSP实现带查询条件的通用分页组件

JSP 实现带查询条件的通用分页组件的完整攻略，主要分以下三个步骤：

1. 在前端页面搭建分页组件的基本框架
2. 在后台编写分页查询的 SQL 语句，实现数据的分页查询
3. 前后端的数据交互和页面渲染

下面我们来详细讲解这三个步骤。

步骤一：前端页面搭建分页组件的基本框架

在前端页面，我们需要搭建一个分页组件的基本框架，包括必要的 HTML 结构和样式，以及 JavaScript 代码实现数据的交互和页面的渲染。

具体来说，我们需要定义以下 HTML 结构：

<!-- 分页器容器 -->
<div class="page-container">
  <!-- 每页显示行数 -->
  <label>每页行数：</label>
  <select id="pageSize">
    <option value="10">10</option>
    <option value="20">20</option>
    <option value="50">50</option>
  </select>

  <!-- 查询条件，可以根据需求自定义 -->
  <label>查询条件：</label>
  <input type="text" id="search" />

  <!-- 分页按钮 -->
  <button id="prevPage">上一页</button>
  <button id="nextPage">下一页</button>

  <!-- 分页信息 -->
  <span id="currentPage"></span> / <span id="totalPage"></span>
  <span id="totalRows"></span>
</div>

同时，我们还需要为分页按钮和查询条件的 onchange 事件添加对应的 JavaScript 代码，用于实现数据的交互和页面的渲染。

// 定义分页器对象
var paginator = {
  currentPage: 1,
  pageSize: 10,
  totalPage: 0,
  totalRows: 0,
  search: '',
  tableData: [],
};

// 上一页按钮点击事件
document.getElementById('prevPage').onclick = function() {
  if (paginator.currentPage > 1) {
    paginator.currentPage--;
    renderTable();
  }
};

// 下一页按钮点击事件
document.getElementById('nextPage').onclick = function() {
  if (paginator.currentPage < paginator.totalPage) {
    paginator.currentPage++;
    renderTable();
  }
};

// 每页显示行数列表改变事件
document.getElementById('pageSize').onchange = function() {
  paginator.pageSize = Number(this.value);
  paginator.currentPage = 1;
  renderTable();
};

// 查询条件输入框改变事件
document.getElementById('search').onchange = function() {
  paginator.search = this.value;
  paginator.currentPage = 1;
  renderTable();
};

// 渲染表格函数
function renderTable() {
  // TODO：从后台获取数据，更新 paginator 对象
  // ...

  // 更新页面元素
  document.getElementById('currentPage').innerText = paginator.currentPage;
  document.getElementById('totalPage').innerText = paginator.totalPage;
  document.getElementById('totalRows').innerText = `共 ${paginator.totalRows} 条`;

  // TODO：根据更新后的 paginator.tableData 数组，渲染表格数据
  // ...
}

// 页面初始化
renderTable();

步骤二：后台编写分页查询的 SQL 语句，实现数据的分页查询

在后台，我们需要编写分页查询的 SQL 语句，以实现数据的分页查询。具体来说，我们需要根据分页组件传递的参数（当前页码、每页显示行数、查询条件等），拼接出相应的 SQL 语句。

示例 1：使用 MySQL 实现通用分页查询

假设我们使用 MySQL 数据库，并且要查询的表为 users，其中包含 id、username、password 和 create_time 四个字段。以下代码演示了如何编写通用的分页查询 SQL 语句。

SELECT COUNT(*) FROM users WHERE username LIKE '%关键字%'
SELECT * FROM users WHERE username LIKE '%关键字%' ORDER BY create_time DESC LIMIT ?, ?

其中 COUNT(*) 用于统计满足条件的总记录数，第一个 ? 用于替换查询语句中的关键字，第二个 ? 用于替换分页查询的偏移量和行数。可以看到，我们使用了 LIKE 运算符和 % 通配符来实现模糊查询，同时使用 ORDER BY 子句按照 create_time 字段的倒序排列，以保证最新的记录在前面。同时，我们需要注意使用 LIMIT 来限制查询的偏移量和行数。

示例 2：使用 PostgreSQL 实现通用分页查询

假设我们使用 PostgreSQL 数据库，并且要查询的表为 users，其中包含 id、username、password 和 create_time 四个字段。以下代码演示了如何编写通用的分页查询 SQL 语句。

SELECT COUNT(*) FROM users WHERE username LIKE '%关键字%'
SELECT * FROM users WHERE username LIKE '%关键字%' ORDER BY create_time DESC OFFSET ? LIMIT ?

可以看到，这里使用的语法和 MySQL 略有不同，在 ORDER BY 子句前使用 OFFSET 关键字代替 LIMIT 偏移量和行数的参数，这是 PostgreSQL 中的惯用写法。

步骤三：前后端的数据交互和页面渲染

最后，我们需要在前后端建立数据交互通道，以便在后台调用分页查询的 SQL 语句，并将查询结果传回前端进行页面渲染。

对于前端部分，我们已经在步骤一中定义了 JavaScript 对象 paginator，用于管理分页器的状态，同时也定义了渲染表格的 JavaScript 函数 renderTable。这些代码已经与后台无关，可以直接运行。

对于后台部分，我们需要编写一个 JSP 页面，用于实现与前端的数据交互和与数据库的数据交互。具体来说，我们需要在 JSP 页面中编写以下代码：

<%
  // 读取前端传递的参数 (currentPage, pageSize, search)
  int currentPage = Integer.valueOf(request.getParameter("currentPage"));
  int pageSize = Integer.valueOf(request.getParameter("pageSize"));
  String search = request.getParameter("search");

  // 计算查询偏移量
  int offset = (currentPage - 1) * pageSize;

  // 组装 SQL 语句
  String countSQL = "SELECT COUNT(*) FROM users WHERE username LIKE '%" + search + "%'";
  String dataSQL = "SELECT * FROM users WHERE username LIKE '%" + search + "%' ORDER BY create_time DESC LIMIT " + offset + ", " + pageSize;

  // 执行查询，并统计总记录数
  ResultSet countResultSet = stmt.executeQuery(countSQL);
  countResultSet.next();
  int totalRows = countResultSet.getInt(1);

  // 执行查询，并将结果转化为 JSON 数组
  ResultSet dataResultSet = stmt.executeQuery(dataSQL);
  JSONArray jsonArray = new JSONArray();
  ResultSetMetaData metaData = dataResultSet.getMetaData();
  while (dataResultSet.next()) {
    JSONObject jsonObject = new JSONObject();
    for (int i = 1; i <= metaData.getColumnCount(); i++) {
      jsonObject.put(metaData.getColumnName(i), dataResultSet.getObject(i));
    }
    jsonArray.add(jsonObject);
  }

  // 构造返回的 JSON 对象
  JSONObject json = new JSONObject();
  json.put("totalRows", totalRows);
  json.put("tableData", jsonArray);

  // 将 JSON 对象作为响应内容返回给前端
  response.setContentType("application/json");
  response.setCharacterEncoding("UTF-8");
  response.getWriter().write(json.toJSONString());
%>

这段代码主要实现了以下操作：

1. 读取前端传递的 currentPage、pageSize 和 search 三个参数；
2. 根据这些参数，拼接出分页查询的 SQL 语句，并执行查询；
3. 统计查询结果的总记录数，并将结果保存为 JSON 数组；
4. 将统计结果和 JSON 数组封装为一个 JSON 对象，以便前端调用；
5. 将 JSON 对象作为响应内容返回给前端。

至此，我们已经完成了 JSP 实现带查询条件的通用分页组件的完整攻略，并提供了两个示例说明。