SPIP/gamutable
SPIP/gamutable
4
0
Fork 0
Code Issues 2 Pull requests Projects Releases Wiki Activity

detail

Browse source
This commit is contained in:
Christophe 2020-03-12 17:24:56 +01:00
parent 0c6f085ce9
commit 8a4cf1991e
2 changed files with 3 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
js/gamutable.es6.js
View file

@ -6,6 +6,7 @@ jQuery(function() {
$('td').css('cursor', 'wait'); $('td').css('cursor', 'wait');
$('a').css('cursor', 'wait'); $('a').css('cursor', 'wait');
let url = $(this).attr('href'); let url = $(this).attr('href');
console.time('Chargement de VueJs APRES Ajax');
$.ajax({ $.ajax({
url: url, url: url,
async: true async: true
@ -216,7 +217,6 @@ let monTableau = {
<tbody> <tbody>
<tr v-for="l in tableau" :key="l.id"> <tr v-for="l in tableau" :key="l.id">
<td v-for="(td,name, i) in l" :key="'td_'+i" :class="[afficher_crayons(name,l.id), name]" v-html="td"> <td v-for="(td,name, i) in l" :key="'td_'+i" :class="[afficher_crayons(name,l.id), name]" v-html="td">
{{td}}
</td> </td>
</tr> </tr>
</tbody> </tbody>

3
js/gamutable.js
View file

@ -16,6 +16,7 @@ jQuery(function () {
$('td').css('cursor', 'wait'); $('td').css('cursor', 'wait');
$('a').css('cursor', 'wait'); $('a').css('cursor', 'wait');
var url = $(this).attr('href'); var url = $(this).attr('href');
console.time('Chargement de VueJs APRES Ajax');
$.ajax({ $.ajax({
url: url, url: url,
async: true async: true
@ -219,7 +220,7 @@ var monTableau = {
this.triProps = []; this.triProps = [];
} }
}, },
template: "\n\t<div>\n\t\t<div class=\"table\">\n\t\t\t<div class=\"gamutable--surTable\">\n\t\t\t\t<select id=\"parPage\" v-model=\"parPageSelect\">\n\t\t\t\t\t<option v-for=\"v in tparpage\" :key=\"v\">{{v}}</option>\n\t\t\t\t</select>\n\t\t\t\t<input type=\"text\" v-model=\"search\" placeholder=\"Rechercher\">\n\t\t\t\t<button class=\"btn\" type=\"button\" @click.stop=\"resetTri()\">R\xE9initialiser les tris des colonnes</button>\n\t\t\t</div>\n\t\t\t<table class=\"table table--zebra\">\n\t\t\t\t<thead>\n\t\t\t\t\t<tr>\n\t\t\t\t\t\t<th v-for=\"(label,head,i) in header\" :key=\"'head_'+i\" :class=\"head\">\n\t\t\t\t\t\t\t<span v-html=\"label\"></span>\n\t\t\t\t\t\t\t<span class=\"iconeTri\">\n\t\t\t\t\t\t\t\t<i class=\"fa fa-sort-asc\" :class=\"ordreActif(head, 'asc')\" aria-hidden=\"true\" @click.stop=\"tri(head,'asc')\"></i>\n\t\t\t\t\t\t\t\t<i class=\"fa fa-sort-desc\":class=\"ordreActif(head, 'desc')\" aria-hidden=\"true\" @click.stop=\"tri(head,'desc')\" ></i>\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t</th>\n\t\t\t\t\t</tr>\n\t\t\t\t</thead>\n\t\t\t\t<tbody>\n\t\t\t\t\t<tr v-for=\"l in tableau\" :key=\"l.id\">\n\t\t\t\t\t\t<td v-for=\"(td,name, i) in l\" :key=\"'td_'+i\" :class=\"[afficher_crayons(name,l.id), name]\" v-html=\"td\">\n\t\t\t\t\t\t\t{{td}}\n\t\t\t\t\t\t</td>\n\t\t\t\t\t</tr>\n\t\t\t\t</tbody>\n\t\t\t</table>\n\t\t\t<div class=\"gamutable--pagination\">\n\t\t\t\t<div>{{table.length}} \xE9l\xE9ments</div>\n\t\t\t\t<div class=\"page-item\">\n\t\t\t\t\t<button type=\"button\" class=\"page-link\" v-if=\"page != 1\" @click=\"page=1\"> Start </button>\n\t\t\t\t\t<button type=\"button\" class=\"page-link\" v-if=\"page != 1\" @click=\"page--\"> Previous </button>\n\t\t\t\t</div>\n\t\t\t\t<div class=\"page-item\">\n\t\t\t\t\t<button type=\"button\" class=\"page-link\" v-for=\"pageNumber in pages.slice(page-1, page+5)\" @click=\"page = pageNumber\"> {{pageNumber}} </button>\n\t\t\t\t</div>\n\t\t\t\t<div class=\"page-item\">\n\t\t\t\t\t<button type=\"button\" @click=\"page++\" v-if=\"page < pages.length\" class=\"page-link\"> Next </button>\n\t\t\t\t\t<button type=\"button\" @click=\"page=pages.length\" v-if=\"page < pages.length\" class=\"page-link\"> Last </button>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t</div>" template: "\n\t<div>\n\t\t<div class=\"table\">\n\t\t\t<div class=\"gamutable--surTable\">\n\t\t\t\t<select id=\"parPage\" v-model=\"parPageSelect\">\n\t\t\t\t\t<option v-for=\"v in tparpage\" :key=\"v\">{{v}}</option>\n\t\t\t\t</select>\n\t\t\t\t<input type=\"text\" v-model=\"search\" placeholder=\"Rechercher\">\n\t\t\t\t<button class=\"btn\" type=\"button\" @click.stop=\"resetTri()\">R\xE9initialiser les tris des colonnes</button>\n\t\t\t</div>\n\t\t\t<table class=\"table table--zebra\">\n\t\t\t\t<thead>\n\t\t\t\t\t<tr>\n\t\t\t\t\t\t<th v-for=\"(label,head,i) in header\" :key=\"'head_'+i\" :class=\"head\">\n\t\t\t\t\t\t\t<span v-html=\"label\"></span>\n\t\t\t\t\t\t\t<span class=\"iconeTri\">\n\t\t\t\t\t\t\t\t<i class=\"fa fa-sort-asc\" :class=\"ordreActif(head, 'asc')\" aria-hidden=\"true\" @click.stop=\"tri(head,'asc')\"></i>\n\t\t\t\t\t\t\t\t<i class=\"fa fa-sort-desc\":class=\"ordreActif(head, 'desc')\" aria-hidden=\"true\" @click.stop=\"tri(head,'desc')\" ></i>\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t</th>\n\t\t\t\t\t</tr>\n\t\t\t\t</thead>\n\t\t\t\t<tbody>\n\t\t\t\t\t<tr v-for=\"l in tableau\" :key=\"l.id\">\n\t\t\t\t\t\t<td v-for=\"(td,name, i) in l\" :key=\"'td_'+i\" :class=\"[afficher_crayons(name,l.id), name]\" v-html=\"td\">\n\t\t\t\t\t\t</td>\n\t\t\t\t\t</tr>\n\t\t\t\t</tbody>\n\t\t\t</table>\n\t\t\t<div class=\"gamutable--pagination\">\n\t\t\t\t<div>{{table.length}} \xE9l\xE9ments</div>\n\t\t\t\t<div class=\"page-item\">\n\t\t\t\t\t<button type=\"button\" class=\"page-link\" v-if=\"page != 1\" @click=\"page=1\"> Start </button>\n\t\t\t\t\t<button type=\"button\" class=\"page-link\" v-if=\"page != 1\" @click=\"page--\"> Previous </button>\n\t\t\t\t</div>\n\t\t\t\t<div class=\"page-item\">\n\t\t\t\t\t<button type=\"button\" class=\"page-link\" v-for=\"pageNumber in pages.slice(page-1, page+5)\" @click=\"page = pageNumber\"> {{pageNumber}} </button>\n\t\t\t\t</div>\n\t\t\t\t<div class=\"page-item\">\n\t\t\t\t\t<button type=\"button\" @click=\"page++\" v-if=\"page < pages.length\" class=\"page-link\"> Next </button>\n\t\t\t\t\t<button type=\"button\" @click=\"page=pages.length\" v-if=\"page < pages.length\" class=\"page-link\"> Last </button>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t</div>"
}; };
var app = new Vue({ var app = new Vue({
el: '#app', el: '#app',