[Wacow] 以 Ajax 呈現換頁

分類: 技術分享 作者: suzy

16 4 月 2009

其實這篇是 Abu 的心得, 與阿丹一起討論+講解後, Suzy 代為發表

過程&原理講解:

  1. 透過設置ajax變數,讓載入分頁樣板時,可以自由切換是否使用ajax換頁
  2. 分頁樣板中,判斷是否有ajax參數,決定是否載入相關javascript
  3. 主要控制分頁效果的pagination.js中,透過擷取分頁的路徑,
    再使用jQuery的load方法,將整個頁面載回,然後將主樣板預設的div置換

原本樣板中加入分頁樣板

<wa:content name="common/pagination" />

加入一個新的變數之後

<wa:content name="common/pagination" ajax="true" />

然後在pagination樣板中加入

<% if $ajax %>
<wa:js src="/lib/jquery/latest.js" />
<wa:js src="/js/common/pagination.js" />
<% /if %>

pagination.js 內容

var ajaxPage = function(){

var url = $(this).attr('href') + '/format/html';

$("#content").load(url);

return false;

}

$(function(){

$('a.page1').live('click',ajaxPage);

})

這樣一來是否使用ajax分頁就很方便了,在樣板中只要設定ajax="true"即可啟用ajax換頁效果

我要留言

關於這裡

這個部落格分享了哇寶在電子商務領域的技術及資訊,希望能讓更多人一起為台灣的網路產業加油。