JavaScript分頁組件使用方法詳解

第JavaScript分頁組件使用方法詳解分頁組件是web開發(fā)中常見的組件，請完成pagination函數(shù)，在id為jsPagination的DOM元素中完成分頁的顯示部分，需求如下

1、最多連續(xù)顯示5頁，居中高亮顯示current頁（如demo1所示)

2、total為0時，隱藏整個元素（如demo2所示）

3、如果total=5，則顯示全部頁數(shù)，隱藏“首頁”和“末頁”元素（如demo3所示）

4、當(dāng)current居中不足5頁，向后(前)補足5頁，隱藏“首頁”(“末頁”)元素(如demo4和demo5所示)

5、total、current均為正整數(shù)，1=current=total

用原生JS實現(xiàn)分頁組件，實現(xiàn)上述需求。需要注意下面幾點

1：在獲取li標(biāo)簽的時候，由于上一個li標(biāo)簽與下一個li標(biāo)簽之前存在文本節(jié)點，需要兩次使用nextSibling，

page=page.nextSibling.nextSibling;

2：提供的li標(biāo)簽的innerHTML為‘'，需要在其中添加頁碼，根據(jù)需求中的五種情況寫

3：特別注意首頁、末頁的隱藏情況。當(dāng)current-2=1時隱藏首頁，當(dāng)current+2.=total隱藏末頁,需要隱藏首頁、末頁存在于上述demo1、demo3、demo4、demo5。（其中demo1首頁、末頁的隱藏很容易被忽略掉?。?/p>

HTML

ulid="jsPagination"

li首頁/li

li/li

li/li

li/li

li/li

li/li

li末頁/li

/ul

css

.hide{

display:none!important;

.pagination{

margin:0auto;

padding:0;

list-style:none;

text-align:center;

.paginationli{

display:inline-block;

width:30px;

height:30px;

overflow:hidden;

line-height:30px;

margin:05px00;

font-size:14px;

text-align:center;

border:1pxsolid#00bc9b;

color:#00bc9b;

cursor:pointer;

.paginationli.current,

.paginationli:hover{

background:#00bc9b;

color:#ffffff;

.demo{

margin:10px0;

padding:10px;

background:#eeeeee;

text-align:center;

}

JavaScript

functionpagination(total,current){

varele=document.getElementById('jsPagination');

//fordemo1

if(current-2=1¤t+2=total)

varpage=ele.firstChild.nextSibling;

if(current-2==1)

page.className='hide';

for(vari=current-2,p=current-2;i=current+2;p++,i++)

page=page.nextSibling;

console.log(page);

page=page.nextSibling;

console.log(page);

page.innerHTML=i;

if(i==current)

page.className='current';

if(current+2==total)

varlast=page.nextSibling.nextSibling;

last.className='hide';

//fordemo2

elseif(total==0)

ele.className='paginationhide';

//fordemo3

elseif(total=5)

varfir=ele.firstChild.nextSibling;

fir.className='hide';

varpage=fir;

for(vari=1;ii++){

page=page.nextSibling.nextSibling;

if(i=total){

page.innerHTML=i;

if(i==current)

page.className='current';

else

page.className='hide';

varlast=page.nextSibling.nextSibling;

last.className='hide';

//fordemo4

elseif(current-2=0)

varpage=ele.firstChild.nextSibling;

page.className='hide';

for(vari=1;ii++){

page=page.nextSibling.nextSibling;

page.innerHTML=i;

if(i==current)

page.className='current';

//fordemo5

elseif(current+2total)

varpage=ele.firstChild.nextSibling;

for(vari=total-4;i=total;i++){

page=page.nextSibling.nextSibling;

page.innerHTML=i;

if(i==cu