jquery 的ajax分頁,修改外掛程式(因為外掛程式的放到ie會出錯)

來源:互聯網
上載者:User

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

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.