2014-09-10 114 views
0

我必須在jquery中構建自定義分頁插件。我寫了一些代碼,但我堅持在一個地方像我的分頁默認數字是10頁,當用戶點擊大於第8頁時,那麼它應該顯示另外兩頁。預期結果如下所示。 fiddlejquery中的自定義分頁插件

default display When the 9th page is selected enter image description here

$(function(){ 
$.fn.pageing= function(options){ 
var settings =$.extend({ 
// These are the defaults. 
totalPage: $(this).find('li').length, 
currentpage: 2, 
defaultdisplay:10 
}, options), el= this; 

var defaultFunction= { 
showDefault: function(){ 
for(i=0; i<(settings.defaultdisplay);i++){ 

$(el).find('li').eq(i).show() 
} 
}, 
selectCurrentPage: function(){ 
$(el).find('li:eq('+settings.currentpage+')').addClass('active') 
} 
} 

defaultFunction.showDefault(); 
defaultFunction.selectCurrentPage(); 
} 

$('ul').pageing({defaultdisplay:10}) 
}) 

回答

0

我有更多這方面的工作,找到一個解決方案。 fiddle

$(function(){ 

var apply= { 
    init: function (settings){ 
    if(apply.isnegative(settings.moving-settings.defaultdisplay) && settings.currentpage>settings.moving){ 
      apply.nextpage=Math.abs(settings.moving-settings.currentpage); 
      apply.moveto=Math.abs(settings.moving-settings.currentpage); 
    } 
    for(apply.nextpage; apply.nextpage<(settings.defaultdisplay+apply.moveto);apply.nextpage++){ 
    $(this).find('li').eq(apply.nextpage).show() 
    }  
    $(this).find('li:eq('+settings.currentpage+')').addClass('active'); 

    }, 

    isnegative: function(val){ 
     if(val > -1) 
     return false 
     else 
     return true 
     }, 
     nextpage:0, 
     moveto:0 

} 

$.fn.pageing= function(options){ 
var settings =$.extend({ 
// These are the defaults. 
totalPage: $(this).find('li').length, 
currentpage: 8, 
defaultdisplay:10, 
moving:7 
}, options), el= this; 
apply.init.call(this,settings) 
} 

$('ul').pageing({defaultdisplay:10}) 
}) 

</script> 

</head> 

<body> 
<ul> 
<li>1</li> 
<li>2</li> 
<li>3</li> 
<li>4</li> 
<li>5</li> 
<li>6</li> 
<li>7</li> 
<li>8</li> 
<li>9</li> 
<li>10</li> 
<li>11</li> 
<li>12</li> 
<li>13</li> 
<li>14</li> 
<li>15</li> 
<li>16</li> 
</ul>