Partagez un simple composant de pagination javascript écrit par vous-même_javascript skills

Un composant de pagination simple écrit par moi-même. Les principales fonctions et implémentations sont toutes en JS. Dans la page html, il vous suffit d'ajouter un DIV pour générer la pagination et donner l'identifiant du conteneur.

La structure html est la suivante :

Copier le code Le code est le suivant :

class="pagination" donne le style de pagination,
id="pageDIV" est utilisé pour placer la pagination générée par JS

La structure CSS est la suivante :

Copier le code Le code est le suivant :

.pagination{
Marge supérieure : 10 px ;
​ marge inférieure : 10px;
Affichage : bloc en ligne ;
padding-left : 0;
Marge : 20px 0;
Rayon de bordure : 4 px ;
>
.pagination>li {
Affichage : en ligne ;
>
.pagination>li:premier-enfant>a{
​ marge gauche : 0;
Rayon de la bordure supérieure gauche : 4 px ;
Bordure en bas à gauche : 4px ;
>
.pagination>li>a{
Position : relative ;
flotter : gauche ;
Rembourrage : 6px 12px ;
​ marge gauche : -1px;
Hauteur de ligne : 1.42857143 ;
Couleur : #337ab7;
décoration de texte : aucune ;
Couleur d'arrière-plan : #fff;
Bordure : 1px solide #ddd;
Curseur : pointeur ;
>
.pagination>li>a.navcur{
arrière-plan : #cccccc ;
Couleur : #ffffff;
>

Ce qui suit est la structure JS, assurez-vous de citer JQuery

Copier le code Le code est le suivant :

/**
* @pageContentID restitue l'élément DIV paginé
* @curPage page de démarrage actuelle
* @totalCount quantité totale
* @pageRows Numéro affiché sur chaque page
* Fonction de rappel @callback pour afficher les données
​*/
fonction PageList(pageContentID,option){
    this.pageContentID=document.getElementById(pageContentID);
    this.curPage=option.curPage;
    this.totalCount=option.totalCount;
    this.pageRows=option.pageRows;
    this.callback=option.callback;
    this.pageSize=Math.ceil(this.totalCount/this.pageRows);
>
PageList.prototype={
    init:fonction(){
        this.renderbtn();
    },
    première page:fonction(){
        var _self=this;
        _self._firstpage=document.createElement("li");
        _self._firstpageA=document.createElement("a");
        _self._firstpageA.innerHTML="首页";
        _self._firstpage.appendChild(_self._firstpageA);
        this.pageContentID.appendChild(_self._firstpage);
        _self._firstpage.onclick=function(){
            _self.gotopage(1);
        >
    },
    dernière page : fonction () {
      var _self=this;
        _self._lastpage=document.createElement("li");
        _self._lastpageA=document.createElement("a");
        _self._lastpageA.innerHTML="尾页";
        _self._lastpage.appendChild(_self._lastpageA);
        this.pageContentID.appendChild(_self._lastpage);
        _self._lastpage.onclick=fonction() {
            _self.gotopage(_self.pageSize);
        >
    },
    page d'avant-première : fonction () {
        var _self=this;
        _self._prew=document.createElement("li");
        _self._prewA=document.createElement("a");
        _self._prewA.innerHTML="<<";
        _self._prew.appendChild(_self._prewA);
        this.pageContentID.appendChild(_self._prew);
        _self._prew.onclick=fonction() {
            si(_self.curPage>1){
                _self.curPage--;
            >
            _self.callback.call(this,this.curPage);
            _self.init();
            console.log(_self.curPage);
        >
    },
    page suivante : fonction () {
        var _self=this;
        _self._next=document.createElement("li");
        _self._nextA=document.createElement("a");
        _self._nextA.innerHTML=">>";
        _self._next.appendChild(_self._nextA);
        this.pageContentID.appendChild(_self._next);
        _self._next.onclick=fonction() {
            si(_self.curPage<_self.pageSize){
                _self.curPage ;
            >
            _self.callback.call(this,this.curPage);
            _self.init();
            console.log(_self.curPage);
        >
    },
    numéro de page : fonction () {
        var _self=this;
        si(this.pageSize<=10){
            pour(var i= 1,len=this.pageSize;i<=len;i ){
                _self._num=document.createElement("li");
                _self._numA=document.createElement("a");
                _self._numA.innerHTML=i;
                _self._num.appendChild(_self._numA);
                this.pageContentID.appendChild(_self._num);
                _self._num.onclick=fonction() {
                    var curpage = $(this).text();
                    _self.gotopage(curpage);
                >
            >
        >
        autre{
            si(_self.curPage<=10){
                pour(var i= 1;i<=10;i ){
                    _self._num=document.createElement("li");
                    _self._numA=document.createElement("a");
                    _self._numA.innerHTML=i;
                    _self._num.appendChild(_self._numA);
                    this.pageContentID.appendChild(_self._num);
                    _self._num.onclick=fonction() {
                        var curpage = $(this).text();
                        _self.gotopage(curpage);
                    >
                >
            >
            sinon if(_self.curPage>10&&_self.curPage<=this.pageSize){
                if(this.pageSize                     for(var i=Math.floor(_self.curPage/10)*10 1;i<=this.pageSize;i ){
                        if(_self.curPage>this.pageSize)
                        revenir ;
                        _self._num=document.createElement("li");
                        _self._numA=document.createElement("a");
                        _self._numA.innerHTML=i;
                        _self._num.appendChild(_self._numA);
                        this.pageContentID.appendChild(_self._num);
                        _self._num.onclick=fonction() {
                            var curpage = $(this).text();
                            _self.gotopage(curpage);
                        >
                    >
                }autre{
                    if(Math.ceil(_self.curPage/10)*10==_self.curPage){
                        pour(var i=_self.curPage-9;i<=_self.curPage;i ){
                            _self._num=document.createElement("li");
                            _self._numA=document.createElement("a");
                            _self._numA.innerHTML=i;
                            _self._num.appendChild(_self._numA);
                            this.pageContentID.appendChild(_self._num);
                            _self._num.onclick=fonction() {
                                var curpage = $(this).text();
                                _self.gotopage(curpage);
                            >
                        >
                    }autre{
                        for(var i=Math.floor(_self.curPage/10)*10 1;i<=Math.ceil(_self.curPage/10)*10;i ){
                            _self._num=document.createElement("li");
                            _self._numA=document.createElement("a");
                            _self._numA.innerHTML=i;
                            _self._num.appendChild(_self._numA);
                            this.pageContentID.appendChild(_self._num);
                            _self._num.onclick=fonction() {
                                var curpage = $(this).text();
                                _self.gotopage(curpage);
                            >
                        >
                    >
                >
            >
        >
        $(".pagination li").each(function(){
            if($(this)(0).innerText==_self.curPage){
                $(".pagination li").children("a").removeClass("navcur");
                $(this).children("a").addClass("navcur");
            >
        });
    },
    gotopage : fonction (curpage) {
        this.curPage=curpage;
        this.callback.call(this,this.curPage);
        this.init();
        console.log(this.curPage);
    },
    renderbtn : fonction () {
        $(".pagination").html("");
        this.firstpage();
        this.prewpage();
        this.pagenum();
        this.nextpage();
        this.lastpage();
    >
};
$(fonction(){
    var pager = new PageList("pageDIV",{
        curPage:1,
        nombre total : 26,
        pageRangs : 1,
        rappel : rappelFuc
    });
    pager.init();
});
fonction callbackFuc(curpage){
>

说明 :

此分页是以10页为标准,低于10页的时候全部显示,大于10页的时候,进行翻页显示余下页数.

调用方法 :

复制代码 代码如下 :

$(fonction(){
    var pager = new PageList("pageDIV",{
        curPage:1,
        nombre total : 26,
        pageRangs : 1,
        rappel : rappelFuc
    });
    pager.init();
});

以上就是本分页组件的核心代码了，希望小伙伴们能够喜欢。