...
 
Commits (9)
......@@ -42,7 +42,7 @@ class MembreAPIController extends MasterAPIController
{
// defaults
$paginate = ($request->query->get('step') !== null) ? $request->query->get('step') : 10;
$start = ($request->query->get('start') !== null) ? $request->query->get('start') : 1;
$start = ($request->query->get('page') !== null) ? $request->query->get('page') : 1;
$column = ($request->query->get('column') !== null) ? $request->query->get('column') : 'id';
$order = ($request->query->get('order') !== null) ? $request->query->get('order') : 'ASC';
......
{% extends "@Asso/layout.html.twig" %}
{% block title %}
Liste des membres (Ajax)
Liste des membres
{% endblock %}
{% block menu %}
......@@ -42,8 +42,8 @@
{{ form_start(formMembre) }}
{{ form_errors(formMembre) }}
{{ form_row(formMembre.nom) }}
{{ form_row(formMembre.prenom) }}
{{ form_row(formMembre.nom) }}
{{ form_row(formMembre.email) }}
{{ form_row(formMembre.association) }}
<hr>
......@@ -64,10 +64,10 @@
<a href="javascript: void(0);" id="id" class="btn-sort">#</a>
</th>
<th scope="col">
<a href="javascript: void(0);" id="firstname" class="btn-sort">Prénom</a>
<a href="javascript: void(0);" id="prenom" class="btn-sort">Prénom</a>
</th>
<th scope="col">
<a href="javascript: void(0);" id="lastname" class="btn-sort">Nom</a>
<a href="javascript: void(0);" id="nom" class="btn-sort">Nom</a>
</th>
<th scope="col">
<a href="javascript: void(0);" id="email" class="btn-sort">Email</a>
......@@ -84,6 +84,31 @@
</tbody>
</table>
<nav id="pagenav" aria-label="page navigation membre">
<ul class="pagination justify-content-center">
{#
<li class="page-item disabled">
<span class="page-link">Précédent</span>
</li>
<li class="page-item">
<a class="page-link" href="#">1</a>
</li>
<li class="page-item active">
<span class="page-link">2
<span class="sr-only">(current)</span>
</span>
</li>
<li class="page-item">
<a class="page-link" href="#">3</a>
</li>
<li class="page-item">
<a class="page-link" href="#">Suivant</a>
</li>
#}
</ul>
</nav>
{% endblock %}
{% block customJS %}
......@@ -96,7 +121,7 @@
let table = document.querySelector('table#maintab.membres');
let tbody = table.querySelector('tbody');
let paginate = { 'step': 10, 'page': 1, 'col': 'id', 'order': 'DESC' };
let paginate = { 'step': 10, 'page': 1, 'column': 'id', 'order': 'DESC' };
/*
* Recharge la table
......@@ -104,10 +129,11 @@
function reloadTableMembre(paginate)
{
//console.log(paginate);
tbody.innerHTML = null;
let membreURL = Routing.generate('api_membre_read_paginate', paginate);
tbody.innerHTML = null;
AJAX('GET', membreURL, function(request)
{
let json = JSON.parse(request.responseText);
......@@ -175,6 +201,7 @@
let membreId = this.dataset.membreId;
let r = confirm('Effacer le membre n°' + membreId
+ '\nCette action n\'est pas réversible. Souhaitez-vous continuer ?\n');
if (r === true) {
submitURL = Routing.generate('api_membre_delete', {'id': membreId });
AJAX('DELETE', submitURL, function()
......@@ -189,6 +216,48 @@
tbody.appendChild(tr);
}
/*
* Pagenav, pagination par page
*/
let pageNav = document.querySelector('nav#pagenav ul.pagination');
AJAX('GET', Routing.generate('api_membre_read_paginate'), function(request)
{
pageNav.innerHTML = null;
let json = JSON.parse(request.responseText);
let total = json.length;
let perPage = paginate.step;
if (total > perPage)
{
let nbPages = Math.ceil(total / perPage);
currentPage = paginate.page;
for (let i = 1; i <= nbPages; i++)
{
let pageItem = document.createElement('li');
pageItem.classList.add('page-item', (i === currentPage) ? 'active' : null);
let pageItemChild = document.createElement((i === currentPage) ? 'span' : 'a');
pageItemChild.classList.add('page-link');
pageItemChild.textContent = i;
if (i !== currentPage)
{
pageItemChild.addEventListener('click', function(e)
{
paginate.page = i;
reloadTableMembre(paginate);
});
}
pageItem.appendChild(pageItemChild);
pageNav.appendChild(pageItem);
}
}
});
});
}
reloadTableMembre(paginate);
......@@ -248,14 +317,10 @@
let stepform = document.querySelector('form#pagination select');
stepform.addEventListener('change', function(e)
{
step = (this.value === '-1') ? 10 : this.value;
paginate.step = step;
console.log(paginate);
paginate.step = parseInt(step);
paginate.page = 1;
reloadTableMembre(paginate);
console.log('change step='+ step);
});
/*
......@@ -276,7 +341,7 @@
}
});
paginate.col = col;
paginate.column = col;
paginate.order = (paginate.order === 'ASC') ? 'DESC' : 'ASC';
reloadTableMembre(paginate);
......@@ -288,6 +353,5 @@
});
});
</script>
{% endblock %}
......@@ -80,7 +80,7 @@
<h1>{{ block('title') }}</h1>
<div class="foslogin">
<div class="foslogin">
{% if app.request.hasPreviousSession %}
{% for type, messages in app.session.flashbag.all() %}
{% for message in messages %}
......@@ -95,8 +95,6 @@
{% endblock fos_user_content %}
</div>
{% endblock %}
</section>
......
@import url('https://fonts.googleapis.com/css?family=Open+Sans');
@import url('https://fonts.googleapis.com/css?family=Averia+Sans+Libre:300i,400i');
a.page-link,
a {
text-decoration: none;
color: #434265;
}
a.page-link:hover,
a:hover {
color: #72719c;
}
......@@ -307,3 +310,8 @@ form#pagination {
margin-top: 1em;
width: 160px;
}
.pagination li.page-item.active span.page-link {
background: #343a40;
border-color: #343a40;
}