摘要:[JavaScript]jQuery AJAX分頁(修改為jQuery 1.11.1可用)
這幾天突然有需求要用到分頁的功能,突然想到jQuery好像有AJAX分頁
在好奇之下,去Google大神找尋了資料,找到以下神人分享的資訊
(Pagination with Jquery PHP Ajax and MySql:http://onlinewebapplication.com/pagination-jquery-php-ajax-mysql/#comment-52499)
(Pagination with Jquery PHP Ajax and MySql:http://onlinewebapplication.com/pagination-jquery-php-ajax-mysql/#comment-52499)
結果發現,這篇是在jQuery1.4.2時期製作出來的,要引用套用jQuery1.11.1會使腳本失效(因為在之後的版本有做許多更動)
jQuery 1.11.1:<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
jQuery 1.11.1:<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
觀察了一下,做了點小修正
把pagination.php檔內的Javascript部分,修改成以下語法即可驅使動作
$(document).ready(function(){
function loadData(page){
//loading_show();
$.ajax
({
type: "POST",
url: "./ajax/ajax_page/load_data.php",
data: "page="+page,
success: function(msg)
{
//loading_hide();
$("#container").html(msg);
}
});
}
loadData(1); // For first time page load default results
$('#container').on('click','.active',function(){
var page = $(this).attr('p');
loadData(page);
});
$('#container').on('click','#go_btn',function(){
var page = parseInt($('.goto').val());
var no_of_pages = parseInt($('.total').attr('a'));
if(page != 0 && page <= no_of_pages){
loadData(page);
}else{
alert('Enter a PAGE between 1 and '+no_of_pages);
$('.goto').val("").focus();
return false;
}
});
});