function load()
{
$.ajax({
url: "jiazai.php",
// 显示所有的数据不用写data
data:{page:page},
//当前页记得传过去
type:"POST",
dataType: "TEXT",
success: function (data) {
}
});
}
로그인 후 복사
4.去写显示数据的处理页面;这里要考虑的是跳过多少条数据还有想要显示多少条数据，用到limit：
<?php
include ("db.class.php");
$db = new db();
$page=$_POST["page"];
//去当前页page
$num = 3;
//每页显示几条
$tg = ($page-1)*3;//跳过几条
$sql = "select * from min limit {$tg},{$num}";
//limit:两个参数，第一个是跳过多少条，第二个是取多少条
echo $db->Query($sql);
로그인 후 복사
做完了第一步，来看看图：
显示数据实现！
好的，每页先是三条数据已经实现了，（页面变成这样我用了美化网页的Bookstrap，前面有讲到）
5.显示分页信息，写一个方法，先用ajax先获取总页数：
function loadfenye()
{
var s = "";
//用于接收
var xiao = 1;
// 最大页
var da = 1;
// 最小页
$.ajax({
async:false,
// 做成同步
url:"zys.php",
dataType:"TEXT",
success:function(data){
da = data;
//最大页数
}
});
}
로그인 후 복사
接下来做查询总页数的php页面：
<?php
//查询总页数
include ("db.class.php");
$db = new db();
$sql = "select count(*) from min";
$zts = $db->strquery($sql);
//总条数
echo ceil($zts/3);
//ceil向上取整
로그인 후 복사
好啦，总页数获取到了，回来把分页写完吧：
//加载分页信息方法
function loadfenye()
{
var s = "";
//用于接收
var xiao = 1;
// 最大页
var da = 1;
// 最小页
$.ajax({
async:false,
// 做成同步
url:"zys.php",
dataType:"TEXT",
success:function(data){
da = data;
//最大页数，查到的最大页数交个默认的最大页数
}
});
//加载上一页
s += "<li><a>«</a></li>";
// 加载分页列表
for(i=page-4;i<page+5;i++)
{
//i代表列表的页数
if(i>=xiao && i<=da)
{
s += " <li><a>"+i+"</a></li>"
}
}
// 加载下一页
s += "<li><a>»</a></li>";
$("#fenye").html(s);
}
로그인 후 복사
这样写完了以后，来看图：
分页的信息也显示出来了
6.来把默认选中页数的背景色来改变一下吧
看一下Bookstrap；改背景色的方法吧：
很显然是多了一个active的样式，我们用判断给加上吧
if(i>=xiao && i<=da) {
if (i == page) {
s += " <li class='active'><a>" + i + "</a></li>"
}
else {
s += " <li><a>" + i + "</a></li>";
}
로그인 후 복사
好了，看一下：
可以，没毛病
7.做页数的点击事件，实现点击页数跳转到该页数并显示数据，还要更新列表；
先给数字列表加上一个class
s += " <li class='active list'><a>" + i + "</a></li>"
🎜🎜🎜좋아요, 한번 보세요: 🎜🎜🎜🎜예, 문제 없습니다🎜🎜🎜7. 페이지 번호에 대한 클릭 이벤트를 생성하고 페이지 번호로 점프하여 페이지 번호 클릭 시 데이터를 표시하고 목록을 업데이트합니다. 🎜🎜 🎜먼저 숫자 목록에 클래스를 추가하세요 🎜🎜s += " <li class='active list'><a>" + i + "</a></li>"< /code>🎜🎜그런 다음 메소드를 작성하세요: 🎜🎜🎜<div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false"><?php
include ("db.class.php");
$db = new db();
$page=$_POST["page"];
//去当前页page
$tj = " 1=1 ";
if(!empty($_POST["name"]))
{
$name = $_POST["name"];
$tj = " name like &#39;%{$name}%&#39; ";
}
$num = 3;
//每页显示几条
$tg = ($page-1)*3;//跳过几条
$sql = "select * from min where {$tj} limit {$tg},{$num}";
//limit:两个参数，第一个是跳过多少条，第二个是取多少条
$arr = $db->Query($sql);
//遍历
$str="";
foreach ($arr as $v)
{
$str = $str.implode("-",$v)."|";
//用-把$v拼起来,拼出来是1-红2-蓝,用|分割，拼出来是1-红|2-蓝|
}
$str = substr($str,0,strlen($str)-1);
//截取字符串：从第0个开始，截取它的长度-1
//strlen获取字符串长度
echo $str;</pre><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div>🎜🎜🎜5번째 페이지를 클릭하면: 🎜🎜<img alt="" src="https://img.php.cn/upload/article/ 000/013/745/e9ade877ff62615d080a6f2049700a92-6.png "/>🎜🎜아무 문제 없습니다. 🎜🎜🎜8. 다음은 이전 페이지와 다음 페이지의 클릭 이벤트입니다. 첫 번째는 이전 페이지의 클릭 이벤트입니다. 🎜 🎜🎜먼저 이전 페이지의 목록에 클래스를 추가하세요. 이벤트 작성에 편리합니다. 🎜🎜<code>s += "<li class='sy'><a>«</a></ li>";🎜🎜자, 이전 페이지 클릭 이벤트: 🎜🎜🎜rrreee🎜🎜🎜다음 페이지의 클릭 이벤트: 🎜🎜 위와 동일: 쓰기 이벤트를 촉진하기 위해 목록에 클래스 추가: 🎜🎜 s += "<li class='xy'> <a>»</a></li>" 🎜🎜🎜다음 페이지 클릭 이벤트: 🎜🎜🎜rrreee 🎜🎜🎜좋아, ajax 페이징 쿼리의 완벽한 구현입니다. 🎜🎜🎜8. 조건부 쿼리 추가: 🎜🎜🎜텍스트 상자 추가: 🎜🎜🎜rrreee🎜🎜🎜🎜🎜🎜 🎜아아아아 🎜🎜🎜다음으로 다음 두 가지 방법을 변경해야 합니다. 🎜🎜 Ajax는 텍스트 상자의 이름만 전달하면 됩니다. 🎜🎜🎜🎜rrreee🎜🎜🎜🎜rrreee🎜🎜🎜처리 페이지에서 동일 조건을 설정합니다. 🎜 🎜🎜rrreee🎜🎜
🎜🎜페이징 정보도 표시됩니다🎜🎜🎜6. 기본 선택 페이지의 배경색을 변경해 보겠습니다🎜🎜🎜Bookstrap 배경색 변경 방법을 살펴보세요 :🎜🎜
🎜🎜예, 문제 없습니다🎜🎜🎜7. 페이지 번호에 대한 클릭 이벤트를 생성하고 페이지 번호로 점프하여 페이지 번호 클릭 시 데이터를 표시하고 목록을 업데이트합니다. 🎜🎜 🎜먼저 숫자 목록에 클래스를 추가하세요 🎜🎜
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
