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格式，這樣更好處理