jQuery Datatables.net zoek verplaatsen van rechts naar links

Vraag:

In het verleden heb ik een website ontwikkeld op basis van HTML, CSS, JS, PHP en MySQL als database. Om data te tonen maak ik gebruik van de gratis jQuery Datatables.net plugin. Deze laad mijn data in een tabelweergave in met ondersteuning voor paginering, sorteren op kolommen en zoeken.

Standaard wordt het aantal records per pagina links getoond en het zoekformulier helemaal rechts. Echter hebben de gebruikers van de website aangegeven dat op kleinere schermen het zoekformulier buiten het beeld valt. Dit komt mede door de vele kolommen in het overzicht. Je moet dan naar links scrollen om te zoeken.

Hoe verplaats je het zoekformulier van rechts naar links zodat het altijd zichtbaar is op ieder scherm?

Antwoord:

De jQuery Datatables.net plugin biedt standaard geen optie om het zoekformulier naar rechts te verplaatsen. Je kan het wel verbergen. Ik heb daarom mijn eigen zoekformulier boven het overzicht toegevoegd. Dit heb ik weer gekoppeld aan de Datatables.net plugin.

Stap 1:

Voeg onderstaande HTML code toe boven het overzicht of op de plek waar het zoekformulier moet komen.

<input type="text" id="data-table-search"></label>

Omdat ik geen submit met het formulier doe zijn er ook geen form tags nodig. Dit inputveld kan je natuurlijk nog voorzien van een label en CSS opmaak.

Stap 2:

Voeg onderstaande JS toe aan het bestand waarin je ook de Datatables.net plugin configureert. Op deze manier houd je alle JS code bij elkaar

$('#data-table-search').on('input', function(){
	table.search($('#data-table-search').val()).draw();
});

Bovenstaande verbind zich via Javascript met het inputveld uit stap 1. Zodra daar iets in verandert wordt de functie table.search() uitgevoerd. Dit is een functie van Datatables.net. Als parameter geef ik de waarde uit het inputveld van stap 1 mee.

Stap 3:

Zorg ervoor dat jouw Datatables.net implementatie minimaal de onderstaande configuratie heeft.

var table = $('#bootstrap-data-table-export').DataTable({
	searching: true,
	dom: 'lrtp',
	order: [],
});

Belangrijk is dat de de configuratie als resultaat aan de variabele table gegeven wordt. Deze moet uniek zijn. Heb je deze naam al gebruikt? Gebruik dan een andere naam en pas dat ook aan in de JS code uit stap 2.

De instelling searching: true zorgt ervoor dat er gezocht mag worden in de records. De instelling dom: ‘lrt’ zorgt ervoor dat het zoekformulier aan de rechterkant verborgen wordt. Natuurlijk kan je beiden zoekformulieren gebruiken.

Stap 4:

Test de wijzigingen.

Bonus:

Ik gebruik zelf onderstaande JS configuratie. Hierin zitten de opties voor het aantal records per pagina en Nederlandse vertalingen.

var table = $('#bootstrap-data-table-export').DataTable({
	lengthMenu: [[10, 25, 50, -1], [10, 25, 50, "Alles"]],
	searching: true,
	dom: 'lrtp',
	order: [],
	buttons: ['copy', 'csv', 'excel', 'pdf', 'print'],
	"language": {
		search: "Zoeken",
		sLengthMenu: "Toon _MENU_ records",
		sInfoEmpty: "Geen records",
		sInfo: "Toon _START_ tot _END_ van _TOTAL_ records",
		sInfoFiltered: "(totaal _MAX_ records)",
		"paginate": {
			sNext: "Volgende",
			sPrevious: "Vorige",
		}
	}
});

Antwoord getest op:

Maatwerk applicatie met Datatables.net versie 1.11.4

Laat een reactie achter

Your email address will not be published. Required fields are marked *

Deze site gebruikt Akismet om spam te verminderen. Bekijk hoe je reactie-gegevens worden verwerkt.