[JavaScript]jQuery AJAX分頁(Ajax jQuery Pagination Plugin)(修改為jQuery 1.11.1可用)

摘要:[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)
 
結果發現,這篇是在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>
 
觀察了一下,做了點小修正
把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;
                    }
                });
            });