Skip to content

Commit

Permalink
修改分页bug，添加首尾页链接
Browse files Browse the repository at this point in the history
  • Loading branch information
@marchFantasy
marchFantasy committed Dec 17, 2015
1 parent 190f52d commit 7a553f3
Show file tree
Hide file tree
Showing 2 changed files with 94 additions and 71 deletions.
14 changes: 11 additions & 3 deletions demo/app.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -60,7 +60,7 @@ div.container
tab-item(title='tab2') 456
tab-item(title='tab3',v-bind:disabled='true') 789
h4 分页组件
pagination(v-bind:active-page=6,v-bind:items=10,v-bind:on-select='selectPage')
pagination(v-bind:active-page='activePage ',v-bind:items=10,v-bind:on-select='selectPage')
h4 栅格
row
column(xs='12',sm='4',md='4') 栅格系统1
Expand Down Expand Up @@ -173,7 +173,8 @@ export default{
styleList:['default',"primary","success","info","warning","danger"],
linkList:[{name:'link1',url:'#'},{name:'link2',url:'http://www.baidu.com'}],
value:"form1",
progress:12
progress:12,
activePage:6
}
},
methods:{
Expand All @@ -190,7 +191,14 @@ export default{
this.toggleModal();
},
selectPage(pager){
alert(pager.name);
//alert(pager.name);
if(pager.num == "next"){
this.activePage = 10 >= (this.activePage+1) ? this.activePage+1:this.activePage;
}else if(pager.num == "prev"){
this.activePage = this.activePage < 1 ? this.activePage : this.activePage - 1;
}else{
this.activePage = pager.num;
}
},
clickTab(tab){
alert(tab.title)
Expand Down
151 changes: 83 additions & 68 deletions src/pagination.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,9 @@
ul(v-bind:class='classes')
nav-item(
v-for='instance in pages',
v-bind:class='{active:instance.val === activePage,disabled:instance.disabled}',
v-bind:class='{active:instance.num === activePage,disabled:instance.disabled}',
@click='onSelect(instance)')
{{instance.val}}
{{instance.name}}
</template>
<script>
import NavItem from './navItem.vue';
Expand All @@ -25,15 +25,15 @@ ul(v-bind:class='classes')
/**
* 页码类
* [constructor description]
* @param {[type]} val [值]
* @param {[type]} name [简称]
* @param {[type]} num [值]
* @param {[type]} active=false [当前页]
* @param {[type]} disabled=false [是否可选]
* @return {[type]} [类]
*/
constructor(val,name,active=false,disabled=false){
this.val = val;
this.name = name || val;
constructor(name,num,active,disabled){
this.name = name;
this.num = num || name;
this.active = active;
this.disabled = disabled;
}
Expand Down Expand Up @@ -86,83 +86,98 @@ ul(v-bind:class='classes')
}
},
created(){
if(this.activePage === 1){
this.bPage = this.createPagerInstance('上一页','prev',false,true);
}else{
this.bPage = this.createPagerInstance('上一页','prev');
}
this.renderPageNums();
},
methods:{
createPagerInstance(name,num,isActive=false,disabled=false){
return new Pager(name,num,isActive,disabled);
},
renderPageNums(){
if(this.bPage.length > 0){
this.pages = [];
}
if(this.activePage === 1){
this.bPage = this.createPagerInstance('首页',1,false,true);
this.bPage = this.createPagerInstance('上一页','prev',false,true);
}else{
this.bPage = this.createPagerInstance('首页',1);
this.bPage = this.createPagerInstance('上一页','prev');
}
var n = 1;
/**
* 1.总页数小于最大数，直接循环输出
* 2.当前页小于最大数的一半（向上取整）
*/
if((this.items <= this.maxButtons) || (this.activePage <=Math.ceil(this.maxButtons/2))){
var n = 1;
/**
* 1.第一个条件：直接输出n值，从1开始
* 2.第二个条件：值小于最大数
* 1.总页数小于最大数，直接循环输出
* 2.当前页小于最大数的一半（向上取整）
*/
while(this.items >= n && n <= this.maxButtons){
this.bPage = this.createPagerInstance(n);
n++;
}
//显示省略号
//当items远远大于最大数时
if(this.ellipsis){
if(this.items > this.maxButtons){
this.bPage = this.createPagerInstance('...','ellipsis',false,true);
}
}
}else{
if((this.items <= this.maxButtons) || (this.activePage <=Math.ceil(this.maxButtons/2))){
/**
* 页数大于最大显示值
* 1.第一个条件：直接输出n值，从1开始
* 2.第二个条件：值小于最大数
*/
let limitDown = Math.floor(this.maxButtons/2);
//下次循环前应去处当前页，所以减1
let limitUp = this.maxButtons - limitDown -1;
let downVal = Math.abs(this.activePage - limitDown);
let upVal = this.activePage+1;
while(this.items >= n && n <= this.maxButtons){
this.bPage = this.createPagerInstance(n);
n++;
}
//显示省略号
//当items远远大于最大数时
if(this.ellipsis){
this.bPage = this.createPagerInstance('...','ellipsis',false,true);
if(this.items > this.maxButtons){
this.bPage = this.createPagerInstance('...','ellipsis',false,true);
}
}
//当前页接近末页
if((this.items - this.activePage) <= limitUp){
n = this.items - this.maxButtons+1;
while(n <= this.items){
this.bPage = this.createPagerInstance(n++);
}
}else{
while(n <= limitDown){
this.bPage = this.createPagerInstance(downVal++);
n++;
}
n = 1;
this.bPage = this.createPagerInstance(this.activePage);
while(n <= limitUp){
this.bPage = this.createPagerInstance(upVal++);
n++;
}
//显示省略号
}else{
/**
* 页数大于最大显示值
*/
let limitDown = Math.floor(this.maxButtons/2);
//下次循环前应去处当前页，所以减1
let limitUp = this.maxButtons - limitDown -1;
let downVal = Math.abs(this.activePage - limitDown);
let upVal = this.activePage+1;
if(this.ellipsis){
this.bPage = this.createPagerInstance('...','ellipsis',false,true);
this.bPage = this.createPagerInstance('...','ellipsis',false,true);
}
//当前页接近末页
if((this.items - this.activePage) <= limitUp){
n = this.items - this.maxButtons+1;
while(n <= this.items){
this.bPage = this.createPagerInstance(n++);
}
}else{
while(n <= limitDown){
this.bPage = this.createPagerInstance(downVal++);
n++;
}
n = 1;
this.bPage = this.createPagerInstance(this.activePage);
while(n <= limitUp){
this.bPage = this.createPagerInstance(upVal++);
n++;
}
//显示省略号
if(this.ellipsis){
this.bPage = this.createPagerInstance('...','ellipsis',false,true);
}
}
}
}
}
if(this.activePage === this.items){
this.bPage = this.createPagerInstance('下一页','next',false,true);
}else{
this.bPage = this.createPagerInstance('下一页','next');
if(this.activePage === this.items){
this.bPage = this.createPagerInstance('下一页','next',false,true);
this.bPage = this.createPagerInstance('末页',this.items,false,true);
}else{
this.bPage = this.createPagerInstance('下一页','next');
this.bPage = this.createPagerInstance('末页',this.items);
}
}
},
methods:{
createPagerInstance(val,name,isActive=false,disabled=false){
return new Pager(val,name,isActive,disabled);
watch:{
activePage(_nextPage,_prevPage){
this.renderPageNums();
}
},
components:{
NavItem
Expand Down

0 comments on commit 7a553f3

Please sign in to comment.