Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion dist/v-selectpage.js

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion dist/v-selectpage.js.map

Large diffs are not rendered by default.

62 changes: 51 additions & 11 deletions src/SelectPage.vue
Original file line number Diff line number Diff line change
Expand Up @@ -104,7 +104,7 @@
<div class="sp-pagination" v-show="!message" v-if="pagination">
<div class="sp-page-info">{{pageInfo}}</div>
<ul ref="page">
<li :class="{'sp-disabled':pageNumber===1}" :title="i18n.first">
<li v-if="haveTotalCount" :class="{'sp-disabled':pageNumber===1}" :title="i18n.first">
<a href="javascript:void(0);" @click="switchPage('first')" >
<i class="sp-iconfont sp-icon-first"></i>
</a>
Expand All @@ -114,12 +114,12 @@
<i class="sp-iconfont sp-icon-previous"></i>
</a>
</li>
<li :class="{'sp-disabled':pageNumber===totalPage}" class="sp-right" :title="i18n.last">
<li v-if="haveTotalCount" :class="{'sp-disabled':pageNumber===totalPage}" class="sp-right" :title="i18n.last">
<a href="javascript:void(0);" @click="switchPage('last')" >
<i class="sp-iconfont sp-icon-last"></i>
</a>
</li>
<li :class="{'sp-disabled':pageNumber===totalPage}" class="sp-right" :title="i18n.next">
<li :class="{'sp-disabled':pageNumber===totalPage || !loadMore}" class="sp-right" :title="i18n.next">
<a href="javascript:void(0);" @click="switchPage('next')" >
<i class="sp-iconfont sp-icon-next"></i>
</a>
Expand Down Expand Up @@ -219,6 +219,34 @@
pagination: {
type: Boolean,
default: true
},
/**
* Is have total page number
*/
haveTotalCount: {
type: Boolean,
default: true
},
/**
* the field for pageSize
*/
pageSizeField: {
type: String,
default: "pageSize"
},
/**
* the field for pageIndex
*/
pageNumberField: {
type: String,
default: "pageNumber"
},
/**
* customClass
*/
customClass: {
type: String,
default: ""
}
},
data(){
Expand All @@ -238,7 +266,8 @@

pageNumber: 1,
totalPage: 0,
totalRows: 0
totalRows: 0,
loadMore: true
};
},
methods:{
Expand Down Expand Up @@ -432,8 +461,8 @@
if(typeof(this.data) === 'string' && this.dataLoad && typeof(this.dataLoad === 'function')){
let that = this, queryParams = this.params && Object.keys(this.params).length?
JSON.parse(JSON.stringify(this.params)):{};
queryParams.pageSize = this.pageSize;
queryParams.pageNumber = this.pageNumber;
queryParams[this.pageSizeField] = this.pageSize;
queryParams[this.pageNumberField] = this.pageNumber;
if(this.sort) queryParams.orderBy = this.sort;
if(init && this.value){
queryParams.searchKey = this.keyField;
Expand All @@ -455,6 +484,7 @@
console.error('In server side mode, you need specified "resultFormat" function to format server side result.');
}else{
let tmpObj = that.resultFormat(resp);
tmpObj.loadMore != undefined ? this.loadMore = tmpObj.loadMore : "";
if(tmpObj && Object.keys(tmpObj).length){
if(!init){
that.list = tmpObj.list;
Expand All @@ -474,9 +504,16 @@
if(this.pageNumber!==1) this.pageNumber = 1;
break;
case 'previous':
if(this.pageNumber!==1) this.pageNumber--;
if(this.pageNumber!==1){
this.pageNumber--;
}else{
return;
}
break;
case 'next':
if(this.loadMore === false){
return;
}
if(this.pageNumber!==this.totalPage) this.pageNumber++;
break;
case 'last':
Expand Down Expand Up @@ -574,9 +611,11 @@
return this.placeholder?this.placeholder:this.i18n.placeholder;
},
pageInfo(){
return this.i18n.page_info.replace('page_num', this.pageNumber)
.replace('page_count',this.totalPage)
.replace('row_count',this.totalRows);
return this.haveTotalCount
? this.i18n.page_info.replace('page_num', this.pageNumber)
.replace('page_count',this.totalPage)
.replace('row_count',this.totalRows)
: this.i18n.page_info_no_total.replace('page_num', this.pageNumber);
}
},
beforeMount(){
Expand All @@ -588,7 +627,7 @@
this.scrollPolyfill();
//switch class name
let className = this.$el.className;
this.$el.className = 'v-selectpage';
this.$el.className = 'v-selectpage ' + this.customClass;
this.$refs.input.className += ' ' + className;

//set searchField when user not config
Expand Down Expand Up @@ -896,6 +935,7 @@ div.sp-pagination {
&:last-child{ border-bottom-right-radius: 2px; }
&.sp-disabled {
a { color: #DDDDDD;font-weight: normal;/*cursor: not-allowed;*/ }
i {cursor: not-allowed}
}
}
}
Expand Down
3 changes: 3 additions & 0 deletions src/language.js
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ export default {
close_btn: '关闭 (Esc键)',
loading: '读取中...',
page_info: '第 page_num/page_count 页( 共 row_count 条记录 )',
page_info_no_total: '第 page_num 页',
not_found: '无查询结果',
server_error: '连接到服务器时发生错误!',
clear: '清除内容',
Expand All @@ -25,6 +26,7 @@ export default {
close_btn: 'Close (Esc key)',
loading: 'loading...',
page_info: 'Page page_num/page_count ( row_count records )',
page_info_no_total: 'Page page_num',
not_found: 'not found',
server_error: 'An error occurred while connecting to server.',
clear: 'Clear content',
Expand All @@ -43,6 +45,7 @@ export default {
close_btn: '閉じる (Esc キー)',
loading: '読み込み中...',
page_info: 'page_num/page_count 件 ( 全 row_count つ記録 )',
page_info_no_total: 'page_num',
not_found: '(0 件)',
server_error: 'サーバとの通信でエラーが発生しました。',
clear: 'コンテンツをクリアする',
Expand Down