Ajax+BootStrap实现分页

文章目录

Ajax+BootStrap实现分页

【HTML】

html 复制代码

<body>
<!-- 数据表格 -->
<table class="table table-bordered" id="dataTable">
    <thead>
    <tr>
        <th>ID</th>
        <th>Name</th>
        <!-- 其他列 -->
    </tr>
    </thead>
    <tbody id="tableBody"></tbody>
</table>

<!-- 分页 -->
<nav>
    <ul class="pagination" id="pagination"></ul>
</nav>

</body>

在表格的
处存放后端渲染出来的BoootStrap分页组件，在中则存放后端每次点击切换页码时对应页面所要展示的数据

【JS】

定义全局变量：

js 复制代码

let currentPage = 1; // 当前页码
const pageSize = 10; // 每页显示数量（可动态改变）
let totalPages;//总页数

加载数据函数

js 复制代码

function loadPageData(page) {
    const xhr = new XMLHttpRequest();
    xhr.open('GET', `/(~your method~)?page=${page}&size=${pageSize}`, true);
    xhr.onload = function() {
        if (this.status === 200){
            var responseText = xhr.responseText;
            const response = JSON.parse(responseText);
            renderTable(response.data);
            totalPages = response.totalPages;
            renderPagination(totalPages, page);
        } else {
            console.error('请求失败');
        }
    };
    xhr.setRequestHeader('Accept', 'application/json');//设置格式
    xhr.send();
}

**注：**无论使用GET、POST方法都需要加上send（）发送请求，否则取不到数据。同时要注意将获取到的responseText字符串采用parse（）方法转化成对象

渲染数据方法

js 复制代码

function renderTable(data) {
    const tbody = document.getElementById('tableBody');
    tbody.innerHTML = '';

    data.forEach(item => {
        const row = `<tr>
      <td>${item.id}</td>
      <td>${item.name}</td>
      <td>${item.job}</td>
      <td>${item.salary}</td>
      <td><button class="btn btn-danger" data-bs-toggle="modal" data-bs-target="#delmol" onclick="deleteone(${item.id})">删除</button></td>
        <td><button class="btn btn-warning" data-bs-toggle="modal" data-bs-target="#myModal" onclick="update(${item.id})">更新</button></td>
      <!-- 其他字段 -->
    </tr>`;
        tbody.innerHTML += row;
    });
}

渲染分页组件

js 复制代码

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

    // 上一页按钮
    const prevDisabled = currentPage === 1 ? 'disabled' : '';
    pagination.innerHTML += `
    <li class="page-item ${prevDisabled}">
      <a class="page-link" href="#" onclick="changePage(${currentPage - 1})">Previous</a>
    </li>
  `;

    // 页码按钮
    for (let i = 1; i <= totalPages; i++) {
        const active = i === currentPage ? 'active' : '';
        pagination.innerHTML += `
      <li class="page-item ${active}">
        <a class="page-link" href="#" onclick="changePage(${i})">${i}</a>
      </li>
    `;
    }

    // 下一页按钮
    const nextDisabled = currentPage === totalPages ? 'disabled' : '';
    pagination.innerHTML += `
    <li class="page-item ${nextDisabled}">
      <a class="page-link" href="#" onclick="changePage(${currentPage + 1})">Next</a>
    </li>
  `;
}

切换页码

js 复制代码

function changePage(newPage) {
    if (newPage < 1 || newPage > totalPages) return;
    currentPage = newPage;
    loadPageData(currentPage);
}

加载初始页
js 复制代码
```
loadPageData(1);
```

【注意事项】

Bootstrap分页样式依赖 pagination、page-item、page-link 等class
通过Ajax动态更新表格内容和分页状态
分页按钮使用事件委托（这里直接使用onclick）
当前页码使用active样式高亮显示
第一页和最后一页时禁用相应按钮

【后端需求】

前端需要传递的值有两个：page、size
后端接收到这两个值后经过一系列操作向前端应该返回一个JSON形式的字符串其中包括：data（当前页数据）、totalPages（总页数）、currentPage（当前页数）。
后端我采用的是Servlet与MyBatis方式获取数据；方法可任意。
个：page、size
后端接收到这两个值后经过一系列操作向前端应该返回一个JSON形式的字符串其中包括：data（当前页数据）、totalPages（总页数）、currentPage（当前页数）。
后端我采用的是Servlet与MyBatis方式获取数据；方法可任意。
最后，需要加入FastJson以及lombok的依赖即可。