基本信息
源码名称:vue表格分页组件
源码大小:3.40KB
文件格式:.rar
开发语言:js
更新时间:2017-02-14
友情提示:(无需注册或充值,赞助后即可获取资源下载链接)
嘿,亲!知识可是无价之宝呢,但咱这精心整理的资料也耗费了不少心血呀。小小地破费一下,绝对物超所值哦!如有下载和支付问题,请联系我们QQ(微信同号):813200300
本次赞助数额为: 4 元×
微信扫码支付:4 元
×
请留下您的邮箱,我们将在2小时内将文件发到您的邮箱
源码介绍
(function (Vue) {
Vue.component('pagination', {
props: {
pageNo: {
twoWay: true,
type: Number,
validator: function (value) {
return value > 0
},
default: 1
},
pageSize: {
twoWay: true,
type: Number,
validator: function (value) {
return value > 0
},
default: 10
},
totalResult: {
type: Number,
default: 0
},
displayNum: {
type: Number,
default: 6
},
edgeNum: {
type: Number,
default: 2
},
},
template: "<nav v-show=\"totalPages > 1\"><ul class=\"pagination\"><li v-if=\"!noPrevious\"><a style=\"cursor:pointer;\"v-on:click=\"selectPage(pageNo - 1)\"aria-label=\"Previous\"><span aria-hidden=\"true\">‹</span></a></li><li v-for=\"page in pages\"v-bind:class=\"{ \'active\': page.number == pageNo, \'disabled\': page.disabled }\"><a style=\"cursor:pointer;\"v-on:click=\"selectPage(page.number)\"v-text=\"page.text\"></a></li><li v-if=\"!noNext\"><a style=\"cursor:pointer;\"v-on:click=\"selectPage(pageNo 1)\"aria-label=\"Next\"><span aria-hidden=\"true\">›</span></a></li></ul></nav>",
replace: true,
inherit: false,
computed: {
noPrevious: function () {
return this.pageNo === 1;
},
noNext: function () {
return this.pageNo === this.totalPages;
},
pages: function () {
return getPages(this.pageNo, this.totalPages, this.edgeNum, this.displayNum);
},
totalPages: function () {
return getTotalPages(this.pageSize, this.totalResult);
},
},
methods: {
selectPage: function (num) {
if (this.pageNo != num && num > 0 && num <= this.totalPages) {
this.pageNo = num;
this.$dispatch('page-change');
}
},
selectSize: function (size) {
if (this.pageSize != size && size > 0) {
this.pageSize = size;
if (this.pageNo > this.totalPages) {
this.selectPage(this.totalPages);
}
else {
this.$dispatch('page-change');
}
}
},
},
});
function getTotalPages(pageSize, totalResult) {
var totalPages = pageSize < 1 ? 1 : Math.ceil(totalResult / pageSize);
return Math.max(totalPages || 0, 1);
}
// Create page object used in template
function makePage(number, text, isActive) {
return {
number: number,
text: text,
disabled: number === -1,
};
}
/**
* Calculate start and end point of pagination links depending on
* currentPage and num_display_entries.
* @return {Array}
*/
function getInterval(currentPage, pageCount, num_display_entries) {
//var num_display_entries = 6;
var ne_half = Math.ceil(num_display_entries / 2);
var np = pageCount;
var upper_limit = np - num_display_entries;
var start = currentPage > ne_half ? Math.max(Math.min(currentPage - ne_half, upper_limit), 0) : 0;
var end = currentPage > ne_half ? Math.min(currentPage ne_half, np) : Math.min(num_display_entries, np);
return [start, end];
}
function getPages(currentPage, totalPages, num_edge_entries, num_display_entries) {
var ret = [];
//var num_edge_entries = 2;
var skip_text = '...';
var np = totalPages;
var interval = getInterval(currentPage - 1, totalPages, num_display_entries);
// Generate starting points
if (interval[0] > 0 && num_edge_entries > 0) {
var end = Math.min(num_edge_entries, interval[0]);
for (var i = 0; i < end; i ) {
var page = makePage(i 1, i 1);
ret.push(page);
}
if (num_edge_entries < interval[0]) {
var page = makePage(-1, skip_text);
ret.push(page);
}
}
// Generate interval links
for (var i = interval[0]; i < interval[1]; i ) {
var page = makePage(i 1, i 1);
ret.push(page);
}
// Generate ending points
if (interval[1] < np && num_edge_entries > 0) {
if (np - num_edge_entries > interval[1]) {
var page = makePage(-1, skip_text);
ret.push(page);
}
var begin = Math.max(np - num_edge_entries, interval[1]);
for (var i = begin; i < np; i ) {
var page = makePage(i 1, i 1);
ret.push(page);
}
}
return ret;
}
})(Vue)
(function (Vue) {
Vue.component('pagination', {
props: {
pageNo: {
twoWay: true,
type: Number,
validator: function (value) {
return value > 0
},
default: 1
},
pageSize: {
twoWay: true,
type: Number,
validator: function (value) {
return value > 0
},
default: 10
},
totalResult: {
type: Number,
default: 0
},
displayNum: {
type: Number,
default: 6
},
edgeNum: {
type: Number,
default: 2
},
},
template: "<nav v-show=\"totalPages > 1\"><ul class=\"pagination\"><li v-if=\"!noPrevious\"><a style=\"cursor:pointer;\"v-on:click=\"selectPage(pageNo - 1)\"aria-label=\"Previous\"><span aria-hidden=\"true\">‹</span></a></li><li v-for=\"page in pages\"v-bind:class=\"{ \'active\': page.number == pageNo, \'disabled\': page.disabled }\"><a style=\"cursor:pointer;\"v-on:click=\"selectPage(page.number)\"v-text=\"page.text\"></a></li><li v-if=\"!noNext\"><a style=\"cursor:pointer;\"v-on:click=\"selectPage(pageNo 1)\"aria-label=\"Next\"><span aria-hidden=\"true\">›</span></a></li></ul></nav>",
replace: true,
inherit: false,
computed: {
noPrevious: function () {
return this.pageNo === 1;
},
noNext: function () {
return this.pageNo === this.totalPages;
},
pages: function () {
return getPages(this.pageNo, this.totalPages, this.edgeNum, this.displayNum);
},
totalPages: function () {
return getTotalPages(this.pageSize, this.totalResult);
},
},
methods: {
selectPage: function (num) {
if (this.pageNo != num && num > 0 && num <= this.totalPages) {
this.pageNo = num;
this.$dispatch('page-change');
}
},
selectSize: function (size) {
if (this.pageSize != size && size > 0) {
this.pageSize = size;
if (this.pageNo > this.totalPages) {
this.selectPage(this.totalPages);
}
else {
this.$dispatch('page-change');
}
}
},
},
});
function getTotalPages(pageSize, totalResult) {
var totalPages = pageSize < 1 ? 1 : Math.ceil(totalResult / pageSize);
return Math.max(totalPages || 0, 1);
}
// Create page object used in template
function makePage(number, text, isActive) {
return {
number: number,
text: text,
disabled: number === -1,
};
}
/**
* Calculate start and end point of pagination links depending on
* currentPage and num_display_entries.
* @return {Array}
*/
function getInterval(currentPage, pageCount, num_display_entries) {
//var num_display_entries = 6;
var ne_half = Math.ceil(num_display_entries / 2);
var np = pageCount;
var upper_limit = np - num_display_entries;
var start = currentPage > ne_half ? Math.max(Math.min(currentPage - ne_half, upper_limit), 0) : 0;
var end = currentPage > ne_half ? Math.min(currentPage ne_half, np) : Math.min(num_display_entries, np);
return [start, end];
}
function getPages(currentPage, totalPages, num_edge_entries, num_display_entries) {
var ret = [];
//var num_edge_entries = 2;
var skip_text = '...';
var np = totalPages;
var interval = getInterval(currentPage - 1, totalPages, num_display_entries);
// Generate starting points
if (interval[0] > 0 && num_edge_entries > 0) {
var end = Math.min(num_edge_entries, interval[0]);
for (var i = 0; i < end; i ) {
var page = makePage(i 1, i 1);
ret.push(page);
}
if (num_edge_entries < interval[0]) {
var page = makePage(-1, skip_text);
ret.push(page);
}
}
// Generate interval links
for (var i = interval[0]; i < interval[1]; i ) {
var page = makePage(i 1, i 1);
ret.push(page);
}
// Generate ending points
if (interval[1] < np && num_edge_entries > 0) {
if (np - num_edge_entries > interval[1]) {
var page = makePage(-1, skip_text);
ret.push(page);
}
var begin = Math.max(np - num_edge_entries, interval[1]);
for (var i = begin; i < np; i ) {
var page = makePage(i 1, i 1);
ret.push(page);
}
}
return ret;
}
})(Vue)