@osimatic/helpers-js 1.5.3 → 1.5.5

package/multiple_action_in_table.js

@@ -5,19 +5,20 @@ class MultipleActionInTable {
 	// Idempotent : sans effet si les colonnes existent déjà.
 	// Doit être appelé AVANT l'initialisation DataTable.
 	static initCols(table, cellSelector = 'select') {
-		if (!table.hasClass('table-action_multiple')) {
+		if (!table.classList.contains('table-action_multiple')) {
 			return;
 		}
 		if (MultipleActionInTable.getDivBtn(table) == null) {
 			return;
 		}
 
-		if (table.find('thead tr th[data-key="select"]').length === 0) {
-			table.find('thead tr').prepend($('<th class="' + cellSelector + '" data-key="select"></th>'));
+		const theadTr = table.querySelector('thead tr');
+		if (theadTr && !theadTr.querySelector('th[data-key="select"]')) {
+			theadTr.insertAdjacentHTML('afterbegin', '<th class="' + cellSelector + '" data-key="select"></th>');
 		}
-		table.find('tbody tr:not(.no_items)').each(function(idx, tr) {
-			if ($(tr).find('td.select').length === 0) {
-				$(tr).prepend($('<td class="select"><input type="checkbox" class="action_multiple_checkbox" name="' + $(tr).data('action_multiple_input_name') + '" value="' + $(tr).data('action_multiple_item_id') + '"></td>'));
+		table.querySelectorAll('tbody tr:not(.no_items)').forEach(tr => {
+			if (!tr.querySelector('td.select')) {
+				tr.insertAdjacentHTML('afterbegin', '<td class="select"><input type="checkbox" class="action_multiple_checkbox" name="' + tr.dataset.action_multiple_input_name + '" value="' + tr.dataset.action_multiple_item_id + '"></td>');
 			}
 		});
 	}
@@ -27,7 +28,7 @@ class MultipleActionInTable {
 	static init(table, options = {}) {
 		const { cellSelector = 'select', imgArrow = '' } = options;
 
-		if (!table.hasClass('table-action_multiple')) {
+		if (!table.classList.contains('table-action_multiple')) {
 			return;
 		}
 
@@ -38,33 +39,36 @@ class MultipleActionInTable {
 
 		MultipleActionInTable.initCols(table, cellSelector);
 
-		if (!divBtn.hasClass('action_multiple_buttons_initialized')) {
-			divBtn.prepend($('<img src="'+imgArrow+'" alt="" /> &nbsp;'));
-			divBtn.append($('<br/><br/>'));
-			divBtn.addClass('action_multiple_buttons_initialized');
+		if (!divBtn.classList.contains('action_multiple_buttons_initialized')) {
+			divBtn.insertAdjacentHTML('afterbegin', '<img src="'+imgArrow+'" alt="" /> &nbsp;');
+			divBtn.insertAdjacentHTML('beforeend', '<br/><br/>');
+			divBtn.classList.add('action_multiple_buttons_initialized');
 		}
 
-		let firstTh = table.find('thead tr th').first();
-		if (firstTh.find('input').length === 0) {
-			firstTh.html('<input type="checkbox" class="action_multiple_check_all" />');
+		const firstTh = table.querySelector('thead tr th');
+		if (firstTh && !firstTh.querySelector('input')) {
+			firstTh.innerHTML = '<input type="checkbox" class="action_multiple_check_all" />';
 		}
 
-		table.find('input.action_multiple_checkbox').change(function() {
-			MultipleActionInTable.updateCheckbox(table);
+		table.querySelectorAll('input.action_multiple_checkbox').forEach(cb => {
+			cb.addEventListener('change', () => {
+				MultipleActionInTable.updateCheckbox(table);
+			});
 		});
 
-		table.find('input.action_multiple_check_all').off('click').click(function() {
-			let table = $(this).closest('table');
-			let checkbox = table.find('input.action_multiple_checkbox');
-			let checkboxChecked = table.find('input.action_multiple_checkbox:checked');
-			if (checkbox.length === checkboxChecked.length) {
-				checkbox.prop('checked', false);
-			}
-			else {
-				checkbox.prop('checked', true);
-			}
-			MultipleActionInTable.updateCheckbox(table);
-		});
+		const checkAll = table.querySelector('input.action_multiple_check_all');
+		if (checkAll) {
+			const checkAllClone = checkAll.cloneNode(true);
+			checkAll.parentElement.replaceChild(checkAllClone, checkAll);
+			checkAllClone.addEventListener('click', function() {
+				const t = this.closest('table');
+				const checkboxes = t.querySelectorAll('input.action_multiple_checkbox');
+				const checked = t.querySelectorAll('input.action_multiple_checkbox:checked');
+				const newState = checkboxes.length !== checked.length;
+				checkboxes.forEach(cb => { cb.checked = newState; });
+				MultipleActionInTable.updateCheckbox(t);
+			});
+		}
 
 		MultipleActionInTable.updateCheckbox(table);
 	}
@@ -72,60 +76,62 @@ class MultipleActionInTable {
 	static updateCheckbox(table) {
 		MultipleActionInTable.showButtonsAction(table);
 
-		let allCheckbox = table.find('input.action_multiple_checkbox');
-		let allCheckboxChecked = table.find('input.action_multiple_checkbox:checked');
-		let checkboxSelectAll = table.find('thead tr th input.action_multiple_check_all');
+		const allCheckbox = table.querySelectorAll('input.action_multiple_checkbox');
+		const allCheckboxChecked = table.querySelectorAll('input.action_multiple_checkbox:checked');
+		const checkboxSelectAll = table.querySelector('thead tr th input.action_multiple_check_all');
 
-		if (allCheckbox.length === 0) {
-			checkboxSelectAll.addClass('hide');
+		if (!checkboxSelectAll) {
 			return;
 		}
 
-		checkboxSelectAll.removeClass('hide');
-		if (allCheckbox.length === allCheckboxChecked.length) {
-			checkboxSelectAll.prop('checked', true);
-		}
-		else {
-			checkboxSelectAll.prop('checked', false);
+		if (allCheckbox.length === 0) {
+			checkboxSelectAll.classList.add('hide');
+			return;
 		}
+
+		checkboxSelectAll.classList.remove('hide');
+		checkboxSelectAll.checked = allCheckbox.length === allCheckboxChecked.length;
 	}
 
 	static getDivBtn(table) {
-		let divTableResponsive = table.parent();
-		let divBtn = divTableResponsive.next();
-		if (divBtn.hasClass('action_multiple_buttons')) {
+		const divTableResponsive = table.parentElement;
+		let divBtn = divTableResponsive.nextElementSibling;
+		if (divBtn && divBtn.classList.contains('action_multiple_buttons')) {
 			return divBtn;
 		}
-		divBtn = divTableResponsive.parent().parent().parent().next();
-		if (divBtn.hasClass('action_multiple_buttons')) {
+		divBtn = divTableResponsive.parentElement?.parentElement?.parentElement?.nextElementSibling;
+		if (divBtn && divBtn.classList.contains('action_multiple_buttons')) {
 			return divBtn;
 		}
 		return null;
 	}
 
 	static showButtonsAction(table) {
-		let divBtn = MultipleActionInTable.getDivBtn(table);
+		const divBtn = MultipleActionInTable.getDivBtn(table);
 		if (divBtn == null) {
 			return;
 		}
 
-		// console.log(divBtn);
-		//var nbItems = $('input[name="' + checkbox.attr('name') + '"]:checked').length;
-		let nbItems = table.find('input.action_multiple_checkbox:checked').length;
+		const nbItems = table.querySelectorAll('input.action_multiple_checkbox:checked').length;
+		const isHidden = divBtn.classList.contains('hide');
+		const isVisible = !isHidden;
 
-		if (nbItems > 0 && divBtn.is(':hidden')) {
-			divBtn.removeClass('hide');
+		if (nbItems > 0 && isHidden) {
+			divBtn.classList.remove('hide');
 		}
 		// 13/04/2021 : si le tableau est caché cela veut dire qu'il est en train de s'initialiser (après avoir chargé les données) et donc s'il n'y a pas de ligne sélectionnées, on cache la div buttons
-		else if ((nbItems === 0 && divBtn.is(':visible')) || (nbItems === 0 && table.is(':hidden'))) {
-			divBtn.addClass('hide');
+		else if ((nbItems === 0 && isVisible) || (nbItems === 0 && table.classList.contains('hide'))) {
+			divBtn.classList.add('hide');
 		}
 
 		// affichage aucune action possible si aucun bouton n'est visible
-		if (divBtn.is(':visible')) {
-			divBtn.find('span.no_button').remove();
-			if (divBtn.find('button:visible, a:visible').length === 0) {
-				divBtn.find('img').after('<span class="no_button"><em>aucune action possible</em></span>');
+		if (!divBtn.classList.contains('hide')) {
+			divBtn.querySelectorAll('span.no_button').forEach(el => el.remove());
+			if (divBtn.querySelectorAll('button:not(.hide), a:not(.hide)').length === 0) {
+				const img = divBtn.querySelector('img');
+				if (img) {
+					img.insertAdjacentHTML('afterend', '<span class="no_button"><em>aucune action possible</em></span>');
+				}
 			}
 		}
 	}
@@ -142,46 +148,49 @@ class MultipleActionInDivList {
 			return;
 		}
 
-		buttonsDiv.addClass('hide');
+		buttonsDiv.classList.add('hide');
 
 		// Si aucune div sélectionnable, on n'applique pas le plugin
-		if (!contentDiv.find('.multiple_action').length) {
+		if (!contentDiv.querySelectorAll('.multiple_action').length) {
 			return;
 		}
 
-		if (!buttonsDiv.data('action_multiple_buttons_initialized')) {
-			buttonsDiv.prepend($('<img src="'+imgArrow+'" alt="" /> &nbsp;'));
-			buttonsDiv.append($('<br/><br/>'));
-			buttonsDiv.data('action_multiple_buttons_initialized', 1);
+		if (!buttonsDiv.dataset.action_multiple_buttons_initialized) {
+			buttonsDiv.insertAdjacentHTML('afterbegin', '<img src="'+imgArrow+'" alt="" /> &nbsp;');
+			buttonsDiv.insertAdjacentHTML('beforeend', '<br/><br/>');
+			buttonsDiv.dataset.action_multiple_buttons_initialized = '1';
 		}
 
 		// Ajout checkbox pour chaque div sélectionnable
-		contentDiv.find('.multiple_action').each(function(idx, div) {
-			if ($(div).find('div.multi_select').length === 0) {
-				$(div).prepend($('<div class="multi_select float-start me-2"><input type="checkbox" class="action_multiple_checkbox" name="'+$(div).data('action_multiple_input_name')+'" value="'+$(div).data('action_multiple_item_id')+'"></div>'));
+		contentDiv.querySelectorAll('.multiple_action').forEach(div => {
+			if (!div.querySelector('div.multi_select')) {
+				div.insertAdjacentHTML('afterbegin', '<div class="multi_select float-start me-2"><input type="checkbox" class="action_multiple_checkbox" name="'+div.dataset.action_multiple_input_name+'" value="'+div.dataset.action_multiple_item_id+'"></div>');
 			}
 		});
 
 		// Ajout checkbox select all
-		if (contentDiv.find('input.action_multiple_check_all').length === 0) {
-			contentDiv.prepend('<p class="mb-2"><input type="checkbox" class="action_multiple_check_all" /> Tout sélectionner</p>');
+		if (!contentDiv.querySelector('input.action_multiple_check_all')) {
+			contentDiv.insertAdjacentHTML('afterbegin', '<p class="mb-2"><input type="checkbox" class="action_multiple_check_all" /> Tout sélectionner</p>');
 		}
 
-		contentDiv.find('input.action_multiple_checkbox').change(function() {
-			MultipleActionInDivList.updateCheckbox(contentDiv);
+		contentDiv.querySelectorAll('input.action_multiple_checkbox').forEach(cb => {
+			cb.addEventListener('change', () => {
+				MultipleActionInDivList.updateCheckbox(contentDiv);
+			});
 		});
 
-		contentDiv.find('input.action_multiple_check_all').off('click').click(function() {
-			let checkbox = contentDiv.find('input.action_multiple_checkbox');
-			let checkboxChecked = contentDiv.find('input.action_multiple_checkbox:checked');
-			if (checkbox.length === checkboxChecked.length) {
-				checkbox.prop('checked', false);
-			}
-			else {
-				checkbox.prop('checked', true);
-			}
-			MultipleActionInDivList.updateCheckbox(contentDiv);
-		});
+		const checkAll = contentDiv.querySelector('input.action_multiple_check_all');
+		if (checkAll) {
+			const checkAllClone = checkAll.cloneNode(true);
+			checkAll.parentElement.replaceChild(checkAllClone, checkAll);
+			checkAllClone.addEventListener('click', function() {
+				const checkboxes = contentDiv.querySelectorAll('input.action_multiple_checkbox');
+				const checked = contentDiv.querySelectorAll('input.action_multiple_checkbox:checked');
+				const newState = checkboxes.length !== checked.length;
+				checkboxes.forEach(cb => { cb.checked = newState; });
+				MultipleActionInDivList.updateCheckbox(contentDiv);
+			});
+		}
 
 		MultipleActionInDivList.updateCheckbox(contentDiv);
 	}
@@ -189,55 +198,57 @@ class MultipleActionInDivList {
 	static updateCheckbox(contentDiv) {
 		MultipleActionInDivList.showButtonsAction(contentDiv);
 
-		let allCheckbox = contentDiv.find('input.action_multiple_checkbox');
-		let allCheckboxChecked = contentDiv.find('input.action_multiple_checkbox:checked');
-		let checkboxSelectAll = contentDiv.find('input.action_multiple_check_all');
+		const allCheckbox = contentDiv.querySelectorAll('input.action_multiple_checkbox');
+		const allCheckboxChecked = contentDiv.querySelectorAll('input.action_multiple_checkbox:checked');
+		const checkboxSelectAll = contentDiv.querySelector('input.action_multiple_check_all');
 
-		if (allCheckbox.length === 0) {
-			checkboxSelectAll.addClass('hide');
+		if (!checkboxSelectAll) {
 			return;
 		}
 
-		checkboxSelectAll.removeClass('hide');
-		if (allCheckbox.length === allCheckboxChecked.length) {
-			checkboxSelectAll.prop('checked', true);
-		}
-		else {
-			checkboxSelectAll.prop('checked', false);
+		if (allCheckbox.length === 0) {
+			checkboxSelectAll.classList.add('hide');
+			return;
 		}
+
+		checkboxSelectAll.classList.remove('hide');
+		checkboxSelectAll.checked = allCheckbox.length === allCheckboxChecked.length;
 	}
 
 	static getButtonsDiv(contentDiv) {
-		let buttonsDiv = contentDiv.next();
-		if (buttonsDiv.hasClass('action_multiple_buttons')) {
+		const buttonsDiv = contentDiv.nextElementSibling;
+		if (buttonsDiv && buttonsDiv.classList.contains('action_multiple_buttons')) {
 			return buttonsDiv;
 		}
 		return null;
 	}
 
 	static showButtonsAction(contentDiv) {
-		let buttonsDiv = MultipleActionInDivList.getButtonsDiv(contentDiv);
+		const buttonsDiv = MultipleActionInDivList.getButtonsDiv(contentDiv);
 		if (buttonsDiv == null) {
 			return;
 		}
 
-		// console.log(divBtn);
-		//var nbItems = $('input[name="' + checkbox.attr('name') + '"]:checked').length;
-		let nbItems = contentDiv.find('input.action_multiple_checkbox:checked').length;
+		const nbItems = contentDiv.querySelectorAll('input.action_multiple_checkbox:checked').length;
+		const isHidden = buttonsDiv.classList.contains('hide');
+		const isVisible = !isHidden;
 
-		if (nbItems > 0 && buttonsDiv.is(':hidden')) {
-			buttonsDiv.removeClass('hide');
+		if (nbItems > 0 && isHidden) {
+			buttonsDiv.classList.remove('hide');
 		}
 		// 13/04/2021 : si le tableau est caché cela veut dire qu'il est en train de s'initialiser (après avoir chargé les données) et donc s'il n'y a pas de ligne sélectionnées, on cache la div buttons
-		else if ((nbItems === 0 && buttonsDiv.is(':visible')) || (nbItems === 0 && contentDiv.is(':hidden'))) {
-			buttonsDiv.addClass('hide');
+		else if ((nbItems === 0 && isVisible) || (nbItems === 0 && contentDiv.classList.contains('hide'))) {
+			buttonsDiv.classList.add('hide');
 		}
 
 		// affichage aucune action possible si aucun bouton n'est visible
-		if (buttonsDiv.is(':visible')) {
-			buttonsDiv.find('span.no_button').remove();
-			if (buttonsDiv.find('button:visible, a:visible').length === 0) {
-				buttonsDiv.find('img').after('<span class="no_button"><em>aucune action possible</em></span>');
+		if (!buttonsDiv.classList.contains('hide')) {
+			buttonsDiv.querySelectorAll('span.no_button').forEach(el => el.remove());
+			if (buttonsDiv.querySelectorAll('button:not(.hide), a:not(.hide)').length === 0) {
+				const img = buttonsDiv.querySelector('img');
+				if (img) {
+					img.insertAdjacentHTML('afterend', '<span class="no_button"><em>aucune action possible</em></span>');
+				}
 			}
 		}
 	}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@osimatic/helpers-js",
-  "version": "1.5.3",
+  "version": "1.5.5",
   "main": "main.js",
   "scripts": {
     "test": "jest",

package/paging.js

@@ -1,146 +1,165 @@
 // Fonction commune de pagination
 //Bootstrap class pagination https://getbootstrap.com/docs/3.3/components/#pagination
 
+const { UrlAndQueryString } = require('./network');
+
 class Pagination {
-	static paginateCards(div, nbItemsPerPage, doublePagination) {
-		Pagination.paginate(div, div.find('.pagination_item'), nbItemsPerPage, undefined, doublePagination);
+	static paginateCards(div, nbItemsPerPage) {
+		Pagination.paginate(div, div.querySelectorAll('.pagination_item'), nbItemsPerPage, null);
 	}
 
-	static paginateTable(table, select, doublePagination) {
-		Pagination.paginate(table, table.find('tbody tr:not(.hide)'), parseInt(table.data('max_rows')), select, doublePagination);
+	static paginateTable(table, select=null) {
+		Pagination.paginate(table, table.querySelectorAll('tbody tr:not(.hide)'), parseInt(table.dataset.max_rows), select);
 	}
 
-	static paginate(div, items, nbItemsPerPage, select, doublePagination) {
+	static paginate(div, items, nbItemsPerPage, select=null, labelDisplayAll=null) {
 		let maxItems = nbItemsPerPage;
 
-		if (typeof div == 'undefined' || !div.length) {
+		if (!div) {
 			return;
 		}
 
-		if (typeof select != 'undefined' && select.length) {
-			if (!select.children().length) {
-				select.append('<option value="0">'+labelDisplayAll+'</option>');
-				let nbRowsList = select.data('nb_rows_list') ? select.data('nb_rows_list').split(',') : [5, 10, 25, 50];
-				$.each(nbRowsList, function(idx, nbRows) {
-					select.append('<option value="'+nbRows+'">'+nbRows+'</option>');
+		if (select != null) {
+			if (!select.children.length) {
+				const opt0 = document.createElement('option');
+				opt0.value = '0';
+				opt0.textContent = labelDisplayAll ?? 'Afficher tout';
+				select.appendChild(opt0);
+
+				const nbRowsList = select.dataset.nb_rows_list ? select.dataset.nb_rows_list.split(',') : [5, 10, 25, 50];
+				nbRowsList.forEach(nbRows => {
+					const opt = document.createElement('option');
+					opt.value = nbRows;
+					opt.textContent = nbRows;
+					select.appendChild(opt);
 				});
 
-				if (select.data('default_nb_rows')) {
-					select.val(select.data('default_nb_rows'))
+				if (select.dataset.default_nb_rows) {
+					select.value = select.dataset.default_nb_rows;
 				}
 			}
 
-			maxItems = parseInt(select.val());
+			maxItems = parseInt(select.value);
 
-			select.change(() => Pagination.paginate(div, items, nbItemsPerPage, select, doublePagination));
+			select.addEventListener('change', () => Pagination.paginate(div, items, nbItemsPerPage, select));
 		}
 
-		const ulPagination = $('ul.pagination');
-		if (doublePagination) {
-			ulPagination.each((index, ul) => $(ul).remove());
-			Pagination.initPaginationDiv(div, ulPagination, true, true); //top
-			Pagination.initPaginationDiv(div, ulPagination, false, true); //bottom
-		} else {
-			Pagination.initPaginationDiv(div, ulPagination, false, false); //bottom
-		}
+		document.querySelectorAll('ul.pagination').forEach(ul => ul.remove());
+		Pagination.initPaginationDiv(div, true);  // top
+		Pagination.initPaginationDiv(div, false); // bottom
 
-		Pagination.initPaginationItems(items, maxItems, doublePagination);
+		Pagination.initPaginationItems(items, maxItems);
 	}
 
-	static initPaginationDiv(div, ulDiv, onTop, doublePagination) {
-		if (!ulDiv.length || doublePagination) {
-			ulDiv = $('<ul class="pagination"></ul>');
-			if (div.find('.pagination_links').length) {
-				(onTop ? div.find('.pagination_links').prepend(ulDiv) : div.find('.pagination_links').append(ulDiv))
+	static initPaginationDiv(div, onTop) {
+		const ul = document.createElement('ul');
+		ul.className = 'pagination';
+
+		const paginationLinks = div.querySelector('.pagination_links');
+		if (paginationLinks) {
+			if (onTop) {
+				paginationLinks.prepend(ul);
+			} else {
+				paginationLinks.appendChild(ul);
+			}
+		} else {
+			if (onTop) {
+				div.before(ul);
 			} else {
-				(onTop ? div.before(ulDiv) : div.after(ulDiv));
+				div.after(ul);
 			}
 		}
 	}
 
-	static initPaginationItems(items, maxItems, doublePagination) {
-		const paginationUl = $('ul.pagination');
+	static initPaginationItems(items, maxItems) {
+		const paginationUls = [...document.querySelectorAll('ul.pagination')];
 
-		let totalItems = items.length;
+		const totalItems = items.length;
 
 		let lineNum = 0;
-		items.each(function () {
+		items.forEach(item => {
 			lineNum++;
 			if (0 === maxItems || lineNum <= maxItems) {
-				$(this).show();
-			}
-			else {
-				$(this).hide();
+				item.style.display = '';
+			} else {
+				item.style.display = 'none';
 			}
 		});
 
-		paginationUl.each((index, ul) => $(ul).find('li').remove());
+		paginationUls.forEach(ul => ul.querySelectorAll('li').forEach(li => li.remove()));
 
 		if (0 === maxItems || totalItems < maxItems) {
-			paginationUl.each((index, ul) => $(ul).addClass('hide'));
+			paginationUls.forEach(ul => ul.classList.add('hide'));
 			return;
 		}
 
-		let nbPages = Math.ceil(totalItems/maxItems);
-		for (let i=1; i <= nbPages; i++) {
-			paginationUl.each((index, ul) => $(ul).append('<li class="page-item" data-page="'+i+'"><a href="#" class="page-link">'+i+'<span class="sr-only">(current)</span></a></li>').show());
+		const nbPages = Math.ceil(totalItems / maxItems);
+		for (let i = 1; i <= nbPages; i++) {
+			paginationUls.forEach(ul => {
+				ul.insertAdjacentHTML('beforeend', '<li class="page-item" data-page="' + i + '"><a href="#" class="page-link">' + i + '<span class="sr-only">(current)</span></a></li>');
+			});
 		}
 
-		paginationUl.each((index, ul) => $(ul).removeClass('hide'));
-		paginationUl.each((index, ul) => $(ul).find('li:first-child').addClass('active'));
-		paginationUl.each((index, ul) => $(ul).find('li').click(function () {
-			paginationUl.each((index, ul) => $(ul).find('li').removeClass('active'));
-
-			let pageNum = $(this).data('page');
-			let trIndex = 0;
-
-			if (doublePagination) {
-				$('li[data-page="' + pageNum + '"]').each((index, li) => $(li).addClass('active'));
-			} else {
-				$(this).addClass('active');
-			}
-
-			items.each(function () {
-				trIndex++;
-				if (trIndex > (maxItems*pageNum) || trIndex <= ((maxItems*pageNum)-maxItems)) {
-					$(this).hide();
-				}
-				else{
-					$(this).show();
-				}
+		paginationUls.forEach(ul => ul.classList.remove('hide'));
+		paginationUls.forEach(ul => {
+			const firstLi = ul.querySelector('li:first-child');
+			if (firstLi) firstLi.classList.add('active');
+		});
+		paginationUls.forEach(ul => {
+			ul.querySelectorAll('li').forEach(li => {
+				li.addEventListener('click', function(e) {
+					e.preventDefault();
+					paginationUls.forEach(ul2 => ul2.querySelectorAll('li').forEach(l => l.classList.remove('active')));
+
+					const pageNum = parseInt(this.dataset.page);
+					let trIndex = 0;
+
+					document.querySelectorAll('li[data-page="' + pageNum + '"]').forEach(l => l.classList.add('active'));
+
+					items.forEach(item => {
+						trIndex++;
+						if (trIndex > (maxItems * pageNum) || trIndex <= ((maxItems * pageNum) - maxItems)) {
+							item.style.display = 'none';
+						} else {
+							item.style.display = '';
+						}
+					});
+				});
 			});
-
-			return false;
-		}));
+		});
 	}
 }
 
 class Navigation {
 	static activateTab(a) {
-		//console.log(a);
-		//a.click();
 		let ulNav = a.closest('.nav');
-		let tabContent = ulNav.parent().find('.tab-content');
-
-		// déselection éventuel des onglets
-		ulNav.find('a.nav-link').each(function(idx, navLink) {
-			$(navLink).removeClass('active');
-			let id = $(navLink).attr('href');
-			if (id.substr(0, 1) === '#') {
-				tabContent.find(id).removeClass('active').removeClass('show');
+		let tabContent = ulNav.parentElement.querySelector('.tab-content');
+
+		ulNav.querySelectorAll('a.nav-link').forEach(navLink => {
+			navLink.classList.remove('active');
+			const id = navLink.getAttribute('href');
+			if (id && id.charAt(0) === '#') {
+				const pane = tabContent.querySelector(id);
+				if (pane) {
+					pane.classList.remove('active');
+					pane.classList.remove('show');
+				}
 			}
 		});
 
-		// sélection de l'onglet correspondant au navLink passé en paramètre
-		a.addClass('active');
-		tabContent.find(a.attr('href')).addClass('active').addClass('show');
+		a.classList.add('active');
+		const targetPane = tabContent.querySelector(a.getAttribute('href'));
+		if (targetPane) {
+			targetPane.classList.add('active');
+			targetPane.classList.add('show');
+		}
 	}
 
 	static showTab(a) {
 		if (typeof bootstrap == 'undefined') {
 			return;
 		}
-		let tab = new bootstrap.Tab(a[0]);
+		let tab = new bootstrap.Tab(a);
 		tab.show();
 	}
 
@@ -180,7 +199,7 @@ function paginationAsList(nbResultatsTotal, nbResultatsParPage, urlPage, nomPara
 
 	// Initialisation du numéro de la page courante
 	//var query = window.location.search.substring(1).query.split("&");
-	
+
 	var url = new URL(currentUrl);
 	var params = url.searchParams;