【原創】分頁進階教程:結合JQUERY做AJAX分頁

來源:互聯網
上載者:User
本文主要結合JQUERY做無重新整理分頁。代碼基本上和前兩篇文章差不多,稍稍有所變動。本文中的翻頁連結用JS編寫。先上代碼:
page4.php

結合jquery做ajax分頁
 
  • -


page5.php

 
 
  • -


回複討論(解決方案)

本文的核心部分就是JS部分的 page_link()函數,當使用者點擊翻頁連結之後,指令碼將對div.recordlist綁定一個load事件,這個主要用來載入下一頁的內容。
看看jquery手冊上對load事件的說明:載入遠程 HTML 檔案代碼並插入至 DOM 中。

如果我們僅僅只這樣:
$(".recordlist").load($(this).attr("href")) 這樣是可以翻頁,但是問題出現了,發現翻頁連結不能發生變化,,,所以需要在回呼函數裡面,重新初始化翻頁連結,因此在回呼函數總加入$(".page").html(pagination(page));這裡初始化翻頁之後,需要對.page A重新綁定click事件,因此在回呼函數裡面加上page_link().

由於是點擊的的對象是.page A,點擊之後,會發生跳轉,因此必須終止跳轉,所以必須加上return false來終止。。。



暫且說這麼多,歡迎拍磚~

你將分頁連結和內容做成一個模板 每次請求的時候把整個模板load這個模板就行

減少一些js操作

學習了…………

幾點意見.
1 pagination 函數用意是拼接輸出字串,建議封裝為模板.
2 此分頁,沒有考慮帶上查詢條件。

page5.php有什麼 用嗎?

好用,非常感謝

  • 聯繫我們

    該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

    如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

    A Free Trial That Lets You Build Big!

    Start building with 50+ products and up to 12 months usage for Elastic Compute Service

    • Sales Support

      1 on 1 presale consultation

    • After-Sales Support

      24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.