ajax无刷新分页 源码,Ajax实现无刷新分页实例代码

这篇文章主要介绍了Ajax实现无刷新分页实例代码,非常不错，具有参考借鉴价值，对ajax感兴趣的朋友可以参考下Ajax实现无刷新分页实例代码这文章

实现Ajax分页：

如果可以的话加上查询条件

找一张表做分页

分页不使用page类

页面不用刷新

Ajax加载数据

Document

.dangqian{ background-color:#69F}

代号

名称

父级代号

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 +="

"+data[k].AreaCode+""+data[k].AreaName+""+data[k].ParentAreaCode+"";//要显示的内容，代号、名称父级代号

}

$("#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 += "总共："+maxys+"页 ";

str += "上一页";

for(var i=page-2;i

{

if(i>=minys && i<=maxys)

{

if(i==page)

{

str += ""+i+" ";

}

else

{

str += ""+i+" ";

}

}

}

str += "下一页";

$("#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();

})

}

上面是这页面：test.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:

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实现无刷新分页实例代码，希望对大家有所帮助！！

相关推荐：

jQuery.Ajax()的data参数类型实例详解

怎样用jquery的ajax异步提交表单数据

ajax来自动补全表单字段示例