java页面分页代码

在Java Web开发中，分页是非常常见的功能之一，尤其是在展示大量数据时，通过分页可以明显提升用户体验，避免一次性加载大量数据导致页面卡顿。下面将介绍Java Web中常用的几种分页方式及具体实现。

## 前后端分页方式

### 前端分页

前端分页其实就是将所有数据全部加载到前端，然后通过JavaScript代码实现分页功能。这种方式相对比较简单，实现起来也比较容易，不需要后端介入。但是在数据量很大的情况下，会导致前端性能问题，因为需要一次性加载大量数据。

实现方式：

前端分页的主要实现方式是使用JavaScript的内置数组函数（如slice(), splice(), concat()等）对当前数据集合进行分页处理。通过计算总页数、当前页、每页显示数据数量等参数，结合上下页、跳转等操作，实现页面分页。

```javascript

function sliceArray(page, count, data) {

let start = (page - 1) * count;

let end = start + count;

return data.slice(start, end);

}

function renderData(page, count, data) {

let html = '';

let pagedData = sliceArray(page, count, data);

for (let i = 0; i < pagedData.length; i++) {

html += '

' + pagedData[i] + '

';

}

document.querySelector('.pagination ul').innerHTML = html;

}

function initPagination(page, count, data) {

let totalPages = Math.ceil(data.length / count);

let html = '';

for (let i = 1; i <= totalPages; i++) {

html += '

' + i + '

';

}

document.querySelector('.pagination ul').innerHTML = html;

}

let data = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z'];

let currentPage = 1;

let pageCount = 5;

initPagination(currentPage, pageCount, data);

renderData(currentPage, pageCount, data);

```

其中，sliceArray()函数用来进行分页数据的提取和切片，renderData()函数用来渲染当前页数据，initPagination()函数用来渲染整个分页导航条。

### 后端分页

后端分页是通过后端服务器对数据进行分页处理，然后将分页后的数据传输到前端展示。在数据量较大的情况下，使用后端分页能够有效降低前端的资源占用率，避免服务器和浏览器的崩溃。

实现方式：

后端分页通常需要用到数据库的分页查询语句，如MySQL中的LIMIT关键字。关键是在后端实现分页时需要处理的数据较大，需要注意性能问题。

```java

public List getUserListByPage(int pageNum, int pageSize) {

String sql = "SELECT * FROM user LIMIT ?, ?";

int offset = (pageNum - 1) * pageSize;

try (Connection conn = dataSource.getConnection();

PreparedStatement stmt = conn.prepareStatement(sql)) {

stmt.setInt(1, offset);

stmt.setInt(2, pageSize);

ResultSet rs = stmt.executeQuery();

List userList = new ArrayList<>();

while (rs.next()) {

User user = new User();

user.setId(rs.getInt("id"));

user.setUsername(rs.getString("username"));

user.setPassword(rs.getString("password"));

user.setAge(rs.getInt("age"));

user.setAddress(rs.getString("address"));

userList.add(user);

}

return userList;

} catch (SQLException e) {

e.printStackTrace();

}

return null;

}

```

这里是使用JDBC连接数据库的方式进行分页处理，其中pageNum和pageSize分别表示要取出的页码和每页返回的数据条数，通过计算出偏移量offset来动态生成LIMIT语句，从而实现分页查询。

## 分页插件

除了自行实现前后端分页外，我们还可以使用已有的分页插件进行快速开发，常见的分页插件有Bootstrap-paginator、LayUI中的laypage、MyBatis-PageHelper等。这些分页插件都具有易用、稳定、功能丰富等特点，使用方便，也不需要过多关注底层实现细节。

### Bootstrap-paginator

Bootstrap-paginator是Bootstrap分页插件，支持多种样式和配置，代码简洁，易于上手，功能强大。这里演示一下如何使用Bootstrap-paginator实现前端分页。

```javascript

let data = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z'];

let currentPage = 1;

let pageCount = 5;

let renderData = function (page) {

let html = '';

let start = (page - 1) * pageCount;

let end = start + pageCount;

let pagedData = data.slice(start, end);

for (let i = 0; i < pagedData.length; i++) {

html += '

' + pagedData[i] + '

';

}

document.querySelector('.pagination-demo ul').innerHTML = html;

}

let initPagination = function () {

let totalPages = Math.ceil(data.length / pageCount);

$('.pagination-demo').bootstrapPaginator({

currentPage: currentPage,

totalPages: totalPages,

numberOfPages: 5,

onPageClicked: function (event, originalEvent, type, page) {

currentPage = page;

renderData(currentPage);

}

});

}

initPagination();

renderData(currentPage);

```

### LayUI分页

LayUI是一套采用自身模块规范编写的前端UI框架，其分页插件laypage也非常简单易用，支持多种风格和配置项。

```html

```

```javascript

let data = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z'];

let currentPage = 1;

let pageCount = 5;

let renderData = function (page) {

let html = '';

let start = (page - 1) * pageCount;

let end = start + pageCount;

let pagedData = data.slice(start, end);

for (let i = 0; i < pagedData.length; i++) {

html += '

' + pagedData[i] + '

';

}

document.querySelector('#demo1 ul').innerHTML = html;

}

let initPagination = function () {

let totalPages = Math.ceil(data.length / pageCount);

layui.use('laypage', function () {

layui.laypage.render({

elem: 'demo1',

count: data.length,

limit: pageCount,

curr: currentPage,

layout: ['prev', 'page', 'next', 'skip', 'count'],

jump: function (obj, first) {

if (!first) {

currentPage = obj.curr;

renderData(currentPage);

}

}

});

});

}

initPagination();

renderData(currentPage);

```

其中，需要在HTML中先指定一个