例1
核心代碼如下
| 代碼如下 |
複製代碼 |
$.ajax({
url: url,
dataType: 'json',
data: data,
success: callback
}); |
可以參考jquery官網的PAI http://api.jquery.com/jQuery.getJSON/
| 代碼如下 |
複製代碼 |
function changePagination(pageId,liId){
$(".flash").show();
$(".flash").fadeIn(400).html('Loading <img src="image/ajax-loading.gif" />');
var dataString = 'pageId='+ pageId;
$.ajax({
type: "POST",
url: "pageData.php",
data: dataString,
cache: false,
success: function(result){
$(".flash").hide();
$(".link a").css('background-color','#fff') ;
$("#"+liId+" a").css('background-color','#99A607') ;
$("#pageData").html(result);
}
});
} |
PHP_ajax_jquery分頁源碼下載:http://file.111cn.net/upload/2013/10/super_paging.rar
例2
我沒有用架構的分頁
上網找了修改了個PHP_ajax_jquery分頁，用load方法
| 代碼如下 |
複製代碼 |
function showLoader(){
$('.search-background').fadeIn(200);
}
function hideLoader(){
$('.search-background').fadeOut(200);
};
$("#paging_button li").click(function(){
showLoader();
$("#paging_button li").css({'background-color' : ''});
$(this).css({'background-color' : '#006699'});
$("#content").load("data.php?page=" + this.id, hideLoader);
return false;
});
$("#1").css({'background-color' : '#006699'});
showLoader();
$("#content").load("data.php?page=1", hideLoader); }); |
P_a_JQUery分頁打包:http://file.111cn.net/upload/2013/10/p_aj_Pagination.rar
例3
或者使用jqurey分頁外掛程式
只需要定義一個class，然後修改下參數
| 代碼如下 |
複製代碼 |
$("ul.paging").quickPager();
$("ul.paging2").quickPager({pagerLocation:"both"});
(function($) {
$.fn.quickPager = function(options) {
var defaults = {
pageSize: 2,
currentPage: 1,
holder: null,
pagerLocation: "after"
};
var options = $.extend(defaults, options);
return this.each(function() {
var selector = $(this);
var pageCounter = 1;
selector.wrap("<div class='simplePagerContainer'></div>");
selector.children().each(function(i){
if(i < pageCounter*options.pageSize && i >= (pageCounter-1)*options.pageSize) {
$(this).addClass("simplePagerPage"+pageCounter);
}
else {
$(this).addClass("simplePagerPage"+(pageCounter+1));
pageCounter ++;
} }); |
本執行個體源碼下載：http://file.111cn.net/upload/2013/10/simplepager-master.rar
