jquery中的自定义分页插件_Jquery

jquery中的自定义分页插件

jquery

jquery中的自定义分页插件,jquery,Jquery,我必须在jquery中构建自定义分页插件。我写了一些代码，但我停留在一个地方，比如我的分页默认数字是10页，当用户单击大于第8页时，它应该显示另外两页。预期结果如下所示 $（函数（）{ $.fn.pageing=功能（选项）{ 变量设置=$.extend({ //这些是默认设置。 totalPage:$（this.find（'li'）。长度，第2页，默认显示：10 }，选项），el=此； var defaultFunction={ showDefault:function（）{ 对于（i

我必须在jquery中构建自定义分页插件。我写了一些代码，但我停留在一个地方，比如我的分页默认数字是10页，当用户单击大于第8页时，它应该显示另外两页。预期结果如下所示

$（函数（）{
$.fn.pageing=功能（选项）{
变量设置=$.extend({
//这些是默认设置。
totalPage:$（this.find（'li'）。长度，
第2页，
默认显示：10
}，选项），el=此；
var defaultFunction={
showDefault:function（）{
对于（i=0；i我对此进行了更多的研究，并找到了一个解决方案
$（函数（）{
变量应用={
初始化：函数（设置）{
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-1）
返回错误
其他的
返回真值
},
下页：0，
移动到：0
}
$.fn.pageing=功能（选项）{
变量设置=$.extend({
//这些是默认设置。
totalPage:$（this.find（'li'）。长度，
第8页，
默认显示：10，
移动：7
}，选项），el=此；
apply.init.call（此，设置）
}
$（'ul'）。分页（{defaultdisplay:10}）
})

一,
二,
三,
四,
五,
六,
七,
八,
九,
十,
十一,
十二,
十三,
十四,
十五
十六,


$(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})
})

$(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>