phpjqueryajax分页

‘壹’ 谁给我讲下ajax+php无刷新分页原理

ajax 是一个js脚本。或者用jquery里面的ajax
如果你要验证用户名。你可以在你的input 属性里面加上 onchange=“调用函数”
调用函数就是ajax的代码。
ajax是这样完成工作的，
首先发送请求到你指定的页面比如abc.php（附带你设置的post或者get），
abc.php响应成功后，执行它里面的代码去处理你传递过来的参数。如果存在这个用户。然后返回一个值或者函数 如果不存在也会返回一个值或者函数，你要自己去设置。
然后ajax把这个返回的值或者函数进行处理，比如显示它，或者调用函数禁用提交按钮。

‘贰’ jquery ajax异步分页是什么意思

普通的分页都是通过程序输出一段链接地址，如

<ahref="news.php?page=1">1</a>
<ahref="news.php?page=2">2</a>
<ahref="news.php?page=3">3</a>

这样 当你点击1，2，3链接页码的时候，会跳转到不同的数据页面，会有个跳转的过程

而ajax分页就是类似这样

<aonclick="jump(1)"href="javascript:void(0)">1</a>

functionjump(id){
$.post('news.php',{"id":id},function(data){
//这里处理服务器返回的分页列表内容
},'json');
}

过程就是用ajax向服务器请求资源，把资源再通过js改变到当前页面。好处就是，无刷新，页面不会跳转，整个网页资源不用重新加载，用户体验较好。

‘叁’ jquery ajax分页插件 怎么写

包括常用的加载失败重试，参数可配置是否能手动输入页码，设置按钮数目，可以调用多个page等等，调用代码很简便

<scripttype="text/javascript">
varkpage;

$(function(){
tocount();
});

functiontocount(){
//初始化
$.ajax({url:"/Service/DBCount",type:"post",success:function(e){
kpage=$("#divPage").page({dataCount:e,pageChange:topage});
}
});
}

functiontopage(i,s){
//数据查询
$("#divInfo").html("加载中...");
$.ajax({url:"/Service/List",type:"post",data:{PageSize:s,PageIndex:i},success:function(r){
$("#tList").html(r);
$("#divInfo").html("");
},error:function(){
$("#divInfo").html("加载失败...<ahref='javascript:reload();'>重试</href>");
}
});
}

functionreload(){
kpage.reload();
}

</script>

具体jquery.kun_page.js：

/*

---------------------------------
参数config:

dataCount:数据总数

pageSize:页数据条数

maxButton:页码按钮数目

showCustom:是否能手动输入页码

pageChange:页变更事件
参数：(i,s,c)
i:pageIndex,当前页
s:pageSize,页数据条数
c:pageCount,总页数

*/

