PHP+JQuery+Ajax實現(xiàn)分頁方法詳解
本文實例講述了PHP+JQuery+Ajax實現(xiàn)分頁的方法。分享給大家供大家參考,具體如下:
為了鍛煉下jQuery,決定自己動手寫寫分頁
最終的效果如圖:
點擊某個字母后,下方顯示以該字母為首字母的所有詞語;
分頁顯示,每頁顯示15個詞語,每組頁碼有20個,1-20/20-40~~~
首先是在PHP文件中的分頁P(yáng)ager的相關(guān)代碼
public function searchWordsByInitial() //從AJAX發(fā)出的URL中獲得參數(shù):用戶點擊的字母和點擊的頁碼 $initial = htmlentities($_POST['initial'], ENT_QUOTES,"UTF-8"); $page = htmlentities($_POST['page'], ENT_QUOTES,"UTF-8"); $words = $this->_createWordObj(); $i=0;//用于顯示序號從1開始 $perPageNum=12;//每一頁顯示的條數(shù)為12條 $currentPageFirst=($page-1)*$perPageNum+1; $currentPageLast=$page*$perPageNum; //獲取總記錄數(shù) $sumNum=0; foreach ( $words[$initial] as $key=> $word ){ $sumNum++; } //獲取總頁數(shù) $pageNums=0; if( $sumNum ){ if( $sumNum < $perPageNum ){ $pageNums = 1; } //如果總數(shù)據(jù)量小于$PageSize,那么只有一頁 if( $sumNum%$perPageNum ){ //取總數(shù)據(jù)量除以每頁數(shù)的余數(shù) $pageNums = (int)($sumNum/$perPageNum) + 1; //如果有余數(shù),則頁數(shù)等于總數(shù)據(jù)量除以每頁數(shù)的結(jié)果取整再加一 }else{ $pageNums = $sumNum/$perPageNum; //如果沒有余數(shù),則頁數(shù)等于總數(shù)據(jù)量除以每頁數(shù)的結(jié)果 } } else{ $pageNums = 0; } //Pager顯示 echo $this->init_searchWordsByInitial_Pager($sumNum,$pageNums,$page); $tab_str.="<table ……………………這里是頁面的具體內(nèi)容………………" return $tab_str; }
public function init_searchWordsByInitial_Pager($sumNum,$pageNums,$page) { //根據(jù)用戶點擊的頁碼,獲得當(dāng)前頁碼組的首頁碼,如用戶點擊的38,那么這一組是21-40,首頁碼是21 $current_first_page=floor(($page-1)/20)*20+1; $tab_str="<div id='searchWordsByInitial_Pager' class='pagination pagination-centered'><ul>"; for($k=0;$k<=19;$k++) { $j=$k+$current_first_page; $tab_str.="<button class='not_more_btn'>".$j."</button>"; } $tab_str.="</ul> 一共<span id='sumNums'>".$sumNum."</span>個詞語,<span id='pageNums'>".$pageNums."</span>頁</div>"; return $tab_str; }
init.js 相關(guān)的JQuery代碼,響應(yīng)用戶的動作
//初始化分頁 Pager var pageNums;//總頁數(shù) var sumNums;//總記錄數(shù) function init_searchWordsByInitial_Pager(){ pageNums=$("#pageNums").html();//JS從頁面HTML獲取 sumNums=$("#sumNums").html(); if(pageNums==1)//如果只有一頁,則隱藏Pager { $("#searchWordsByInitial_Pager").html("</br>"); } //讓頁碼的默認(rèn)值為1,默認(rèn)顯示的是第一頁; if(page_initial==undefined){ page_initial=1;} //當(dāng)頁面過多時,我們一組只顯示20個頁碼,后面綴一個NEXT按鈕,點擊后可以顯示后面20個頁碼;同樣,LAST按鈕可以顯示前面20個按鈕 $("#searchWordsByInitial_Pager ul button:eq(19)").after("<button id='more_forward' class='more'>Next</button>"); $("#searchWordsByInitial_Pager ul button:eq(0)").before("<button id='more_backword' class='more'>Last</button>"); //如果最后一組少于21頁,那么就隱藏最后一個頁碼后面的,包括NEXT按鈕【pageNums<21】 //如果用戶點擊的page是最后20個page,那么也要隱藏最后一個頁碼后面的,包括NEXT按鈕【offset<20】 //(由于點擊page會觸發(fā)本初始化函數(shù)/其實可以將初始化函數(shù)的調(diào)用僅僅綁定到單擊字母事件即可,不必跟Ajax動作綁在一起) var offset; offset=(Math.ceil(pageNums/20)*20)-parseInt(page_initial); if(pageNums<21||offset<20) { $("#searchWordsByInitial_Pager ul button").slice((pageNums%20)+1).hide(); } //如果正好是20頁,根據(jù)上一段代碼,offset=19<20,會把整個Pager隱藏;需要再把它顯示出來 if(search_pageNums==20) { $("#searchWords_Pager ul button.not_more_btn").show(); } //如果當(dāng)前組的第一個page是1,那么隱藏LAST按鈕;否則顯示LAST按鈕,允許用戶點擊翻到上一組 if($("#searchWordsByInitial_Pager ul button.not_more_btn").eq(0).html()==1) { $("#searchWordsByInitial_Pager ul button:eq(0)").hide(); } else { $("#searchWordsByInitial_Pager ul button:eq(0)").show(); } } //單擊NEXT按鈕 $("#more_forward").live("click",function(event){ //只要有往后翻頁,就會有 Last 按鈕 $("#searchWordsByInitial_Pager ul button:eq(0)").show(); //讓每一個page都自加20,如1-20變?yōu)?1-40 for(i=0;i<20;i++){ $("#searchWordsByInitial_Pager ul button.not_more_btn").eq(i).html(parseInt($("#searchWordsByInitial_Pager ul button.not_more_btn").eq(i).html())+20); //隱藏最后一個頁碼后面的按鈕 if($("#searchWordsByInitial_Pager ul button.not_more_btn").eq(i).html()==pageNums) { $("#searchWordsByInitial_Pager ul button").slice(i+2).hide(); } } }) //單擊LAST按鈕 $("#more_backword").live("click",function(event){ //首先要讓20個按鈕都顯示出來 $("#searchWordsByInitial_Pager ul button").show(); for(i=0;i<20;i++){ $("#searchWordsByInitial_Pager ul button.not_more_btn").eq(i).html(parseInt($("#searchWordsByInitial_Pager ul button.not_more_btn").eq(i).html())-20); } //判斷是否要隱藏Last按鈕 if($("#searchWordsByInitial_Pager ul button.not_more_btn").eq(0).html()==1) { $("#searchWordsByInitial_Pager ul button:eq(0)").hide(); } else { $("#searchWordsByInitial_Pager ul button:eq(0)").show(); } }) //獲取用戶點擊的字母 $(".initial-button-list button").live("click", function(event){ //清除所有字母A-Z按鈕的active class,并且設(shè)置點擊的字母按鈕為 active;這里不要使用 .attr 和 .removeAttr; $(".initial-button-list button").removeClass("active"); $(this).addClass("active"); //獲取當(dāng)前點擊的字母和頁碼 initial_value = $(this).html(); page_initial=1; //將要傳送的參數(shù)拼串 &action=list_by_initial&initial=O&page_initial=3 btnData = "&action=list_by_initial"+ "&initial="+initial_value+"&page="+page_initial; $.ajax({ type: "POST", url: processFile, data: btnData, success: function(data) { $("#word_table_by_initials").show(); $("#word_table_by_initials").html(""); $("#word_table_by_initials").html(data); init_searchWordsByInitial_Pager(); }, error: function(msg) { alert(msg); } }); }); //獲取用戶點擊的頁碼(除去點擊 more 按鈕) $("#searchWordsByInitial_Pager button.not_more_btn").live("click", function(event){ //清除所有頁碼的active class,并且設(shè)置點擊的頁碼為 active;這里不要使用 .attr 和 .removeAttr; $("#searchWordsByInitial_Pager button").removeClass("active"); $(this).addClass("active"); //獲取當(dāng)前點擊的頁碼 page_initial=$(this).html(); //將要傳送的參數(shù)拼串 &action=list_by_initial&initial=O&page_initial=3 btnData = "&action=list_by_initial"+ "&initial="+initial_value+"&page="+page_initial; $.ajax({ type: "POST", url: processFile, data: btnData, success: function(data) { $("#word_list_by_initials").hide(); $("#word_table_by_initials").html(""); $("#word_table_by_initials").html(data); init_searchWordsByInitial_Pager(); }, error: function(msg) { alert(msg); } }); }); });
一些注意事項:
1 $("div button.not_more_bt")中,前兩個選擇器之間是有空格 的,后兩個沒有;因為最后一個是 類選擇器,要直接跟在button后面
2 .html() .val() .text() 的區(qū)別
3 :eq(index),:lt(index);gt(index) 中的 index 是從0開始,而且不能為變量,必須為 數(shù)字
如果需要讓用到動態(tài)的 index,可以用
.eq(i)
4 var a=20;
var b=10;
var c;
c=a+b;
結(jié)果不是 30!是2020!
正確的寫法是 c=parseInt(a)+_parseInt(b);
減法沒事,但是最好也要轉(zhuǎn)化一下
PHP 的 函數(shù)是 intval();
5 寫代碼之前,一定要規(guī)劃好最優(yōu)的方案,否則重頭來就更費(fèi)事了
6 JS代碼和HTML加載的邏輯順序
更多關(guān)于PHP相關(guān)內(nèi)容感興趣的讀者可查看本站專題:《PHP+ajax技巧與應(yīng)用小結(jié)》、《PHP運(yùn)算與運(yùn)算符用法總結(jié)》、《PHP網(wǎng)絡(luò)編程技巧總結(jié)》、《PHP基本語法入門教程》、《php操作office文檔技巧總結(jié)(包括word,excel,access,ppt)》、《php日期與時間用法總結(jié)》、《php面向?qū)ο蟪绦蛟O(shè)計入門教程》、《php字符串(string)用法總結(jié)》、《php+mysql數(shù)據(jù)庫操作入門教程》及《php常見數(shù)據(jù)庫操作技巧匯總》
希望本文所述對大家PHP程序設(shè)計有所幫助。
相關(guān)文章
PHP has encountered a Stack overflow問題解決方法
這篇文章主要介紹了PHP has encountered a Stack overflow問題解決方法,需要的朋友可以參考下2014-11-11php自動識別文字編碼并轉(zhuǎn)換為目標(biāo)編碼的方法
這篇文章主要介紹了php自動識別文字編碼并轉(zhuǎn)換為目標(biāo)編碼的方法,涉及php針對當(dāng)前編碼的判斷與對應(yīng)的編碼轉(zhuǎn)換實現(xiàn)技巧,需要的朋友可以參考下2015-08-08PHP命名空間namespace定義及導(dǎo)入use用法詳解
這篇文章主要介紹了PHP命名空間namespace定義及導(dǎo)入use用法,結(jié)合實例形式詳細(xì)分析了php中命名空間namespace的功能、定義及導(dǎo)入use相關(guān)使用方法與操作技巧,需要的朋友可以參考下2018-03-03php 靜態(tài)頁面中顯示動態(tài)內(nèi)容
靜態(tài)頁面中顯示動態(tài)內(nèi)容,一些網(wǎng)站的qq在線狀態(tài),還有購物車用的是這個方法2009-08-08