怎么用PHP+jQuery+Ajax實(shí)現(xiàn)分頁(yè)效果-創(chuàng)新互聯(lián)

本篇內(nèi)容主要講解“怎么用PHP+jQuery+Ajax實(shí)現(xiàn)分頁(yè)效果”，感興趣的朋友不妨來(lái)看看。本文介紹的方法操作簡(jiǎn)單快捷，實(shí)用性強(qiáng)。下面就讓小編來(lái)帶大家學(xué)習(xí)“怎么用PHP+jQuery+Ajax實(shí)現(xiàn)分頁(yè)效果”吧!

創(chuàng)新互聯(lián)建站-專業(yè)網(wǎng)站定制、快速模板網(wǎng)站建設(shè)、高性價(jià)比略陽(yáng)網(wǎng)站開(kāi)發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫(kù),直接使用。一站式略陽(yáng)網(wǎng)站制作公司更省心,省錢,快速模板網(wǎng)站建設(shè)找我們，業(yè)務(wù)覆蓋略陽(yáng)地區(qū)。費(fèi)用合理售后完善，十載實(shí)體公司更值得信賴。

jPaginate是基于jQuery的動(dòng)感滾動(dòng)分頁(yè)插件，它的表現(xiàn)形式是像分頁(yè)的按鈕一樣，非常有意思的是這些按鈕卻可以滾動(dòng)，可以通過(guò)單擊或鼠標(biāo)滑向點(diǎn)兩側(cè)的小箭頭來(lái)控制按鈕的前后滾動(dòng)。

 

調(diào)用jPaginate插件的方法很簡(jiǎn)單：

$(elementID).paginate()

屬性設(shè)置
可喜的是，jPaginate提供了很多屬性配置，您可以輕易的定制想要的分頁(yè)效果。
設(shè)置方法如：

$(elementID).paginate({ 
    count:80, 
    start:1, 
    ... })

count:數(shù)字，總記錄數(shù)。
start:數(shù)字，開(kāi)始顯示的頁(yè)數(shù)，如：3表示從第3頁(yè)開(kāi)始。
display:數(shù)字，分頁(yè)條顯示的頁(yè)數(shù)，如：5表示一次顯示5個(gè)頁(yè)碼數(shù)。
border:是否顯示頁(yè)碼的邊框。(true/false)
border_color:設(shè)置邊框的顏色，如"#d3d3d3"。
text_color:設(shè)置頁(yè)碼的顏色，如"#68ba64"。
background_color:設(shè)置頁(yè)碼的背景色，如"#f7f7f7"。
border_hover_color:設(shè)置鼠標(biāo)滑向頁(yè)碼時(shí)頁(yè)碼邊框的顏色。
text_hover_color:設(shè)置鼠標(biāo)滑向頁(yè)碼時(shí)頁(yè)碼的顏色。
background_hover_color:設(shè)置鼠標(biāo)滑向頁(yè)碼時(shí)頁(yè)碼背景的顏色。
images:是否顯示頁(yè)碼導(dǎo)航箭頭（方向箭頭）(true/false)
mouse:設(shè)置為'press'時(shí)，當(dāng)鼠標(biāo)滑向?qū)Ш郊^時(shí)，頁(yè)碼隨之滾動(dòng)；設(shè)置為'slide'時(shí)，鼠標(biāo)單擊一次導(dǎo)航箭頭頁(yè)碼滾動(dòng)一次。
onChange:當(dāng)單擊頁(yè)碼時(shí)，回調(diào)函數(shù).
實(shí)例應(yīng)用：PHP+jQuery實(shí)現(xiàn)Ajax分頁(yè)效果
首先準(zhǔn)備index.php，該頁(yè)面用來(lái)分頁(yè)展示一個(gè)博客文章列表。
1、引用JS:

注意，關(guān)于插件的屬性設(shè)置，上文已詳細(xì)介紹，屬性count通過(guò)PHP計(jì)算出總頁(yè)數(shù)$page，該參數(shù)由article.php得出。還要說(shuō)明的是屬性onChange：當(dāng)點(diǎn)擊頁(yè)碼時(shí)，調(diào)用函數(shù)，該函數(shù)實(shí)現(xiàn)了異步提交頁(yè)碼參數(shù)給article.php來(lái)處理，article.php通過(guò)讀取數(shù)據(jù)庫(kù)里的表書籍，并把得到的文章列表結(jié)果而返回頁(yè)面，這就是Ajax。當(dāng)然我這里只是做簡(jiǎn)單的演示，如果需要更多異步效果，可以參照jQuery使用文檔。
2、引用CSS:
jPaginate官方提供了導(dǎo)航條樣式，你也可以自己寫個(gè)非?？岬臉邮健?/p>

3、index.php初始頁(yè)面。
必須要顯示一個(gè)初始的文章列表，代碼如下

 
  
Demo 3： Php+jQuery實(shí)現(xiàn)AJAX 分頁(yè)效果