Pager

Posted 2022-03-01 moran1992

jQuery

  var Pager = function (ops) 
        this._ops = 
            count: ops.count || 0,
            selectedIndex: ops.selectedIndex || 1,
            size: ops.size || 0
        ;
        this._element = ops.element || document.getElementsByTagName(‘body‘);
        this._init()
            ._create()
            ._initMember()
            ._createPagerBtn()
            ._initEventBind()
        this._inputValue = 1;
    ;

    Pager.prototype = 
        _initId: function () 
            uuid++;
            this._pagerId = "ui-pager-" + uuid;
        ,
        _init: function () 
            this._element.id = this._pagerId;
            $(this._element).addClass(‘ui-pager-container‘)
            return this;
        ,

        _create: function () 
            var fragement = [], h = -1;
            fragement[++h] = "<div class=\\"ui-pager-trangleBtn\\">";
            fragement[++h] = "<button class=\\"ui-pager-triangle-left-as\\"></button>";
            fragement[++h] = "</div>";

            fragement[++h] = "<div class=\\"pager-content\\">";
            fragement[++h] = "</div>";

            fragement[++h] = "<div class=\\"ui-pager-trangleBtn\\">";
            fragement[++h] = "<button class=\\"ui-pager-triangle-right-as\\"></button>";
            fragement[++h] = "</div>";

            fragement[++h] = "<div class=\\"ui-pager-go\\">";
            fragement[++h] = "<input type=\\"text\\" class=\\"ui-pager-go-input\\" value=\\"1\\" />";
            fragement[++h] = "<button class=\\"ui-pager-go-btn\\">GO</button>";
            fragement[++h] = "</div>";
            $(this._element).append(fragement.join(‘‘));
            return this;
        ,

        _createPagerBtn: function () 
            this.$pagerElBtnGroup.empty();
            var
                fragement = [], h = -1;
            if (this._ops.count <= 5) 
                for (var i = 0; i < this._ops.count; i++) 
                    if (i + 1 == this._ops.selectedIndex)
                        fragement[++h] = "<button class=\\"pager-content-btn active\\" value=" + (i + 1) + ">";
                    else
                        fragement[++h] = "<button class=\\"pager-content-btn\\" value=" + (i + 1) + ">";
                    fragement[++h] = i + 1;
                    fragement[++h] = "</button>";
                
                this.$pagerElBtnGroup.append(fragement.join(‘‘));
             else 
                for (var i = 0; i < this._ops.count; i++) 
                    if (this._ops.selectedIndex <= 4 || this._ops.selectedIndex == this._ops.count) 
                        if (i + 1 <= 4) 
                            if (i + 1 == this._ops.selectedIndex)
                                fragement[++h] = "<button class=\\"pager-content-btn active\\" value=" + (i + 1) + "> " + (i + 1) + "</button>";
                            else
                                fragement[++h] = "<button class=\\"pager-content-btn\\" value=" + (i + 1) + ">" + (i + 1) + "</button>";
                         else if (i + 1 == this._ops.count) 
                            var m = h + 1;
                            if (i + 1 == this._ops.selectedIndex)
                                fragement[++m] = "<button class=\\"pager-content-btn active\\" value=" + (i + 1) + "> " + (i + 1) + "</button>";
                            else
                                fragement[++m] = "<button class=\\"pager-content-btn\\" value=" + (i + 1) + ">" + (i + 1) + "</button>";
                         else 
                            fragement[h + 1] = "<button class=\\"button-bald\\" disabled>...</button>";
                        
                     else if (this._ops.selectedIndex == 1 || this._ops.selectedIndex >= this._ops.count - 3) 
                        if (i + 1 == 1) 
                            if (i + 1 == this._ops.selectedIndex)
                                fragement[++h] = "<button class=\\"pager-content-btn active\\" value=" + (i + 1) + "> " + (i + 1) + "</button>";
                            else
                                fragement[++h] = "<button class=\\"pager-content-btn\\" value=" + (i + 1) + ">" + (i + 1) + "</button>";
                         else if (i + 1 >= this._ops.count - 3) 
                            var m = h + 1;
                            if (i + 1 == this._ops.selectedIndex)
                                fragement[++m] = "<button class=\\"pager-content-btn active\\" value=" + (i + 1) + "> " + (i + 1) + "</button>";
                            else
                                fragement[++m] = "<button class=\\"pager-content-btn\\" value=" + (i + 1) + ">" + (i + 1) + "</button>";
                            h = m;
                         else 
                            fragement[h + 1] = "<button class=\\"button-bald\\" disabled>...</button>";
                        
                     else if (this._ops.selectedIndex > 4 && this._ops.selectedIndex < this._ops.count - 3) 
                        if (i + 1 == 1) 
                            if (i + 1 == this._ops.selectedIndex)
                                fragement[++h] = "<button class=\\"pager-content-btn active\\" value=" + (i + 1) + "> " + (i + 1) + "</button>";
                            else
                                fragement[++h] = "<button class=\\"pager-content-btn\\" value=" + (i + 1) + "> " + (i + 1) + "</button>";
                         else if (i + 1 == this._ops.selectedIndex - 1 || i + 1 == this._ops.selectedIndex || i + 1 == this._ops.selectedIndex + 1) 
                            var m = h + 1;
                            if (i + 1 == this._ops.selectedIndex)
                                fragement[++m] = "<button class=\\"pager-content-btn active\\" value=" + (i + 1) + "> " + (i + 1) + "</button>";
                            else
                                fragement[++m] = "<button class=\\"pager-content-btn\\" value=" + (i + 1) + "> " + (i + 1) + "</button>";
                            h = m;
                         else if (i + 1 == this._ops.count) 
                            var m = h + 1;
                            if (i + 1 == this._ops.selectedIndex)
                                fragement[++m] = "<button class=\\"pager-content-btn active\\" value=" + (i + 1) + "> " + (i + 1) + "</button>";
                            else
                                fragement[++m] = "<button class=\\"pager-content-btn\\" value=" + (i + 1) + "> " + (i + 1) + "</button>";
                            h = m;
                         else 
                            fragement[h + 1] = "<button class=\\"button-bald\\" disabled>...</button>";
                        
                    
                
                this.$pagerElBtnGroup.append(fragement.join(‘‘));
            
            return this;
        ,

        _initMember: function () 
            this.$leftBtn = $("#" + this._pagerId + " .ui-pager-triangle-left-as");
            this.$rightBtn = $("#" + this._pagerId + " .ui-pager-triangle-right-as");
            this.$goBtn = $("#" + this._pagerId + " .ui-pager-go-btn");
            this.$pagerElBtnGroup = $("#" + this._pagerId + " .pager-content");
            this.$input = $("#" + this._pagerId + " .ui-pager-go-input");
            return this;
        ,

        _initEventBind() 
            this.$leftBtn.on(‘click‘, this._leftBtnClick.bind(this));
            this.$rightBtn.on(‘click‘, this._rightBtnClick.bind(this));
            this.$goBtn.on(‘click‘, this._goBtnClick.bind(this));
            this.$pagerElBtnGroup.on(‘click‘, this._pageBtnClick.bind(this));
        ,

        _leftBtnClick: function () 
            if (this._ops.selectedIndex != 1)
                this._ops.selectedIndex -= 1;
            else
                return;
            this._setSelectIndex(this._ops.selectedIndex);
        ,

        _rightBtnClick: function () 
            if (this._ops.selectedIndex != this._ops.count)
                this._ops.selectedIndex += 1;
            else
                return;
            this._setSelectIndex(this._ops.selectedIndex);
        ,

        _pageBtnClick: function (e) 
            var
                selectedIndex = parseInt(e.target.value);
            this._setSelectIndex(selectedIndex);
        ,

        _goBtnClick: function () 
            var value = this.$input.val();
            if (value == ‘‘) throw new Error(‘Value i error.‘);
            var targetIndex = parseInt(value);
            this._setSelectIndex(targetIndex);
        ,

        _setSelectIndex: function (index) 
            var selectedIndex = index || 1;
            var $element = $(this._element);
            $$.trigger("selectedPageChanged", $element, $$.Event(
                element: $element,
                oldValue: null,
                newValue: selectedIndex
            ));
            this._ops.selectedIndex = selectedIndex;
            this._createPagerBtn();
        ,

