Skip to content
This repository was archived by the owner on Apr 1, 2022. It is now read-only.

Added disablePaginationNavigation setting #70

Closed
wants to merge 1 commit into from
Closed

Added disablePaginationNavigation setting #70

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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/min.css
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion dist/min.js
View file
Open in desktop

Large diffs are not rendered by default.

1 change: 1 addition & 0 deletions examples/dist/client.5967671a.js
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion examples/dist/client.07979e74.css → examples/dist/client.678ed32f.css
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 0 additions & 1 deletion examples/dist/client.ba80e24e.js
View file
Open in desktop

This file was deleted.

4 changes: 2 additions & 2 deletions examples/dist/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,12 +5,12 @@
<title>Examples · vue2-datatable-component</title>
<link href="//unpkg.com/bootstrap@3.3.5/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<link href="client.07979e74.css" rel="stylesheet"></head>
<link href="client.678ed32f.css" rel="stylesheet"></head>
<body>

<div id="app"></div>

<script src="//unpkg.com/jquery@2.1.4/dist/jquery.min.js"></script>
<script src="//unpkg.com/bootstrap@3.3.5/dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src="client.ba80e24e.js"></script></body>
<script type="text/javascript" src="client.5967671a.js"></script></body>
</html>
25 changes: 20 additions & 5 deletions src/Pagination.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<template>
<ul class="pagination" style="margin: 0" name="Pagination">
<li v-if="!isFirstPage" class="page-item" @click="turnPage(-1)">
<a href="#" class="page-link" @click.prevent>
<li v-if="!isFirstPage || disablePaginationNavigation" class="page-item" @click="turnPage(-1)">
<a href="#" :class="firstClasses" @click.prevent>
<i class="fa fa-arrow-left"></i>
</a>
</li>
Expand All @@ -13,8 +13,8 @@
<i class="fa fa-ellipsis-h"></i>
</a>
</li>
<li v-if="!isLastPage" class="page-item" @click="turnPage(1)">
<a href="#" class="page-link" @click.prevent>
<li v-if="!isLastPage || disablePaginationNavigation" class="page-item" @click="turnPage(1)">
<a href="#" :class="lastClasses" @click.prevent>
<i class="fa fa-arrow-right"></i>
</a>
</li>
Expand All @@ -25,7 +25,8 @@ export default {
name: 'Pagination',
props: {
total: { type: Number, required: true },
query: { type: Object, required: true }
query: { type: Object, required: true },
disablePaginationNavigation: { required: true }
},
computed: {
isFirstPage () {
Expand Down Expand Up @@ -54,6 +55,12 @@ export default {
if (i >= n - 4) return [1, 0, n-6, n-5, n-4, n-3, n-2, n-1, n]
return [1, 0, i-2, i-1, i, i+1, i+2, 0, n]
/* eslint-enable */
},
firstClasses: function () {
return 'page-link' + (this.isFirstPage ? ' disabled' : '')
},
lastClasses: function () {
return 'page-link' + (this.isLastPage ? ' disabled' : '')
}
},
methods: {
Expand All @@ -67,3 +74,11 @@ export default {
}
}
</script>

<style>
a.disabled {
pointer-events: none;
cursor: default;
opacity: 0.5;
}
</style>
1 change: 1 addition & 0 deletions src/_mixins/props.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ export default {
HeaderSettings: { type: Boolean, default: true }, // whether to render `HeaderSettings`
Pagination: { type: Boolean, default: true }, // whether to render `PageSizeSelect` and `Pagination`
pageSizeOptions: { type: Array, default: () => [10, 20, 40, 80, 100] },
disablePaginationNavigation: { type: Boolean, default: true },
tblClass: [String, Object, Array], // classes for <table>
tblStyle: [String, Object, Array], // inline styles for <table>
fixHeaderAndSetBodyMaxHeight: Number, // a fancy prop which combines two props into one
Expand Down