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样式高亮显示
  • 第一页和最后一页时禁用相应按钮

【后端需求】
  • 前端需要传递的值有两个:pagesize
  • 后端接收到这两个值后经过一系列操作向前端应该返回一个JSON形式的字符串其中包括:data(当前页数据)、totalPages(总页数)、currentPage(当前页数)。
  • 后端我采用的是ServletMyBatis方式获取数据;方法可任意。
    个:pagesize
  • 后端接收到这两个值后经过一系列操作向前端应该返回一个JSON形式的字符串其中包括:data(当前页数据)、totalPages(总页数)、currentPage(当前页数)。
  • 后端我采用的是ServletMyBatis方式获取数据;方法可任意。
  • 最后,需要加入FastJson以及lombok的依赖即可。
相关推荐
小白学大数据5 小时前
Python + Requests库爬取动态Ajax分页数据
开发语言·python·ajax·okhttp
我是哈哈hh20 小时前
【AJAX项目】黑马头条——数据管理平台
前端·javascript·ajax·前端框架·axios·proxy模式
Ronin-Lotus21 小时前
上位机知识篇---AJAX
前端·javascript·ajax
狗都不学爬虫_1 天前
JS逆向 - (国外)SHEIN站 - 请求头(armorToken、Anti-in)
javascript·python·ajax·网络爬虫·wasm
半新半旧2 天前
python 整合使用 Redis
redis·python·bootstrap
我是哈哈hh2 天前
【AJAX】Promise详解
前端·javascript·ajax·promiss·promiss.all
RealmElysia3 天前
SpringCache
java·spring·bootstrap
在逃的吗喽4 天前
黑马头条项目详解
前端·javascript·ajax
我是哈哈hh4 天前
【AJAX】XMLHttpRequest、Promise 与 axios的关系
前端·javascript·ajax·xmlhttprequest·promise
在逃的吗喽5 天前
AJAX案例合集
前端·javascript·ajax