Skip to content
Snippets Groups Projects
Commit 668bd448 authored by Timothee P's avatar Timothee P :sunflower:
Browse files

add pagination

parent 0517c6d4
No related branches found
No related tags found
4 merge requests!295Version 3.0.0,!247REDMINE_ISSUE-12787,!245REDMINE_ISSUE-12786,!233REDMINE_ISSUE-12378
Hide whitespace changes
Inline Side-by-side
Showing
with 359 additions and 14 deletions
src/views/Catalog.vue
+ 359
− 14
View file @ 668bd448
......@@ -12,8 +12,8 @@
<div>Ressource</div>
</div>
<div
v-for="ressource in ressources"
:key="ressource.ressource"
v-for="(ressource, index) in paginatedRessources"
:key="`${ressource.ressource}-${index}`"
class="row"
>
<div>{{ ressource.organisation }}</div>
......@@ -21,6 +21,62 @@
<div>{{ ressource.ressource }}</div>
</div>
</div>
<div
v-if="nbPages.length > 1"
id="table-features_info"
class="dataTables_info"
>
Affichage de l'élément {{ pagination.start + 1 }} à
{{ displayedPageEnd }}
sur {{ ressources.length }} éléments
</div>
<div
v-if="nbPages.length > 1"
id="table-features_paginate"
class="dataTables_paginate paging_simple_numbers"
>
<a
@click="toPreviousPage"
id="table-features_previous"
:class="[
'paginate_button previous',
{ disabled: pagination.currentPage === 1 },
]"
aria-controls="table-features"
data-dt-idx="0"
tabindex="0"
>Précédent</a
>
<span>
<a
v-for="pageNumber in nbPages"
:key="'page' + pageNumber"
@click="toPage(pageNumber)"
:class="[
'paginate_button',
{ current: pageNumber === pagination.currentPage },
]"
aria-controls="table-features"
data-dt-idx="1"
tabindex="0"
>{{ pageNumber }}</a
>
</span>
<!-- // TODO : <span v-if="nbPages > 4" class="ellipsis">...</span> -->
<a
id="table-features_next"
:class="[
'paginate_button next',
{ disabled: pagination.currentPage === nbPages.length },
]"
aria-controls="table-features"
data-dt-idx="7"
tabindex="0"
@click="toNextPage"
>Suivant</a
>
</div>
</div>
</template>
......@@ -33,31 +89,242 @@ export default {
return {
ressources: [
{
organisation: "organisation1",
dataset: "dataset1",
ressource: "ressource1",
organisation: "Organisation 1",
dataset: "Dataset 1",
ressource: "Ressource 1",
},
{
organisation: "Organisation 2",
dataset: "Dataset 2",
ressource: "Ressource 2",
},
{
organisation: "Organisation 3",
dataset: "Dataset 3",
ressource: "Ressource 3",
},
{
organisation: "Organisation 4",
dataset: "Dataset 4",
ressource: "Ressource 4",
},
{
organisation: "Organisation 1",
dataset: "Dataset 1",
ressource: "Ressource 1",
},
{
organisation: "Organisation 2",
dataset: "Dataset 2",
ressource: "Ressource 2",
},
{
organisation: "Organisation 3",
dataset: "Dataset 3",
ressource: "Ressource 3",
},
{
organisation: "Organisation 4",
dataset: "Dataset 4",
ressource: "Ressource 4",
},
{
organisation: "Organisation 1",
dataset: "Dataset 1",
ressource: "Ressource 1",
},
{
organisation: "Organisation 2",
dataset: "Dataset 2",
ressource: "Ressource 2",
},
{
organisation: "Organisation 3",
dataset: "Dataset 3",
ressource: "Ressource 3",
},
{
organisation: "Organisation 4",
dataset: "Dataset 4",
ressource: "Ressource 4",
},
{
organisation: "Organisation 1",
dataset: "Dataset 1",
ressource: "Ressource 1",
},
{
organisation: "Organisation 2",
dataset: "Dataset 2",
ressource: "Ressource 2",
},
{
organisation: "Organisation 3",
dataset: "Dataset 3",
ressource: "Ressource 3",
},
{
organisation: "Organisation 4",
dataset: "Dataset 4",
ressource: "Ressource 4",
},
{
organisation: "Organisation 1",
dataset: "Dataset 1",
ressource: "Ressource 1",
},
{
organisation: "Organisation 2",
dataset: "Dataset 2",
ressource: "Ressource 2",
},
{
organisation: "Organisation 3",
dataset: "Dataset 3",
ressource: "Ressource 3",
},
{
organisation: "Organisation 4",
dataset: "Dataset 4",
ressource: "Ressource 4",
},
{
organisation: "organisation2",
dataset: "dataset2",
ressource: "ressource2",
organisation: "Organisation 1",
dataset: "Dataset 1",
ressource: "Ressource 1",
},
{
organisation: "organisation3",
dataset: "dataset3",
ressource: "ressource3",
organisation: "Organisation 2",
dataset: "Dataset 2",
ressource: "Ressource 2",
},
{
organisation: "organisation4",
dataset: "dataset4",
ressource: "ressource4",
organisation: "Organisation 3",
dataset: "Dataset 3",
ressource: "Ressource 3",
},
{
organisation: "Organisation 4",
dataset: "Dataset 4",
ressource: "Ressource 4",
},
{
organisation: "Organisation 1",
dataset: "Dataset 1",
ressource: "Ressource 1",
},
{
organisation: "Organisation 2",
dataset: "Dataset 2",
ressource: "Ressource 2",
},
{
organisation: "Organisation 3",
dataset: "Dataset 3",
ressource: "Ressource 3",
},
{
organisation: "Organisation 4",
dataset: "Dataset 4",
ressource: "Ressource 4",
},
{
organisation: "Organisation 1",
dataset: "Dataset 1",
ressource: "Ressource 1",
},
{
organisation: "Organisation 2",
dataset: "Dataset 2",
ressource: "Ressource 2",
},
{
organisation: "Organisation 3",
dataset: "Dataset 3",
ressource: "Ressource 3",
},
{
organisation: "Organisation 4",
dataset: "Dataset 4",
ressource: "Ressource 4",
},
{
organisation: "Organisation 1",
dataset: "Dataset 1",
ressource: "Ressource 1",
},
{
organisation: "Organisation 2",
dataset: "Dataset 2",
ressource: "Ressource 2",
},
{
organisation: "Organisation 3",
dataset: "Dataset 3",
ressource: "Ressource 3",
},
{
organisation: "Organisation 4",
dataset: "Dataset 4",
ressource: "Ressource 4",
},
],
pagination: {
currentPage: 1,
pagesize: 15,
start: 0,
end: 15,
},
};
},
computed: {
...mapGetters(["project", "permissions"]),
paginatedRessources() {
return this.ressources.slice(this.pagination.start, this.pagination.end);
},
nbPages() {
let N = Math.ceil(this.ressources.length / this.pagination.pagesize);
const arr = [...Array(N).keys()].map(function (x) {
++x;
return x;
});
return arr;
},
displayedPageEnd() {
return this.ressources.length <= this.pagination.end
? this.ressources.length
: this.pagination.end;
},
},
methods: {
toPage(pageNumber) {
const toAddOrRemove =
(pageNumber - this.pagination.currentPage) * this.pagination.pagesize;
this.pagination.start += toAddOrRemove;
this.pagination.end += toAddOrRemove;
this.pagination.currentPage = pageNumber;
},
toPreviousPage() {
if (this.pagination.start > 0) {
this.pagination.start -= this.pagination.pagesize;
this.pagination.end -= this.pagination.pagesize;
this.pagination.currentPage -= 1;
}
},
toNextPage() {
if (this.pagination.end < this.ressources.length) {
this.pagination.start += this.pagination.pagesize;
this.pagination.end += this.pagination.pagesize;
this.pagination.currentPage += 1;
}
},
},
created() {
......@@ -93,4 +360,82 @@ h1 {
.table > .header {
background-color: #e0e0e0;
}
/* datatables */
.dataTables_length,
.dataTables_filter,
.dataTables_info,
.dataTables_processing,
.dataTables_paginate {
color: #333;
}
.dataTables_info {
clear: both;
float: left;
padding-top: 0.755em;
}
.dataTables_paginate {
float: right;
text-align: right;
padding-top: 0.25em;
}
.dataTables_paginate .paginate_button.current,
.dataTables_paginate .paginate_button.current:hover {
color: #333 !important;
border: 1px solid #979797;
background-color: white;
background: -webkit-gradient(
linear,
left top,
left bottom,
color-stop(0%, #fff),
color-stop(100%, #dcdcdc)
);
background: -webkit-linear-gradient(top, #fff 0%, #dcdcdc 100%);
background: -moz-linear-gradient(top, #fff 0%, #dcdcdc 100%);
background: -ms-linear-gradient(top, #fff 0%, #dcdcdc 100%);
background: -o-linear-gradient(top, #fff 0%, #dcdcdc 100%);
background: linear-gradient(to bottom, #fff 0%, #dcdcdc 100%);
}
.dataTables_paginate .paginate_button {
box-sizing: border-box;
display: inline-block;
min-width: 1.5em;
padding: 0.5em 1em;
margin-left: 2px;
text-align: center;
text-decoration: none !important;
cursor: pointer;
color: #333 !important;
border: 1px solid transparent;
border-radius: 2px;
}
.dataTables_paginate .paginate_button:hover {
color: white !important;
border: 1px solid #111;
background-color: #585858;
background: -webkit-gradient(
linear,
left top,
left bottom,
color-stop(0%, #585858),
color-stop(100%, #111)
);
background: -webkit-linear-gradient(top, #585858 0%, #111 100%);
background: -moz-linear-gradient(top, #585858 0%, #111 100%);
background: -ms-linear-gradient(top, #585858 0%, #111 100%);
background: -o-linear-gradient(top, #585858 0%, #111 100%);
background: linear-gradient(to bottom, #585858 0%, #111 100%);
}
.dataTables_paginate .paginate_button.disabled,
.dataTables_paginate .paginate_button.disabled:hover,
.dataTables_paginate .paginate_button.disabled:active {
cursor: default;
color: #666 !important;
border: 1px solid transparent;
background: transparent;
box-shadow: none;
}
</style>
\ No newline at end of file
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment