jquery 的ajax分頁，修改外掛程式（因為外掛程式的放到ie會出錯）

js代碼

(function($) {
    $.fn.extend({ ajaxPager: function(options) {
        var defaults = { startPage: 1, PagesCount: 10, ChangeSiteEvent: null, ShowFirstLast: false, ShowGoBack: true }; var options = $.extend(defaults, options); return this.each(function() {
            var obj = $(this); if (options.PagesCount > 1) {
                obj.empty().append(CalculatePages(parseInt(options.startPage), parseInt(options.PagesCount), options.ShowGoBack, options.ShowFirstLast));
                if ($.isFunction(options.ChangeSiteEvent)) {
                    options.ChangeSiteEvent(options.startPage);
                }

 

                var eventHandler = function() {
                    $(".pageButton").click(function(event) {
                        event.preventDefault();
                        var activePage = $(this).find("a").attr("page");
                        if ($.isFunction(options.ChangeSiteEvent)) {
                            obj.empty().append(CalculatePages(parseInt(activePage), parseInt(options.PagesCount), options.ShowGoBack, options.ShowFirstLast));
                            eventHandler();
                            options.ChangeSiteEvent(activePage);
                        }
                    });
                };

                eventHandler();
            }
            else {
                if ($.isFunction(options.ChangeSiteEvent)) {
                    options.ChangeSiteEvent(options.startPage);
                }
            }

        });
    }
    });

    function CalculatePages(pageIndex, pageCount, ShowGoBack, ShowFirstLast) {
        var startPoint = pageIndex - 2;
        var endPoint = pageIndex + 2;

        if (pageIndex < 5) {
            startPoint = 1;
            if (pageCount > 5) {
                endPoint = 5;
            }
            else {
                endPoint = pageCount;
            }
        }

        if (endPoint > pageCount) {
            var minus = endPoint - pageCount;
            startPoint = startPoint - minus;
            endPoint = endPoint - minus;
        }

        var $pager = $('<ul class="pages"></ul>');

        if (pageIndex > 1) {
            if (ShowFirstLast) {
                $('<li class="pageButton firstButton"><a page="1"><<</a></li>').appendTo($pager);
            }
            if (ShowGoBack) {
                var backButton = $('<li class="pageButton backButton"><a page="' + (pageIndex - 1) + '"><</a></li>');
                backButton.appendTo($pager);
            }
        }

        for (var page = startPoint; page <= endPoint; page++) {
            if (page != pageIndex) {
                var currentButton = $('<li class="pageButton"><a page="' + page + '">'
                                       + page + '</a></li>');
            }
            else {
                var currentButton = $('<li class="activeButton"><a page="' + page + '">'
                                       + page + '</a></li>');
            }
            currentButton.appendTo($pager);
        }

        if (pageIndex != pageCount) {
            if (ShowGoBack) {
                var goButton = $('<li class="pageButton goButton"><a page="' + (pageIndex + 1) + '">></a></li>');
                goButton.appendTo($pager);
            }
            if (ShowFirstLast) {
                $('<li class="pageButton lastButton"><a page="' + pageCount + '">>></a></li>').appendTo($pager);
            }
        }

        return $pager;
    }
})(jQuery);

2.樣式

<style type="text/css">
.pages{height: 35px;background-color: #fff;padding-top: 10px;}
.pages li{ list-style:none; cursor:pointer; float:left; }
.pageButton a{ text-decoration:none; width: 24px;height: 24px;margin-right: 5px;padding-top: 5px;height: 19px;background-color: #fff;border: solid 1px #DEDFDE;color: #3366CC;text-align: center;float:left;font-weight:bold;}
.activeButton a{width: 24px;height: 24px;margin-right: 5px;padding-top: 5px;height: 19px;background-color: #fff;text-align: center;float:left;font-weight:bold;color: #FF4000;border: none;}
.lastButton  a, .firstButton a{width: 20px;}
.goButton a,.backButton a{width: 20px;}
</style>

3.調用

<h1 id="result"></h1>
    <div id="pager">
    </div>
    </form>

 

    <script type="text/javascript">
        $(document).ready(function() {
            $("#pager").ajaxPager({ startPage: 7, PagesCount: 15, ChangeSiteEvent: PageClick,ShowFirstLast:true });
        });

        PageClick = function(pageindex) {
            //pageindex is the page which was clicked
            //Now you must load the page with ajax
            //Here I didn't do it
            $("#result").html("This is page " + pageindex);
        }
    </script>

4.必須在js之前引進jquery庫，我用的是1.3.2