在Web开发中，分页是一个常见的需求。Ajax分页可以提供更好的用户体验，因为页面不需要重新加载。而使用Bootstrap模态框可以让分页更加美观和易于操作。在本文中，我们将学习如何实现这样的效果。
前置条件
在开始之前，需要确保你已经掌握了以下技术：
- HTML
- CSS
- JavaScript
- jQuery库
- Bootstrap框架
实现步骤
1. 创建HTML结构
我们先创建一个包含分页和数据的HTML结构。具体来说，我们需要一个<ul>元素来显示分页，一个<table>元素来显示数据。
-- -------------------- ---- -------
---- ------------------
---------------
--- ------------------------
------ --------------- --------------
-------
----
-----------
-----------
-----------
-----------
-----
--------
---------------
--------
------2. 创建数据源
我们需要一些假数据来测试我们的分页效果。下面是一个简单的JSON数组：
const data = [
{ id: 1, name: "张三", age: 20, gender: "男" },
{ id: 2, name: "李四", age: 22, gender: "女" },
{ id: 3, name: "王五", age: 24, gender: "男" },
//...
];3. 编写JavaScript代码
我们使用jQuery库来简化Ajax请求和DOM操作。
首先，我们创建一个函数loadData来加载数据。该函数接受两个参数：page表示要加载的页数，pageSize表示每页显示的记录数。该函数会向服务器发送Ajax请求，返回指定页数的数据，并将数据渲染到表格中。
-- -------------------- ---- -------
-------- -------------- --------- -
------------------ - ----- -------- -- -------- -------- -
----- ----- - -------------- --------
--------------
--------------------- -- -
----- -- - ---------------
----------------------------------------
------------------------------------------
-----------------------------------------
--------------------------------------------
-----------------
---
---
-上面的代码使用了$.get()方法来发送GET请求，第一个参数是URL地址，第二个参数是请求参数，第三个参数是回调函数。回调函数的参数result是服务器返回的JSON数据。
接下来，我们创建一个函数renderPagination来渲染分页器。该函数接受三个参数：page表示当前页数，totalPages表示总页数，range表示分页器显示的页码数量。
-- -------------------- ---- -------
-------- ---------------------- ----------- ------ -
----- ---------- - -----------------
-------------------
-- ----------- -- -- -------
----- ----- - ------------- - ---------------- - --- ---
----- --- - -------------- - ----- - -- ------------
-- ------ - -- -
------------------
----------------------
------------
--------
------------- ----
------------------ --
-
--
-- ------ - -- -
----------------------------------------------
-
-
--- ---- - - ------ - -- ---- ---- -
----- -- - ---------------
-- -- --- ----- -
----------------------
-
----------
------------
--------
------------- ----
------------------ --
--
----------------------
-
-- -
- --------------------------------------------------------- --------
------------------------------------------------------------------------------