Ajax实现无刷新分页实例代码
更新时间：2017年03月16日 15:44:12 作者：小艾—21克的爱
这篇文章主要介绍了Ajax实现无刷新分页实例代码,非常不错，具有参考借鉴价值，需要的朋友可以参考下
今天我们要用ajax做一个分页：
实现Ajax分页：
如果可以的话加上查询条件
- 找一张表做分页
- 分页不使用page类
- 页面不用刷新
- Ajax加载数据
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<script src="jquery-1.11.2.min.js"></script>
<style type="text/css">
.dangqian{ background-color:#69F}
</style>
</head>
<body>
<div>
<input type="text" id="key" />
<input type="button" value="查询" id="chaxun" />
</div>
<table width="50%" border="1" bordercolordark="0" bordercolorlight="0">
<tr>
<td>代号</td>
<td>名称</td>
<td>父级代号</td>
</tr>
<tbody id="neirong"><!--显示内容-->
</tbody>
</table>
<div id="fenyexinxi">
</div>
</body>
<script type="text/javascript">
var page = 1;//定个变量，当前要显示的页
Load();//加载数据
Loadfenyexinxi();//加载分页信息
//查询
$("#chaxun").click(function(){
page = 1;
Load();//加载数据
Loadfenyexinxi();//加载分页信息
})
function Load()
{
var key = $("#key").val();//查询条件。用户输入的内容
$.ajax({
url:"chuli.php",
data: {
page: page,
key: key
},//传2个参数一当前页2关键字也就是查询条件
type:"POST",
dataType:"JSON",
success: function(data){//匿名函数
var str = "";//这个将来要放表格显示的
for(var k in data)//通过K可以获得每一条数据
{//加载数据完成
str +="<tr><td>"+data[k].AreaCode+"</td><td>"+data[k].AreaName+"</td><td>"+data[k].ParentAreaCode+"</td></tr>";//要显示的内容，代号、名称父级代号
}
$("#neirong").html(str);
}
});
}
function Loadfenyexinxi()//分页信息
{
var str = "";
var minys = 1;//最小页数
var maxys = 1;//最大页数
var key = $("#key").val();//取关键字用于传到zys页面用
$.ajax({
async:false,
type:"POST",
url:"fenye.php",
data:{key:key},
dataType:"TEXT",
success:function(d){
maxys = d;
}
});
str += "<span style='text-decoration:underline; cursor:pointer'>总共："+maxys+"页</span> ";
str += "<span id='prev' style='text-decoration:underline; cursor:pointer'>上一页</span>";
for(var i=page-2;i<page+3;i++)
{
if(i>=minys && i<=maxys)
{
if(i==page)
{
str += "<span style='text-decoration:underline; cursor:pointer' class='dangqian' bs='"+i+"'>"+i+"</span> ";
}
else
{
str += "<span style='text-decoration:underline; cursor:pointer' class='list' bs='"+i+"'>"+i+"</span> ";
}
}
}
str += "<span style='text-decoration:underline; cursor:pointer' id='next'>下一页</span>";
$("#fenyexinxi").html(str);
$("#prev").click(function(){
page = page-1;
if(page<1)
{
page=1;
}
Load();
Loadfenyexinxi();
})
$("#next").click(function(){
page = page+1;
if(page>maxys)
{
page=maxys;
}
Load();
Loadfenyexinxi();
})
$(".list").click(function(){
page = parseInt($(this).attr("bs"));
Load();
Loadfenyexinxi();
})
}
</script>
</html>
上面是这页面：test.php
<?php
include("DBDA.class.php");
$db = new DBDA();
//把上个页面的2个值传过来
$page = $_POST["page"];//当前页
$key = $_POST["key"];//条件，关键字
$num = 20;//定义，一页里多少条数据，
$tiaoshu = ($page-1)*$num;//$tiaoshu跳过多少条($page-1)*$num现在$num是20条
//写$SQL语句
$sql = "select * from chinastates where areaname like '%{$key}%' limit {$tiaoshu},{$num}";//根据关键字查like '%{$tiaojian}%'。
echo $db->JSONQuery($sql);
上面是处理页面：chuli.php:
<?php
include("DBDA.class.php");
$db = new DBDA();
$key = $_POST["key"];
$num = 20;
$sql = "select count(*) from chinastates where areaname like '%{$key}%'";
$zts = $db->StrQuery($sql);
echo ceil($zts/$num);
上面是分页页面：fenye.php
下面就是我们的显示效果：
随着点击下一页，下面会显示5页，并且是当前页左右各两个页面，每页的显示信息条数可以自己调整。
在上方的文本框中输入关键词会显示出相关的信息。这就是我们用ajax做的分页。
以上所述是小编给大家介绍的Ajax实现无刷新分页实例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
相关文章
ajax技术在web应用中使用非常频繁，本文以asp.net MVC为示例，提供一种简单的实现方式。ajax在请求过程中显示进度条，是怎么实现的呢？本文通过代码和文字说明相结合的方式分享给大家。2015-09-09
AJax 学习笔记二(onreadystatechange的作用)
初次接触onreadystatechange这个事件句柄不知道有何用处，看过一篇文章的介绍之后，终有大致所了解。2010-04-04
今天小编就为大家分享一篇Ajax返回的json遍历取值并显示到前台的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-08-08
这篇文章主要为大家详细介绍了原生ajax和iframe框架实现图片文件上传的两种方式，感兴趣的小伙伴们可以参考一下2016-04-04
AJAX 不是新的编程语言，而是一种使用现有标准的新方法。这篇文章主要介绍了Spring MVC+ajax进行信息验证,需要的朋友可以参考下2019-09-09
比getjson好的底层函数优点在于如果网络出问题了,可以通过error方法来告诉用户出错,需要的朋友可以参考下2014-02-02
javascript请求servlet实现ajax示例(分享)
下面小编就为大家带来一篇javascript请求servlet实现ajax示例(分享)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-06-06
这篇文章主要给大家分享了在实战中可能碰到的几种ajax请求方法，文中通过示例代码介绍的非常详细，对大家具有一定的参考价值，需要的朋友们下面来一起看看吧。2017-03-03
这篇文章主要为大家详细介绍了AJAX分页效果的简单实现代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-06-06
这篇文章主要为大家详细介绍了简单实现Ajax无刷新分页效果的代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-05-05
最新评论