《layui分页java-layui分页组件》
在Web开发中,当数据量较大时,分页显示是一个常见的需求。对于Java后端结合Layui前端框架的项目来说,使用Layui分页组件可以实现优雅的数据分页展示。
解决方案简述
整体解决方案是通过Java后端处理分页逻辑,如计算总页数、查询指定页码的数据等,并将结果以JSON格式返回给前端。前端使用Layui的分页组件接收这些数据并渲染出分页效果,同时为用户交互提供相应功能,例如点击不同页码切换页面内容等。
思路一:基于MyBatis - Plus与Layui分页
后端代码
如果使用的是MyBatis - Plus框架,在实体类对应的Mapper接口中继承BaseMapper接口即可获得分页查询能力。以下是示例代码:
java
// 实体类
public class User {
private Long id;
private String name;
// getter setter 省略
}</p>
<p>// Mapper接口
public interface UserMapper extends BaseMapper {}</p>
<p>// Service层方法
public Page getUserPage(int pageNum, int pageSize) {
Page page = new Page<>(pageNum, pageSize);
return userMapper.selectPage(page, null);
}
然后在Controller中调用Service层方法,并将结果转为JSON返回:
java
@RestController
@RequestMapping("/user")
public class UserController {</p>
<pre><code>@Autowired
private UserService userService;
@GetMapping("/page")
public Map<String, Object> getPage(@RequestParam Integer pageNum,
@RequestParam Integer pageSize) {
Page<User> userPage = userService.getUserPage(pageNum, pageSize);
List<User> records = userPage.getRecords();
long total = userPage.getTotal();
Map<String, Object> result = new HashMap<>();
result.put("code", 0);
result.put("msg", "");
result.put("count", total);
result.put("data", records);
return result;
}
}
前端代码
在前端页面引入Layui相关资源后,编写如下JavaScript代码:
html</p>
layui.use(['laypage', 'layer'], function(){
var laypage = layui.laypage
,layer = layui.layer;
// 完整功能
laypage.render({
elem: 'demo' // 分页容器的id
,count: 100 // 数据总数,从服务端得到
,limit:5
,limits:[5,10,15]
,url:'/user/page'
,method:'get'
,where:{}
,jump: function(obj, first){
//obj包含了当前分页的所有参数,比如:
console.log(obj.curr); //得到当前页,以便向服务端请求对应页的数据。
console.log(obj.limit); //得到每页显示的条数
if(!first){
//首次不执行
$.ajax({
url:'/user/page',
type:'get',
data:{
pageNum:obj.curr,
pageSize:obj.limit
},
success:function(res){
// 渲染表格或其他展示方式
console.log(res.data);
}
});
}
}
});
});
<p>
思路二:纯JDBC与Layui分页
如果不使用框架,直接使用JDBC操作数据库进行分页查询。
后端代码
```java
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.util.ArrayList;
import java.util.List;
public class UserDao {
public List<User> getUserPage(int pageNum, int pageSize) throws Exception{
List<User> list = new ArrayList<>();
Class.forName("com.mysql.cj.jdbc.Driver");
try (Connection conn = DriverManager.getConnection(
"jdbc:mysql://localhost:3306/test?useSSL=false&serverTimezone=UTC",
"root", "password")) {
String sql = "SELECT * FROM user LIMIT ?,?";
PreparedStatement pstmt = conn.prepareStatement(sql);
pstmt.setInt(1, (pageNum - 1) * pageSize);
pstmt.setInt(2, pageSize);
ResultSet rs = pstmt.executeQuery();
while (rs.next()) {
User user = new User();
user.setId(rs.getLong("id"));
user.setName(rs.getString("name"));
list.add(user);
}
// 获取总记录数
String countSql = "SELECT COUNT(*) FROM user";
PreparedStatement countPstmt = conn.prepareStatement(countSql);
ResultSet countRs = countPstmt.executeQuery();
if (countRs.next()) {
long totalCount = countRs.getLong(1);
// 将总记录数等信息封装到返回结果中
}
}
return list;
}
}
```
其他部分与思路一类似,只是Service和Controller层需要根据这个UserDao进行调整,以适应纯JDBC的分页查询逻辑。以上两种思路都能很好地实现Layui分页组件与Java后端的配合,可根据实际项目情况选择合适的方式。