Nodum maakt met de sanitizer |datatable gebruik van de plugin van Datatables.net. De saniziter maakt gebruik van de standaardfuncties van DataTables, maar het is uiteraard mogelijk om de tabel zelf te configureren. Omdat de plugin talloze mogelijkheden heeft laten we hier slechts enkele invullingen zien.

De plugin van Datatables is te configureren via een stuk Javascript-code. In dit voorbeeld behandelen we vertalingen van bepaalde velden en het wel of niet weergeven van kolommen in de tabel. Dit doen we op basis van de volgende, handgemaakte tabel:

<table id="Testtabel" class="table table-condensed table-striped">
    <thead>
        <tr>
            <th></th>
            <th>Computer</th>
            <th>Functie</th>
            <th>Leeftijd</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th>Kees</th>
            <td>Apple Macbook Pro</td>
            <td>Programmeur</td>
            <td>27</td>
        </tr>
        <tr>
            <th>Piet</th>
            <td>HP Slimline</td>
            <td>Manager</td>
            <td>46</td>
        </tr>
    </tbody>
</table>

Het id van deze tabel hebben we nodig om de tabel in Javascript aan te roepen. Met onderstaande code roepen we de plugin aan en sorteren we de tabel aflopend op de vierde kolom, leeftijd. Tevens zullen we het aantal resultaten dat in eerste instantie getoond wordt beperken tot 10 en de stappen aangeven met hoeveel resultaten deze filtering moet kunnen worden aangepast.

$('#Testtabel').DataTable({
    'order': [[ 3, "desc"]],
    'iDisplayLength' : 10,
    'lengthMenu'     : [ 5, 10, 20, 50, 100, 200, 500]
});

Nu we deze instellingen hebben aangepast wordt het tijd om de vertalingen van de tekst in de tabel aan te pakken. Het is binnen een datatable niet mogelijk om gebruik te maken van de vertaalmodule binnen nodum. Wel zijn er via de website van DataTables voorbeelden beschikbaar om complete vertaalpakketten te implementeren. Om toch de vrije hand te behouden in de te vertalen velden en de vertalingen gaan we het hier nog met de hand inrichten. We beginnen met de rij aan de bovenkant van de tabel, met het aantal weer te geven resultaten en de zoekfunctie.

$('#Testtabel').DataTable({
    'order': [[ 3, "desc"]],
    'iDisplayLength' : 10,
    'lengthMenu'     : [ 5, 10, 20, 50, 100, 200, 500],
    'language'       : {
        'sLengthMenu'     : 'Toon _MENU_ resultaten',
        'sSearch'         : 'Zoeken: '
                        }
});

De bovenste rij is vertaald en dus kunnen we gaan kijken naar de onderste rij, daar waar het aantal getoonde resultaten, het totaal aantal resultaten en de paginatie getoond worden.

$('#Testtabel').DataTable({
    'order': [[ 3, "desc"]],
    'iDisplayLength' : 10,
    'lengthMenu'     : [ 5, 10, 20, 50, 100, 200, 500],
    'language'       : {
        'sLengthMenu'     : 'Toon _MENU_ resultaten',
        'sSearch'         : 'Zoeken: ',
        'sInfo'           : '_START_ van _END_ van in totaal _TOTAL_ resultaten.',
        'oPaginate'       : {
                                'sFirst'    : 'Eerste',
                                'sLast'     : 'Laatste',
                                'sNext'     : 'Volgende',
                                'sPrevious'  : 'Vorige'
                            }
                        }
});

Alle zichtbare elementen hebben nu een andere waarde gekregen waardoor we de laatste stap in de vertalingen kunnen maken. Hier vertalen we de velden die niet direct zichtbaar zijn, zoals de melding dat er geen gegevens zijn gevonden na een zoekactie of de hoeveelheid gefilterde waarden uit de tabel.

$('#Testtabel').DataTable({
    'order': [[ 3, "desc"]],
    'iDisplayLength' : 10,
    'lengthMenu'     : [ 5, 10, 20, 50, 100, 200, 500],
    'language'       : {
        'sLengthMenu'     : 'Toon _MENU_ resultaten',
        'sSearch'         : 'Zoeken: ',
        'sInfo'           : '_START_ van _END_ van in totaal _TOTAL_ resultaten.',
        'oPaginate'       : {
                                'sFirst'    : 'Eerste',
                                'sLast'     : 'Laatste',
                                'sNext'     : 'Volgende',
                                'sPrevious' : 'Vorige'
                            },
        'sInfoEmpty'      : 'Geen resultaten gevonden',
        'sInfoFiltered'   : ' (gefilterd uit _MAX_ resultaten)',
        'sEmptyTable'     : 'Geen resultaten gevonden in deze tabel',
        'sLoadingRecords' : 'Een moment aub - laden...',
                        }
});

Tot slot maken we de kolom met leeftijden onzichtbaar. We sorteren nog steeds op deze kolom, maar gaan ervoor zorgen dat deze niet doorzoekbaar of vindbaar is. Dit doen we door de zogenaamde columnDefs toe te voegen.

$('#Testtabel').DataTable({
    'order': [[ 3, "desc"]],
    'iDisplayLength' : 10,
    'lengthMenu'     : [ 5, 10, 20, 50, 100, 200, 500],
    'language'       : {
        'sLengthMenu'     : 'Toon _MENU_ resultaten',
        'sSearch'         : 'Zoeken: ',
        'sInfo'           : '_START_ van _END_ van in totaal _TOTAL_ resultaten.',
        'oPaginate'       : {
                                'sFirst'    : 'Eerste',
                                'sLast'     : 'Laatste',
                                'sNext'     : 'Volgende',
                                'sPrevious' : 'Vorige'
                            },
        'sInfoEmpty'      : 'Geen resultaten gevonden',
        'sInfoFiltered'   : ' (gefilterd uit _MAX_ resultaten)',
        'sEmptyTable'     : 'Geen resultaten gevonden in deze tabel',
        'sLoadingRecords' : 'Een moment aub - laden...',
                        },
    'columnDefs'     : [{
                            'targets'     : 3,
                            'searchable'  : false,
                            'visible'     : false
                       }]
});

De columnDefs kunnen natuurlijk ook betrekking hebben op iedere andere kolom naar wens. Voor een uitgebreide handleiding met alle mogelijkheden die DataTables heeft kijk je op https://datatables.net/manual/index.