Sort tables
This commit is contained in:
parent
d23aa7f0ec
commit
188eadc4c1
15
index.html
15
index.html
@ -28,7 +28,10 @@
|
||||
</nav>
|
||||
<table class="table table-striped" v-if="series.length > 0">
|
||||
<tr>
|
||||
<th>Nom</th>
|
||||
<th>
|
||||
<a href="#" @click="sortBy('name')">Nom</a>
|
||||
<span v-if="sort_by == 'name'" :class="['glyphicon', { 'glyphicon-chevron-up': order_desc , 'glyphicon-chevron-down': !order_desc}]"></span>
|
||||
</th>
|
||||
<th>Livre(s)</th>
|
||||
<th>Auteur(s)</th>
|
||||
</tr>
|
||||
@ -48,7 +51,10 @@
|
||||
</table>
|
||||
<table class="table table-striped" v-if="authors.length > 0">
|
||||
<tr>
|
||||
<th>Nom</th>
|
||||
<th>
|
||||
<a href="#" @click="sortBy('name')">Nom</a>
|
||||
<span v-if="sort_by == 'name'" :class="['glyphicon', { 'glyphicon-chevron-up': order_desc , 'glyphicon-chevron-down': !order_desc}]"></span>
|
||||
</th>
|
||||
<th>Livre(s)</th>
|
||||
</tr>
|
||||
<tr v-for="author in authors">
|
||||
@ -61,7 +67,10 @@
|
||||
</table>
|
||||
<table class="table table-striped" v-if="books.length > 0">
|
||||
<tr>
|
||||
<th>Titre</th>
|
||||
<th>
|
||||
<a href="#" @click="sortBy('title')">Nom</a>
|
||||
<span v-if="sort_by == 'title'" :class="['glyphicon', { 'glyphicon-chevron-up': order_desc , 'glyphicon-chevron-down': !order_desc}]"></span>
|
||||
</th>
|
||||
<th>Auteur(s)</th>
|
||||
<th>Serie</th>
|
||||
</tr>
|
||||
|
69
index.js
69
index.js
@ -6,7 +6,9 @@ var app = new Vue({
|
||||
series: [],
|
||||
booksCount: 0,
|
||||
page: 1,
|
||||
perpage: 20
|
||||
perpage: 20,
|
||||
sort_by: null,
|
||||
order_desc: false
|
||||
},
|
||||
methods: {
|
||||
sendQuery: function(url, error, success) {
|
||||
@ -52,19 +54,21 @@ var app = new Vue({
|
||||
seriesSuccess: function(resp) {
|
||||
this.series = resp;
|
||||
},
|
||||
prevPage: function() {
|
||||
if (this.page > 1) {
|
||||
this.page--;
|
||||
if (this.books.length > 0)
|
||||
this.loadBooks();
|
||||
if (this.authors.length > 0)
|
||||
this.loadAuthors();
|
||||
if (this.series.length > 0)
|
||||
this.loadSeries();
|
||||
sortBy: function(col) {
|
||||
if (this.sort_by == col) {
|
||||
if (this.order_desc) {
|
||||
this.order_desc = false;
|
||||
this.sort_by = null;
|
||||
} else {
|
||||
this.order_desc = true;
|
||||
}
|
||||
} else {
|
||||
this.order_desc = false;
|
||||
this.sort_by = col;
|
||||
}
|
||||
this.reload();
|
||||
},
|
||||
nextPage: function() {
|
||||
this.page++;
|
||||
reload: function() {
|
||||
if (this.books.length > 0)
|
||||
this.loadBooks();
|
||||
if (this.authors.length > 0)
|
||||
@ -72,23 +76,48 @@ var app = new Vue({
|
||||
if (this.series.length > 0)
|
||||
this.loadSeries();
|
||||
},
|
||||
prevPage: function() {
|
||||
if (this.page > 1) {
|
||||
this.page--;
|
||||
this.reload();
|
||||
}
|
||||
},
|
||||
nextPage: function() {
|
||||
this.page++;
|
||||
this.reload();
|
||||
},
|
||||
order: function(query) {
|
||||
if (this.order_desc)
|
||||
return query + '&order=desc';
|
||||
return query;
|
||||
},
|
||||
sort: function(query) {
|
||||
if (this.sort_by)
|
||||
return query + '&sort=' + this.sort_by;
|
||||
return query;
|
||||
},
|
||||
paginate: function(query) {
|
||||
return query + '?page=' + this.page + '&perpage=' + this.perpage;
|
||||
},
|
||||
params: function(url) {
|
||||
return this.order(this.sort(this.paginate(url)));
|
||||
},
|
||||
loadAuthors: function() {
|
||||
this.sendQuery('cgi-bin/bouquins/authors?page=' + this.page + '&perpage=' + this.perpage,
|
||||
this.stdError, this.authorsSuccess);
|
||||
this.sendQuery(this.params('cgi-bin/bouquins/authors'), this.stdError, this.authorsSuccess);
|
||||
},
|
||||
loadBooks: function() {
|
||||
this.sendQuery('cgi-bin/bouquins/books?page=' + this.page + '&perpage=' + this.perpage,
|
||||
this.stdError, this.booksSuccess);
|
||||
this.sendQuery(this.params('cgi-bin/bouquins/books'), this.stdError, this.booksSuccess);
|
||||
},
|
||||
loadSeries: function() {
|
||||
this.sendQuery('cgi-bin/bouquins/series?page=' + this.page + '&perpage=' + this.perpage,
|
||||
this.stdError, this.seriesSuccess);
|
||||
this.sendQuery(this.params('cgi-bin/bouquins/series'), this.stdError, this.seriesSuccess);
|
||||
},
|
||||
showSeries: function() {
|
||||
this.books = [];
|
||||
this.authors = [];
|
||||
this.page = 1;
|
||||
this.perpage = 20;
|
||||
this.order_desc = false;
|
||||
this.sort_by = null;
|
||||
this.loadSeries();
|
||||
},
|
||||
showAuthors: function() {
|
||||
@ -96,6 +125,8 @@ var app = new Vue({
|
||||
this.series = [];
|
||||
this.page = 1;
|
||||
this.perpage = 20;
|
||||
this.order_desc = false;
|
||||
this.sort_by = null;
|
||||
this.loadAuthors();
|
||||
},
|
||||
showBooks: function() {
|
||||
@ -103,6 +134,8 @@ var app = new Vue({
|
||||
this.series = [];
|
||||
this.page = 1;
|
||||
this.perpage = 20;
|
||||
this.order_desc = false;
|
||||
this.sort_by = null;
|
||||
this.loadBooks();
|
||||
}
|
||||
},
|
||||
|
Loading…
Reference in New Issue
Block a user