View Code

React

import ReactWidget from ‘../react-widget‘;

class Pager extends ReactWidget 
    constructor(props) 
        super(props);
    


    componentWillReceiveProps(newProps) 
        //this.element.setOptions(
        //    items: newProps.items,
        //    selectedIndex: newProps.selectedIndex
        //);
    

    componentDidMount() 
        this.element = new aui.Pager(
            element: ReactDOM.findDOMNode(this),
            size: this.props.pageSize,
            count: this.props.pageCount,
            selectedIndex: this.props.selectedPage
        );
        $(ReactDOM.findDOMNode(this)).on(‘selectedPageChanged‘, this.props.selectedPageChanged.bind(this));
    

    render() 
        return <div>
        </div>
    


window.$$.Pager = Pager;

View Code

less

.ui-pager-container 
    .ui-pager-trangleBtn 
        display: inline-block;
        margin: 0 10px;

        & > button 
            padding: 5px;
            border-radius: 10px;
        

        .ui-pager-triangle-left-as 
            &::before 
                content: ‘\\25C4‘
            
        

        .ui-pager-triangle-right-as 
            &::before 
                content: ‘\\25BA‘
            
        
    

    .pager-content 
        display: inline-block;

        & > button 
            padding: 5px 8px;
            margin: 0 5px;
        

        .button-bald 
            border: 0;
            background: 0 0;
        

        .active 
            background: #9D9D9D;
            color: #fff;
        
    

    .ui-pager-go 
        display: inline-block;

        .ui-pager-go-input 
            display: inline-block;
            width: 20px;
            padding: 5px;
        

        .ui-pager-go-btn 
            margin: 0 10px;
            padding: 5px;
        
    

View Code

 样式：