shi-meng

插件源代码:

(function ($) {
    $.fn.extend({
        smartpaginator: function (options) {
            var settings = $.extend({
                totalrecords: 0,
                recordsperpage: 0,
                length: 10,
                next: \'下一页\',
                prev: \'上一页\',
                first: \'第一页\',
                last: \'最后一页\',
                go: \'Go\',
                theme: \'green\',
                display: \'double\',
                initval: 1,
                datacontainer: \'\', //data container id
                dataelement: \'\', //children elements to be filtered e.g. tr or div
                onchange: null,
                controlsalways: false
            }, options);

            return this.each(function () {
                var currentPage = 0;
                var startPage = 0;
                var totalpages = parseInt(settings.totalrecords / settings.recordsperpage);
                if (settings.totalrecords % settings.recordsperpage > 0) totalpages++;
                var initialized = false;
                var container = $(this).addClass(\'pager1\').addClass(settings.theme);
                container.find(\'ul\').remove();
                container.find(\'div\').remove();
                container.find(\'span\').remove();
                var dataContainer;
                var dataElements;
                if (settings.datacontainer != \'\') {
                    dataContainer = $(\'#\' + settings.datacontainer);
                    dataElements = $(\'\' + settings.dataelement + \'\', dataContainer);
                }

                var list = $(\'<ul/>\');

                var btnPrev = $(\'<div/>\').text(settings.prev).click(function () { if ($(this).hasClass(\'disabled\')) return false; currentPage = parseInt(list.find(\'li a.active\').text()) - 1; navigate(--currentPage); }).addClass(\'btn\');

                var btnNext = $(\'<div/>\').text(settings.next).click(function () { if ($(this).hasClass(\'disabled\')) return false; currentPage = parseInt(list.find(\'li a.active\').text()); navigate(currentPage); }).addClass(\'btn\');

                var btnFirst = $(\'<div/>\').text(settings.first).click(function () { if ($(this).hasClass(\'disabled\')) return false; currentPage = 0; navigate(0); }).addClass(\'btn\');

                var btnLast = $(\'<div/>\').text(settings.last).click(function () { if ($(this).hasClass(\'disabled\')) return false; currentPage = totalpages - 1; navigate(currentPage); }).addClass(\'btn\');

                var inputPage = $(\'<input/>\').attr(\'type\', \'text\').keydown(function (e) {
                    if (isTextSelected(inputPage)) inputPage.val(\'\');
                    if (e.which >= 48 && e.which < 58) {
                        var value = parseInt(inputPage.val() + (e.which - 48));
                        if (!(value > 0 && value <= totalpages)) e.preventDefault();
                    } else if (!(e.which == 8 || e.which == 46)) e.preventDefault();
                });

                var btnGo = $(\'<input/>\').attr(\'type\', \'button\').attr(\'value\', settings.go).addClass(\'btn\').click(function () { if (inputPage.val() == \'\') return false; else { currentPage = parseInt(inputPage.val()) - 1; navigate(currentPage); } });

                container.append(btnFirst).append(btnPrev).append(list).append(btnNext).append(btnLast).append($(\'<div/>\').addClass(\'short\').append(inputPage).append(btnGo));
                //                container.append(btnPrev).append(list).append(btnNext);

                if (settings.display == \'single\') {
                    btnGo.css(\'display\', \'none\');
                    inputPage.css(\'display\', \'none\');
                }

                buildNavigation(startPage);

                if (settings.initval == 0) settings.initval = 1;
                currentPage = settings.initval - 1;
                navigate(currentPage);
                initialized = true;

                function showLabels(pageIndex) {
                    container.find(\'span\').remove();
                    var upper = (pageIndex + 1) * settings.recordsperpage;
                    if (upper > settings.totalrecords) upper = settings.totalrecords;
                    container.append($(\'<span/>\').append($(\'<b/>\').text(pageIndex * settings.recordsperpage + 1)))
                                             .append($(\'<span/>\').text(\'-\'))
                                             .append($(\'<span/>\').append($(\'<b/>\').text(upper)))
                                             .append($(\'<span/>\').text(\'of\'))
                                             .append($(\'<span/>\').append($(\'<b/>\').text(settings.totalrecords)));
                }

                function buildNavigation(startPage) {
                    list.find(\'li\').remove();
                    if (settings.totalrecords <= settings.recordsperpage) return;
                    for (var i = startPage; i < startPage + settings.length; i++) {
                        if (i == totalpages) break;
                        list.append($(\'<li/>\')
                                    .append($(\'<a>\').attr(\'id\', (i + 1)).addClass(settings.theme).addClass(\'normal\')
                                    .attr(\'href\', \'javascript:void(0)\')
                                    .text(i + 1))
                                    .click(function () {
                                        currentPage = startPage + $(this).closest(\'li\').prevAll().length;
                                        navigate(currentPage);
                                    }));
                    }

                    showLabels(startPage);
                    inputPage.val((startPage + 1));
                    list.find(\'li a\').addClass(settings.theme).removeClass(\'active\');
                    list.find(\'li:eq(0) a\').addClass(settings.theme).addClass(\'active\');
                    //set width of paginator

                    var sW = list.find(\'li:eq(0) a\').outerWidth() + (parseInt(list.find(\'li:eq(0)\').css(\'margin-left\')) * 2);
                    var width = sW * list.find(\'li\').length;
                    list.css({ width: width });
                    showRequiredButtons(startPage);
                }

                function navigate(topage) {
                    //make sure the page in between min and max page count
                    var index = topage;
                    var mid = settings.length / 2;
                    if (settings.length % 2 > 0) mid = (settings.length + 1) / 2;
                    var startIndex = 0;
                    if (topage >= 0 && topage < totalpages) {
                        if (topage >= mid) {
                            if (totalpages - topage > mid)
                                startIndex = topage - (mid - 1);
                            else if (totalpages > settings.length)
                                startIndex = totalpages - settings.length;
                        }

                        buildNavigation(startIndex); showLabels(currentPage);
                        list.find(\'li a\').removeClass(\'active\');
                        inputPage.val(currentPage + 1);
                        list.find(\'li a[id="\' + (index + 1) + \'"]\').addClass(\'active\');
                        var recordStartIndex = currentPage * settings.recordsperpage;
                        var recordsEndIndex = recordStartIndex + settings.recordsperpage;
                        if (recordsEndIndex > settings.totalrecords)
                            recordsEndIndex = settings.totalrecords % recordsEndIndex;
                        if (initialized) {
                            if (settings.onchange != null) {
                                settings.onchange((currentPage + 1), recordStartIndex, recordsEndIndex);
                            }
                        }

                        if (dataContainer != null) {
                            if (dataContainer.length > 0) {
                                //hide all elements first
                                dataElements.css(\'display\', \'none\');
                                //display elements that need to be displayed
                                if ($(dataElements[0]).find(\'th\').length > 0) { //if there is a header, keep it visible always
                                    $(dataElements[0]).css(\'display\', \'\');
                                    recordStartIndex++;
                                    recordsEndIndex++;
                                }

                                for (var i = recordStartIndex; i < recordsEndIndex; i++)
                                    $(dataElements[i]).css(\'display\', \'\');
                            }
                        }
                        showRequiredButtons();
                    }
                }

                function showRequiredButtons() {
                    if (totalpages > settings.length) {
                        if (currentPage > 0) {
                            if (!settings.controlsalways) {
                                btnPrev.css(\'display\', \'\');
                            }
                            else {
                                btnPrev.css(\'display\', \'\').removeClass(\'disabled\');
                            }
                        }
                        else {
                            if (!settings.controlsalways) {
                                btnPrev.css(\'display\', \'none\');
                            }
                            else {
                                btnPrev.css(\'display\', \'\').addClass(\'disabled\');
                            }
                        }

                        if (currentPage > settings.length / 2 - 1) {
                            if (!settings.controlsalways) {
                                btnFirst.css(\'display\', \'\');
                            }

                            else {
                                btnFirst.css(\'display\', \'\').removeClass(\'disabled\');
                            }
                        }

                        else {
                            if (!settings.controlsalways) {
                                btnFirst.css(\'display\', \'none\');
                            }

                            else {
                                btnFirst.css(\'display\', \'\').addClass(\'disabled\');
                            }
                        }



                        if (currentPage == totalpages - 1) {
                            if (!settings.controlsalways) {
                                btnNext.css(\'display\', \'none\');
                            }
                            else {
                                btnNext.css(\'display\', \'\').addClass(\'disabled\');
                            }
                        }
                        else {
                            if (!settings.controlsalways) {
                                btnNext.css(\'display\', \'\');
                            }
                            else {
                                btnNext.css(\'display\', \'\').removeClass(\'disabled\');
                            }
                        }
                        if (totalpages > settings.length && currentPage < (totalpages - (settings.length / 2)) - 1) {
                            if (!settings.controlsalways) {
                                btnLast.css(\'display\', \'\');
                            }
                            else {
                                btnLast.css(\'display\', \'\').removeClass(\'disabled\');
                            }
                        }
                        else {
                            if (!settings.controlsalways) {
                                btnLast.css(\'display\', \'none\');
                            }
                            else {
                                btnLast.css(\'display\', \'\').addClass(\'disabled\');
                            }
                        };
                    }
                    else {
                        if (!settings.controlsalways) {
                            btnFirst.css(\'display\', \'none\');
                            btnPrev.css(\'display\', \'none\');
                            btnNext.css(\'display\', \'none\');
                            btnLast.css(\'display\', \'none\');
                        }
                        else {
                            btnFirst.css(\'display\', \'\').addClass(\'disabled\');
                            btnPrev.css(\'display\', \'\').addClass(\'disabled\');
                            btnNext.css(\'display\', \'\').addClass(\'disabled\');
                            btnLast.css(\'display\', \'\').addClass(\'disabled\');
                        }
                    }
                }

                function isTextSelected(el) {
                    var startPos = el.get(0).selectionStart;
                    var endPos = el.get(0).selectionEnd;
                    var doc = document.selection;
                    if (doc && doc.createRange().text.length != 0) {
                        return true;
                    } else if (!doc && el.val().substring(startPos, endPos).length != 0) {
                        return true;
                    }
                    return false;
                }
            });
        }
    });
})(jQuery);

调用代码:

function loadPager() {
    $(\'#pager\').smartpaginator({
        totalrecords: total,
        recordsperpage: pageSize,
        theme: \'green\',
        controlsalways: true,
        onchange: function (newPage) {
            pageLoadData(newPage);
        }
    });
}

 

分类:

技术点:

相关文章: