js寫的分頁2

2021-09-09 06:21:40 字數 2363 閱讀 3382

**於

在這個基礎上稍作 修改,增加了可選每頁顯示條數並跳到第一頁

1.html

2.css

.pagination ul 

.pagination ul li

.pagination ul li:hover

.pagination li.active

.pagination li.disabled

.pagination li.totalpage

.pagination li.totalpage:hover

.pagination li input

.pagination li input:focus

.pagination

.pagination ul:nth-child(2)

input[type=number]

input[type=number]::-webkit-inner-spin-button,

input[type=number]::-webkit-outer-spin-button

.pagination select

3.js

function page(_ref) ;

if(!pagesize);

if(!pagetotal);

if(!pageamount);

if(!datatotal);

this.pagesize = pagesize || 5; //分頁個數

this.pagetotal = pagetotal; //總共多少頁

this.pageamount = pageamount || 10; //每頁多少條

this.datatotal = datatotal; //總共多少資料

this.curpage = curpage || 1; //初始頁碼

this.ul = document.createelement('ul');

this.id = id;

this.getpage = getpage;

this.pagelimit = pagelimit;

this.showpagetotalflag = showpagetotalflag || false; //是否顯示資料統計

this.showskipinputflag = showskipinputflag || false; //是否支援跳轉

if(datatotal >0 &&pagetotal>0)else

};// 給例項物件新增公共屬性和方法

page.prototype = else ;

}li.innerhtml = item;

});that.nextpage();

//尾頁

that.finalpage();

//是否支援跳轉

if (that.showskipinputflag)

//是否顯示總頁數,每頁個數,資料

if (that.showpagetotalflag)

},//首頁

firstpage: function firstpage() ;

},lastpage: function lastpage() ;

} else

},//分頁

getpages: function getpages()

} else

while (i--)

}} else

if (!this.pagesize)

return pag;

},nextpage: function nextpage() ;

} else

},//尾頁

finalpage: function finalpage() ;

},//是否支援跳轉

showskipinput: function showskipinput() else

that.init();}};

var span2 = document.createelement('span');

span2.innerhtml = '頁';

},//是否顯示總頁數,每頁個數,資料

showpagetotal: function showpagetotal(pagelimit)

var li3 = document.createelement('li');

li3.innerhtml = '條 合計 ' + that.datatotal + ' 條資料';

li3.classname = 'totalpage';

},};

原生 js 寫分頁

這段 是用原生 js 寫的乙個分頁的效果 doctype html html lang en head meta charset utf 8 title document title style ul ul li div ul background style head body div id di...

JS 自己寫的分頁,比較簡單

前段的分頁現在有很多的外掛程式,自己也一直在用,懶得自己寫 實現,這次不讓用外掛程式,只能自己實現了,記錄一下 效果 html js document ready function else document on click next page function else 分頁處理 functio...

dede channel 分頁 JS分頁

dede channel 無法分頁的,所以建議用js分頁,下面是 站長特效01頁,打造國內最帥的網頁特效站!站長特效01頁,打造國內最帥的網頁特效站!站長特效01頁,打造國內最帥的網頁特效站!站長特效01頁,打造國內最帥的網頁特效站!站長特效01頁,打造國內最帥的網頁特效站!站長特效01頁,打造國內...