(function($){

$.fn.page=function(config){

if(this.length!=1){
throw"k_page:如有多个page请调用多次!";
}


vardefaults={dataCount:1,pageSize:10,maxButton:6,showCustom:true,pageChange:null}
config=$.extend(defaults,config);

if(config.maxButton<=1)config.maxButton=2;
if(config.pageSize<1)config.pageSize=1;
//按钮数目需偶数
if(config.maxButton%2!=0)
config.maxButton++;

varpageIndex=1,pageCount,move_kf;

//初始化页数
functioninitcount(){
pageCount=config.dataCount%config.pageSize==0?config.dataCount/config.pageSize:parseInt(config.dataCount/config.pageSize)+1;
}
initcount();

varprev="<divclass="k_p_prev">上一页</div>",next="<divclass="k_p_next">下一页</div>",pbody=$(""),pcustom=$("<spanclass="k_custom">到第页</span><divclass="k_btn">确定</div>"),cl="<divclass="k_cl"></div>",pipt=$("<inputclass="k_ipt"type="text">");
this.empty().addClass("kun_page").append(prev);
pipt.keypress(function(e){
if(e.which==13){
topage("确定");
returnfalse;
}
}).appendTo(pcustom.children());

if(config.pageChange){
this.unbind("click").bind("click",function(e){
var_t=$(e.target);
if(_t[0].tagName=="DIV"&&_t[0].className!="kun_page"){
topage(_t.text());
}
});
}

//跳转页码
functiontopage(text){

switch(text){
case"上一页":
if(pageIndex-1<1){
return;
}
pageIndex--;
move_kf="sc_r";
break;
case"下一页":
if(pageIndex+1>pageCount){
return;
}
pageIndex++;
move_kf="sc_l";
break;
case"确定":

if(!/^d+$/.test(pipt.val())){
pipt.val("");
return;
}
text=parseInt(pipt.val());
if(text<1||text>pageCount){
pipt.val("");
return;
}

default:
var_pindex=parseInt(text);
if(pageIndex==_pindex)
return;
move_kf=pageIndex<_pindex?"sc_l":"sc_r";
pageIndex=_pindex;
break;
}

gopageChange();
}

//页变更事件
functiongopageChange(){
if(config.pageChange){
if(config.dataCount!=0){
config.pageChange(pageIndex,config.pageSize,pageCount);
endloading();
}
}
}

//异步加载结束
functionendloading(){
initpage();

}

//添加页码
functioninitpage(){
pbody.empty();
var_t_maxb=config.maxButton/2;
//前后页码集合
var_t_listp=[],_t_listn=[];
var_min=0,_max=pageCount;

for(vari=1;i<=_t_maxb;i++){
var_t_prev=pageIndex-i,_t_next=pageIndex+i;
//当前页码之前的页
if(_t_prev>0){
_t_listp.push("<divclass="k_p_page">"+_t_prev+"</div>");
if(i==_t_maxb)_min=_t_prev;
}
//当前页码之后的页
if(_t_next<=pageCount){
_t_listn.push("<divclass="k_p_page">"+_t_next+"</div>");
if(i==_t_maxb)_max=_t_next;
}
}
//显示第一页
if(_min>1)pbody.append("<divclass="k_p_page">1</div>");
//显示前……
if(_min-1>1)pbody.append("<em>...</em>");

for(vari=_t_listp.length;i>=0;i--){
pbody.append(_t_listp[i]);
}

pbody.append("<divclass="k_p_pagek_p_current">"+pageIndex+"</div>");

for(vari=0;i<_t_listn.length;i++){
pbody.append(_t_listn[i]);
}

//显示后……
if(pageCount-_max>1)pbody.append("<em>...</em>");

//显示最后一页
if(_max<pageCount)pbody.append("<divclass="k_p_page">"+pageCount+"</div>");

}

initpage();
gopageChange();

this.append(pbody).append(next);
if(config.showCustom)
this.append(pcustom);
this.append(cl);

return{reload:gopageChange,pageCount:pageCount,recount:function(e){
//重新计算页数
config.dataCount=e;
pageIndex=1;
initcount();
initpage();
gopageChange();
}
};

//console.log(_min+"*"+_max+"*"+pageCount);
}


})(jQuery)

样式kun_page.css：

