mybatisplus分页查询前端代码

以下是一个基本的前端代码示例，用于使用MybatisPlus进行分页查询：

// 初始化分页参数
var pageSize = 10; // 每页显示的记录数
var currentPage = 1; // 当前页码

// 发送分页查询请求
$.ajax({
  type: "GET",
  url: "/user/list", // 请求的URL
  data: {
    page: currentPage,
    size: pageSize
  },
  success: function(data) {
    // 处理返回的数据
    var userList = data.data;
    var totalCount = data.totalCount;
    var totalPages = Math.ceil(totalCount / pageSize);

    // 渲染用户列表
    renderUserList(userList);

    // 渲染分页导航条
    renderPagination(totalPages);
  }
});

// 渲染用户列表
function renderUserList(userList) {
  // 遍历用户列表，生成HTML代码
  var html = "";
  for (var i = 0; i < userList.length; i++) {
    html += "<tr>";
    html += "<td>" + userList[i].id + "</td>";
    html += "<td>" + userList[i].name + "</td>";
    html += "<td>" + userList[i].age + "</td>";
    html += "<td>" + userList[i].email + "</td>";
    html += "</tr>";
  }

  // 将HTML代码插入到页面
  $("#userTable tbody").html(html);
}

// 渲染分页导航条
function renderPagination(totalPages) {
  // 生成HTML代码
  var html = "";
  html += "<ul class='pagination'>";
  html += "<li><a href='#' onclick='prevPage();'>上一页</a></li>";

  for (var i = 1; i <= totalPages; i++) {
    if (i == currentPage) {
      html += "<li class='active'><a href='#'>" + i + "</a></li>";
    } else {
      html += "<li><a href='#' onclick='gotoPage(" + i + ");'>" + i + "</a></li>";
    }
  }

  html += "<li><a href='#' onclick='nextPage();'>下一页</a></li>";
  html += "</ul>";

  // 将HTML代码插入到页面
  $("#pagination").html(html);
}

// 上一页
function prevPage() {
  if (currentPage > 1) {
    currentPage--;
    reloadPage();
  }
}

// 下一页
function nextPage() {
  if (currentPage < totalPages) {
    currentPage++;
    reloadPage();
  }
}

// 跳转到指定页码
function gotoPage(page) {
  currentPage = page;
  reloadPage();
}

// 重新加载页面数据
function reloadPage() {
  // 发送分页查询请求
  $.ajax({
    type: "GET",
    url: "/user/list",
    data: {
      page: currentPage,
      size: pageSize
    },
    success: function(data) {
      // 处理返回的数据
      var userList = data.data;

      // 渲染用户列表
      renderUserList(userList);

      // 更新分页导航条
      renderPagination();
    }
  });
}

需要注意的是，此示例中使用了jQuery库和Bootstrap CSS框架来构建分页导航条和表格样式。在实际项目中，您可以根据需要选择其他前端框架或库来实现分页查询功能。