zoukankan      html  css  js  c++  java
  • 好用的jQuery分页插件

    插件源代码:

    (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 });
                        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);
            }
        });
    }
  • 相关阅读:
    Android发送信息模拟系统
    Android SharedPreferences
    Android中SQLiteDatabase操作【附源码】
    poj 2453
    pku 1020
    poj 2594 Treasure Exploration
    pku 2092 Grandpa is Famous
    zoj Weekend Party
    poj 3259 Wormholes
    poj 2455 Secret Milking Machine
  • 原文地址:https://www.cnblogs.com/shi-meng/p/4157266.html
Copyright © 2011-2022 走看看