微客导航 » 文章资讯 » ajax实现分页和分页查询

ajax实现分页和分页查询

2024-02-27 09:33:07 149

之前有写过ajax的加载页面，是非常简单的，而且不需要重新刷新页面，写起来也是非常的方便，今天写的分页是不用封装page.class.php的，是单纯的js和ajax写出来的

首先为了页面的整齐与美观，我用到了bootstrap，需要引进所需要的文件包

下面是页面显示的内容







国家代号
国家名称
父级代号

下面是js部分了，用的ajax来写


varpage=1;//当前页
//加载数据
Load();
//加载分页信息
LoadFenYe();
//给查询加点击事件
$("#chaxun").click(function(){
//将当前页重置
page=1;
//加载数据
Load();
//加载分页信息
LoadFenYe();
})
//加载分页信息的方法
functionLoadFenYe()
{
vars="";
varname=$("#name").val();
varminys=1;
varmaxys=1;
$.ajax({
async:false,
data:{name:name},
type:"POST",
url:"zys.php",
dataType:"TEXT",
success:function(data){
maxys=data;
}
});
//加载上一页
s+="«";
//加载分页列表
for(vari=page-4;i=minys&&i<=maxys)
{
if(i==page)
{
s+=""+i+"";
}
else
{
s+=""+i+"";
}
}
}
//加载下一页
s+="»";
//显示分页列表
$("#fenye").html(s);
//给列表加点击事件
$(".list").click(function(){
//改变当前页
page=$(this).text();
//加载数据
Load();
//加载分页信息
LoadFenYe();
})
//上一页加点击事件
$(".syy").click(function(){
//改变当前页
if(page>1)
{
page=parseInt(page)-1;
//加载数据
Load();
//加载分页信息
LoadFenYe();
}
})
//下一页加点击事件
$(".xyy").click(function(){

//改变当前页
if(page
//加载数据的方法
functionLoad()
{
varname=$("#name").val();
$.ajax({
url:"jiazai.php",
data:{page:page,name:name},
type:"POST",
dataType:"TEXT",
success:function(data){
varstr="";
varhang=data.split("|");
for(vari=0;i"+lie[0]+""+lie[1]+""+lie[2]+"";
}
$("#tb").html(str);
}
});
}

jiazai.php页面的代码如下：
StrQuery($sql,1);
zys.php代码如下：
StrQuery($sql);
echoceil($zts/20);
这样分页和查询功能就可以完全实现了
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持毛票票！

返回顶部
3162201930
czq8825@qq.com

ajax实现分页和分页查询

热门推荐

随机推荐