.kun_page{font-size:12px;line-height:23px;font-family:"MicrosoftYaHei";}
.kun_page.k_p_page{position:relative;}
.kun_pagediv{float:left;margin:3px;border:solid1px#ccc;cursor:pointer;color:#333;min-width:12px;text-align:center;padding:0px5px;}
.kun_pageem{display:block;float:left;margin:2px;}
.kun_page.k_p_current{background:#ccc;color:#fff;-webkit-animation:scroll_b300ms;animation:scroll_b300ms;}
.kun_page.k_cl{clear:both;float:none;border:none;margin:0px;padding:0px;width:0px;height:0px;}
.kun_page.k_custom{display:block;float:left;margin:3px3px3px20px;}
.kun_page.k_ipt{width:30px;height:21px;border:solid1px#ccc;text-align:center;vertical-align:middle;}
.kun_page.k_m{opacity:0;width:1%;height:1%;top:0px;left:0px;display:block;position:absolute;}
.kun_page.sc_l{background:-webkit-gradient(linear,0100%,100%100%,from(#CCCCCC),to(#645F5F));
-webkit-transform:translate(-50px);-webkit-animation:scroll_k_l300mslinear;
background:-moz-linear-gradient(left,#CCCCCC0%,#645F5F100%);
background:-ms-linear-gradient(left,#CCCCCC0%,#645F5F100%);
transform:translate(-50px);animation:scroll_k_l300mslinear;

}
.kun_page.sc_r{background:-webkit-gradient(linear,0100%,100%100%,from(#645F5F),to(#CCCCCC));
-webkit-transform:translate(50px);-webkit-animation:scroll_k_r300mslinear;
background:-moz-linear-gradient(left,#645F5F0%,#CCCCCC100%);
background:-ms-linear-gradient(left,#CCCCCC0%,#645F5F100%);
transform:translate(50px);animation:scroll_k_r300mslinear;
}

/*
animation
*/

@-webkit-keyframesscroll_k_l{
0%{-webkit-transform:translate(-100px);opacity:0.2;width:200%;height:100%;}
99%{-webkit-transform:translate(-20px);opacity:0;width:200%;height:100%;}
100%{-webkit-transform:translate(-20px);opacity:0;width:1%;height:1%;}
}

@-webkit-keyframesscroll_k_r{
0%{-webkit-transform:translate(100px);opacity:0.2;width:200%;height:100%;}
99%{-webkit-transform:translate(20px);opacity:0;width:200%;height:100%;}
100%{-webkit-transform:translate(20px);opacity:0;width:1%;height:1%;}
}

@keyframesscroll_k_l{
0%{transform:translate(-100px);opacity:0.2;width:200%;height:100%;}
99%{transform:translate(-20px);opacity:0;width:200%;height:100%;}
100%{transform:translate(-20px);opacity:0;width:1%;height:1%;}
}

@keyframesscroll_k_r{
0%{transform:translate(100px);opacity:0.2;width:200%;height:100%;}
99%{transform:translate(20px);opacity:0;width:200%;height:100%;}
100%{transform:translate(20px);opacity:0;width:1%;height:1%;}
}


@-webkit-keyframesscroll_b{
0%,99%{background:#fff;color:#000;}

100%{background:#ccc;color:#fff;}
}
@keyframesscroll_b{
0%,99%{background:#fff;color:#000;}
100%{background:#ccc;color:#fff;}
}

样式和动画都可以自己修改(好吧，动画效果很朴素，闹哪样，明明想了很久好吗)

pageChange事件里面也没有过多的其他处理，比如我们公司前后台处理json就有一套方案，ajax提交的参数也有处理

所以若有需求，完全可以在我的代码上再封装一层

‘肆’ PHP分页问题

if (isset($_GET['page'])) {
$page = $_GET['page'];
} else {
$page = 1;
}

$limit = 10;

$sql="select id from message order by id";
$query=mysql_query($sql);
$total = mysql_num_rows($query);

$num_pages = ceil($total / $limit);

$page_number = '';
for($i=1;$i<=$num_pages){
$page_number .= '<a href="./index.php?page='.$i.'">'.$i.'</a>';
}
echo $page_number;

$start = ($page - 1) * $limit;

$sql="select * from message order by id limit ".$start.','.$limit;
$query=mysql_query($sql);
?>

<table width=500 border="0" align="center" cellpadding="5" cellspacing="1" bgcolor="#add3ef">
<?php

while ($row=mysql_fetch_array($query)){
?>

<tr bgcolor="#eff3ff">
<td>标题：<font color="red"><?=$row[title]?></font> 用户：<font color="red"><?=$row[user] ?></font></td>
</tr>
<tr bgColor="#ffffff">
<td>内容：<?=$row[content]?></td>
</tr>
<tr bgColor="#ffffff">
<td><div align="right">发表日期：<?=$row[lastdate]?></div></td>
</tr>
<?php }?>
</table>

‘伍’ 如何通过ajax，html和php实现分页功能呢

写法有很多种，比如：
html页面中：
<div id="shi"></div>
js:
$.get("1.php",{参数},function(data)
{
$("#shi").html(data);
});

即当点击上一页或下一页时触发一个函数，执行上面的代码，把返回的内容放在<div id="shi">这里</div>

data就是php 文件返回的内容；那个sql语句应该是这样写的吧：
select * from table order by id desc limit ($page-1)*每页个数,($page)*每页个数

这里用到了jquery.
其它还有一种思路，就是当第一次加载时，把所有的内容都从数据库里读出来了，然后在浏览器用js处理分页，在php发送数据时最好用json格式，这样更好处理