当前位置：首页 > 文章列表 > 文章 > 前端 > JS实现Spring分页查询方法详解

JS实现Spring分页查询方法详解

2025-11-11 11:36:51 0浏览收藏

最近发现不少小伙伴都对文章很感兴趣，所以今天继续给大家介绍文章相关的知识，本文《JS实现Spring分页查询教程》主要内容涉及到等等知识点，希望能帮到你！当然如果阅读本文时存在不同想法，可以在评论中表达，但是请勿使用过激的措辞~

后端通过Spring Data JPA的Pageable实现分页接口，自动解析page、size、sort参数；2. 前端使用JS（如Axios）发送带分页参数的请求；3. 获取数据后，JS动态渲染列表内容并生成分页按钮；4. 优化用户体验，如添加加载状态、限制页码显示、支持条数切换和错误处理。

JS怎样在Spring中实现分页查询_JS在Spring中实现分页查询的详细教程

在Spring项目中实现分页查询，通常是由后端Java代码完成数据处理，而JS（JavaScript）负责前端的请求发送和结果展示。所谓的“JS在Spring中实现分页查询”其实是指前后端协作完成分页功能：前端用JS发起请求并渲染数据，后端用Spring Data JPA或MyBatis等框架进行数据库分页查询。

1. 后端Spring实现分页接口

使用Spring Boot + Spring Data JPA可以非常方便地实现分页。你需要：

定义Repository接口继承PagingAndSortingRepository或JpaRepository
在Service或Controller中使用Pageable参数

示例代码：

// Repository
public interface UserRepository extends JpaRepository<User, Long> {
}

// Controller
@RestController
@RequestMapping("/api/users")
public class UserController {

    @Autowired
    private UserService userService;

    @GetMapping
    public ResponseEntity<Page<User>> getUsers(Pageable pageable) {
        Page<User> users = userService.findAll(pageable);
        return ResponseEntity.ok(users);
    }
}

Spring会自动从请求参数中解析page、size、sort等字段。例如访问：

/api/users?page=0&size=10&sort=name,asc

就会返回第一页，每页10条，按姓名升序排列的数据。

2. 前端JS发起分页请求

前端可以用原生JS、jQuery、Axios等方式调用后端分页接口。

使用Axios的示例：

function loadUsers(page = 0, size = 10) {
  axios.get('/api/users', {
    params: {
      page: page,
      size: size
    }
  })
  .then(response => {
    const data = response.data;
    renderUserList(data.content);
    updatePagination(data.totalPages, data.number);
  })
  .catch(error => {
    console.error('加载失败:', error);
  });
}

这里data.content是当前页的数据列表，data.totalPages是总页数，data.number是当前页码（从0开始）。

3. JS动态渲染分页UI

获取到分页数据后，需要用JS更新页面内容和分页控件。

渲染数据列表：

function renderUserList(users) {
  const tbody = document.getElementById('userList');
  tbody.innerHTML = '';
  users.forEach(user => {
    const tr = <tr>
      <td>${user.id}</td>
      <td>${user.name}</td>
      <td>${user.email}</td>
    </tr>;
    tbody.insertAdjacentHTML('beforeend', tr);
  });
}

生成分页按钮：

function updatePagination(totalPages, currentPage) {
  const pagination = document.getElementById('pagination');
  pagination.innerHTML = '';

  for (let i = 0; i < totalPages; i++) {
    const btn = document.createElement('button');
    btn.innerText = i + 1;
    btn.disabled = i === currentPage;
    btn.onclick = () => loadUsers(i);
    pagination.appendChild(btn);
  }
}