layui分页java-layui分页组件

2025-03-08 0 13

《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后端的配合,可根据实际项目情况选择合适的方式。

Image

1. 本站所有资源来源于用户上传和网络,因此不包含技术服务请大家谅解!如有侵权请邮件联系客服!cheeksyu@vip.qq.com
2. 本站不保证所提供下载的资源的准确性、安全性和完整性,资源仅供下载学习之用!如有链接无法下载、失效或广告,请联系客服处理!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
4. 如果您也有好的资源或教程,您可以投稿发布,成功分享后有积分奖励和额外收入!
5.严禁将资源用于任何违法犯罪行为,不得违反国家法律,否则责任自负,一切法律责任与本站无关

源码下载