jQuery Ajax PHP實現非同步分頁資料顯示

2021-09-22 21:08:33 字數 1859 閱讀 5457

jquery+ajax+php實現非同步分頁資料顯示 - 程式設計人,在天涯 -

這幾天做畢業設計的時候需要使用到乙個非同步分頁的功能,即翻頁的時候只是重新整理分頁的資料而不是重新整理整個頁面。因為之前做專案的時候沒有做過這方面的功能,所以還是糾結了挺長時間的,在網上也找了很多資料,結合自己的理解,做了乙個比較簡單的非同步分頁資料顯示功能,這裡使用的是jquery+ajax+php。

先說說基本原理吧,其實就是翻頁時使用ajax向後台傳遞頁面引數請求某個分頁的資料,後台接收到引數之後就在資料庫中查詢相應的記錄,然後以json的格式傳輸給ajax,ajax接收到資料後,使用jquery在html頁面上移除原來舊的分頁資料,新增上新的分頁資料,同時根據分頁情況新增分頁按鈕欄。

下面看看簡單的**實現:

1. html頁面:

2. js**:

var curpage;        //當前頁數

var totalitem; //總記錄數

var pagesize; //每一頁記錄數

var totalpage; //總頁數

},

complete: function() ,

error: function()

});}//獲取分頁條(分頁按鈕欄的規則和樣式根據自己的需要來設定)

function getpagebar()

if(curpage < 1)

pagebar = 「」;

//如果不是第一頁

if(curpage != 1)

//顯示的頁碼按鈕(5個)

var start,end;

if(totalpage <= 5) else else else }}

for(var i=start;i<=end;i++) else

}//如果不是最後頁

if(curpage != totalpage)

$("#pagebar").html(pagebar);

}//頁面載入時初始化分頁

$(function() );

3. php**:

//我專案中使用的是thinkphp框架,ajax的請求位址是乙個方法

public function getlabeldata()

echo json_encode($arr);

}4. 分頁按鈕欄樣式css:

#pagebar 

.pagebtn a

.pagebtn-selected a

.pagebtn a:hover

5. 實現效果:

(總是顯示五個數字頁面按鈕,數字跟著當前所在頁面變化)

其實,非同步分頁的應用還是挺廣泛的,有些應用並不是很明顯地看上去就是資料分頁,但本質上還是非同步分頁,例如:一些**上的「換一批」功能,其實就是非同步分頁的變形,我們只要把分頁按鈕欄的規則和顯示效果修改一下就可以輕鬆實現了!!!

posted @ 2015-11-29 17:02

收藏

jquery ajax php實現檔案上傳

檔案上傳最方便的方式是form方式提交,但它在有些場景並不適合,需要使用ajax方式來實現上傳檔案,ajax直接呼叫後台是無法將file傳送給後台,這時就需要引入formdata,然後設定相關闡述,下面將詳細闡述 2.post中processdata引數預設的值為true,會轉資料格式,上傳不需要轉...

使用jquery ajax php實現搜尋框的功能

我們每天瀏覽網頁都能見到搜尋框 搜尋框的原理 客戶端 輸入要搜尋的關鍵字於文字框,然後文字框將關鍵字獲取,使用ajax傳送請求到服務端,然後根據服務端返回來的資訊顯示到乙個div中 服務端 接收傳過來的資料,然後在資料庫中搜尋,再返回資料給客戶端 首先是客戶端 新建乙個輸入框 在輸入框的下面建立乙個...

使用jquery ajax php實現搜尋框的功能

首先是客戶端 新建乙個輸入框 input type text id keyword name keyword 在輸入框的下面建立乙個div,先讓他隱藏起來 div id searchbox display none div 注 搜尋框的定位可以使用絕對定位,定在輸入框的下面,搜尋按鈕可以加在輸入框的...