dumas_gestion/mondumas/templates/members.pt

<metal:block use-macro="main_template">
<div metal:fill-slot="content">

    <p><a class="btn btn-success" role="button" href="${request.route_url('member_edit', mbr_id=0)}">
                    <span class="glyphicon glyphicon-plus"></span> Thêm HV</a></p>
                    
<table id="members" class="table table-striped table-bordered">
    <thead>
        <tr>
          <th>Nom Prénom</th>
          <th>Civ.</th>
          <th>Email</th>
          <th>Ville</th>
          <th>Statut</th>
          <th>Pháp danh</th>
          <th>Etat</th>          
          <th>No ID</th>          
        </tr>
    </thead>
</table>

<script type="text/javascript">
	var dataSet = ${dt_data};
	
	$(document).ready(function() {
		$('#members').DataTable({
			data: dataSet,
			pageLength: 100,
            // traduction en français de l'interface
            language: {
                processing:     "Traitement en cours...",
                search:         "Rechercher&nbsp;:",
                lengthMenu:    "Afficher _MENU_ &eacute;l&eacute;ments",
                info:           "Affichage de l'&eacute;lement _START_ &agrave; _END_ sur _TOTAL_ &eacute;l&eacute;ments",
                infoEmpty:      "Affichage de l'&eacute;lement 0 &agrave; 0 sur 0 &eacute;l&eacute;ments",
                infoFiltered:   "(filtr&eacute; de _MAX_ &eacute;l&eacute;ments au total)",
                infoPostFix:    "",
                loadingRecords: "Chargement en cours...",
                zeroRecords:    "Aucun &eacute;l&eacute;ment &agrave; afficher",
                emptyTable:     "Aucune donnée disponible dans le tableau",
                paginate: {
                    first:      "Premier",
                    previous:   "Pr&eacute;c&eacute;dent",
                    next:       "Suivant",
                    last:       "Dernier"
                },
                aria: {
                    sortAscending:  ": activer pour trier la colonne par ordre croissant",
                    sortDescending: ": activer pour trier la colonne par ordre décroissant"
                }
            },
            columnDefs: [
                { className: "text-center", "targets": [5,6] },
                { "targets": 7,
                    "render": function (data, type, full, meta) {
                    // ajouter un link vers le formulaire
                    return '<a class="btn btn-primary btn-sm" role="button" href="/member_view/' + 
                            data + '"><span class="glyphicon glyphicon-chevron-right"></span> ' + data + '</a>';
                    },
                },  
				{ "targets": 4,
					"render": function (data, type, full, meta) {
					// colorier la cellule en rouge ou vert selon son contenu
					if (parseInt(data) > 10) {
						return '<span class="text-danger">' + data + '</span>';
						}
					else {
						return '<span class="text-success">' + data + '</span>';
						}
					},
				}
            ]   
        });

    });
</script>

<br>
<br>

</div><!-- content -->
</metal:block>