[Wacow] 以 Ajax 呈現換頁

suzy — Thu, 16 Apr 2009 06:22:57 +0000

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

過程&原理講解：

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

原本樣板中加入分頁樣板

加入一個新的變數之後

然後在pagination樣板中加入

<% if $ajax %>


<% /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換頁效果

哇寶部落格 » wacow

[Wacow] 以 Ajax 呈現換頁