WebSVN – ALCASAR – Diff – /web/admin/auth_users.php

 <link rel="stylesheet" href="<?php echo ALCASAR_ADMIN_PATH_CSS; ?>/default/default.css" type="text/css">
 <!-- include JQUERY UI CSS -->
 <link type="text/css"  rel="stylesheet" href="<?php echo ALCASAR_ADMIN_PATH_CSS; ?>/default/ui-lightness/jquery-ui-1.8.10.custom.css">
 <!-- include tablesorter CSS -->
 <link type="text/css"  rel="stylesheet" href="<?php echo ALCASAR_ADMIN_PATH_CSS; ?>/default/tablesorter-blue/style.css">
+<link type="text/css"  rel="stylesheet" href="<?php echo ALCASAR_ADMIN_PATH_CSS; ?>/default/datatables/css/demo_table.css">
 <!-- include custom page CSS -->
 <style type="text/css">
 	div#users-contain { width: 450px; margin: 20px 0; }
 	div#users-contain table { margin: 1em 0; border-collapse: collapse; width: 100%; }
 	div#users-contain table td, div#users-contain table th { border: 1px solid #eee; padding: .6em 10px; text-align: left; }
 	div#users-contain table th { ui-widget-header }
+	.dataTables_filter {
+    float: left;
+    text-align: left;
+    width: 220px;
+}
 </style>
 <!-- include JQUERY -->
-<script type="text/javascript" src="<?php echo ALCASAR_ADMIN_PATH_JS; ?>/jquery-1.5.min.js"></script>
+<script type="text/javascript" language="javascript" src="<?php echo ALCASAR_ADMIN_PATH_JS; ?>/jquery-1.5.min.js"></script>
 <!-- include JQUERY UI -->
-<script type="text/javascript" src="<?php echo ALCASAR_ADMIN_PATH_JS; ?>/jquery-ui-1.8.10.all.min.js"></script>
+<script type="text/javascript" language="javascript" src="<?php echo ALCASAR_ADMIN_PATH_JS; ?>/jquery-ui-1.8.10.all.min.js"></script>
-<script type="text/javascript" src="<?php echo ALCASAR_ADMIN_PATH_JS; ?>/jquery.tablesorter.min.js"></script>
+<script type="text/javascript" language="javascript" src="<?php echo ALCASAR_ADMIN_PATH_JS; ?>/jquery.tablesorter.min.js"></script>
-<script type="text/javascript" src="<?php echo ALCASAR_ADMIN_PATH_JS; ?>/jquery.tablesorter.pager.js"></script>
+<script type="text/javascript" language="javascript" src="<?php echo ALCASAR_ADMIN_PATH_JS; ?>/jquery.tablesorter.pager.js"></script>
-<script type="text/javascript" src="<?php echo ALCASAR_ADMIN_PATH_JS; ?>/jquery.quicksearch.js"></script>
+<script type="text/javascript" language="javascript" src="<?php echo ALCASAR_ADMIN_PATH_JS; ?>/jquery.quicksearch.js"></script>
+<script type="text/javascript" language="javascript" src="<?php echo ALCASAR_ADMIN_PATH_JS; ?>/jquery.dataTables.min.js"></script>
 <!-- include page javascript -->
 <script type="text/javascript">
+	var table_data_lang = {
+		/*
+			//"sUrl": "media/language/de_DE.txt"
+			"sProcessing": "Bitte warten...",
+			"sLengthMenu": "_MENU_ Einträge anzeigen",
+			"sZeroRecords": "Keine Einträge vorhanden.",
+			"sInfo": "_START_ bis _END_ von _TOTAL_ Einträgen",
+			"sInfoEmpty": "0 bis 0 von 0 Einträgen",
+			"sInfoFiltered": "(gefiltert von _MAX_  Einträgen)",
+			"sInfoPostFix": "",
+			"sSearch": "Suchen",
+			"sUrl": "",
+			"oPaginate": {
+				"sFirst":    "Erster",
+				"sPrevious": "Zurück",
+				"sNext":     "Nächster",
+				"sLast":     "Letzter"
+			}
+			*/
+			"sProcessing": "Patientez...",
+			"sLengthMenu": "Afficher _MENU_ enregistrements",
+			"sZeroRecords": "Aucun enregistrement disponible.",
+			"sInfo": "_START_ à _END_ sur _TOTAL_ enregistrements",
+			"sInfoEmpty": "0 à 0 sur 0 enregistrement",
+			"sInfoFiltered": "(Filtré à partir de _MAX_  enregistrements)",
+			"sInfoPostFix": "",
+			"sSearch": "Recherche : ",
+			"sUrl": "",
+			"oPaginate": {
+				"sFirst":    "Première page",
+				"sPrevious": "Page précédente",
+				"sNext":     "Page suivante",
+				"sLast":     "Dernière page"
+			}
+		};
 	$(document).ready(function(){
 		// Tabs
 		$('#tabs-users').tabs();
 		// buttons
 		$( "button, input:submit, input:button, input:reset").button();
 		// Users table
+		/*
 		$("#test")
 		.tablesorter({widthFixed: true, widgets: ['zebra']})
 		.tablesorterPager({container: $("#pager")});
+		*/
+		//$('input#searchtest').quicksearch('table#test tbody tr');
+		$('#users_table').dataTable(
+		{
+			// fonction suivante permet d'avoir une colone numéroté dynamiquement (non triable)
+			"fnDrawCallback": function ( oSettings ) {
+				/* Need to redo the counters if filtered or sorted */
+				if ( oSettings.bSorted || oSettings.bFiltered )
+				{
+					for ( var i=0, iLen=oSettings.aiDisplay.length ; i<iLen ; i++ )
+					{
+						$('td:eq(0)', oSettings.aoData[ oSettings.aiDisplay[i] ].nTr ).html( i+1 );
+					}
+				}
+			},
+			"aoColumnDefs": [
+				{ "bSortable": false, "aTargets": [ 0 ] }
+			],
+			"aaSorting": [[ 1, 'asc' ]],
+			//fin
+			/*
+				"bPaginate":	true,	//	Active la pagination (10 par défaut)
+				"bLengthChange":true,	//	Affiche le choix du nombre de résultat affiché
+				"bFilter":		true,	//  Affiche le champ de recherche (filtre)
+				"bSort":		true,	//	Active la possibilité de trie
+				"bInfo":		true,	//	Affiche le nombre de résultat affiché et total
+				"bAutoWidth":	true	//	?
+				"bJQueryUI": true,	//	pour utiliser les styles JQUERY UI
+				"sPaginationType": "full_numbers", // affiche la pagination en nombre de page
+				"bProcessing": true,	// active source de donnée AJAX
+				"bServerSide": true,	// pagnination, filtre, etc... du coté du serveur
+				"sAjaxSource": "../examples_support/server_processing.php",	// URL de la source de donnée (SI AJAX activé!)
+			*/
+			"oLanguage": table_data_lang
+		});
+		$('#users_table_filter').after('<div style="float:left"><a href="javascript:alert(\'Fonction prochainement dispobible.\');" title="Recherche avancée">Avancée</a></div>');
+		$('#vouchers_table').dataTable({
+		// fonction suivante permet d'avoir une colone numéroté dynamiquement (non triable)
+		"fnDrawCallback": function ( oSettings ) {
-		$('input#searchtest').quicksearch('table#test tbody tr');
+			/* Need to redo the counters if filtered or sorted */
+			if ( oSettings.bSorted || oSettings.bFiltered )
+			{
+				for ( var i=0, iLen=oSettings.aiDisplay.length ; i<iLen ; i++ )
+				{
+					$('td:eq(0)', oSettings.aoData[ oSettings.aiDisplay[i] ].nTr ).html( i+1 );
+				}
+			}
+		},
+		"aoColumnDefs": [
+			{ "bSortable": false, "aTargets": [ 0 ] }
+		],
+		"aaSorting": [[ 1, 'asc' ]],
+		//fin
+		});
 	});
 </script>
 </head>
 <body>
 <div class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix">
 		<li><a href="#tabs3">Profils</a></li>
 	</ul>
 	<div id="tabs1">
 		<div>
 		Un usager est un utilisateur standard de votre réseau de consultation.<br>
-		<font color="red">ATTENTION POUR DEMONSTRATION DES OPTIONS A UTILISER (exemple avec bug)</font>
+		<font color="red">ATTENTION POUR DEMONSTRATION DES OPTIONS A UTILISER. Données locales dans l'exemple, gérées par le serveur (AJAX) en production</font>
 		</div>
 		<br>
-		<div id="rechercher_usager_box" style="float:left;">
-		<form name="searchform">
-			<label for="searchtest">Recherche :</label>
-			<input type="text" id="searchtest" value="">
-			<a href="" title="Recherche avancée">Avancée</a>
-		</form>
-		</div>
-		<div style="float:right;">
-		<form name="searchform">
-			<input type="button" value="Nouvel usager">
-		</form>
-		</div>
-		<table id="test" cellspacing="1" class="tablesorter" border="0" width="100%">
+		<table id="users_table" cellspacing="1" class="tablesorter" border="0" width="100%">
 		<thead>
 			<tr>
 				<th width="20">#</th><th width="200">Usagers</th><th>Nom, prénom</th><th width="100">Date validitée</th>
 			</tr>
 		</thead>
 				<td>monsieur anonyme</td>
 				<td>30/07/2011</td>
 			</tr>
 		</tbody>
 		</table>
-		<div id="pager" class="pager">
-			<form>
-				<img src="<?php echo ALCASAR_ADMIN_PATH_CSS; ?>/default/first.png" class="first"/>
-				<img src="<?php echo ALCASAR_ADMIN_PATH_CSS; ?>/default/prev.png" class="prev"/>
-				<input type="text" class="pagedisplay" size="5"/>
-				<img src="<?php echo ALCASAR_ADMIN_PATH_CSS; ?>/default/next.png" class="next"/>
-				<img src="<?php echo ALCASAR_ADMIN_PATH_CSS; ?>/default/last.png" class="last"/>
-				<select class="pagesize">
-					<option selected="selected"  value="10">10</option>
-					<option value="20">20</option>
-					<option value="30">30</option>
-					<option  value="40">40</option>
-				</select>
-			</form>
-		</div>
 		<br><br><br>
 	</div>
 	<div id="tabs2">
 		<div>
 		Un "Voucher" est un compte d'accès de type "pré-payé" qui dépend d'une durée d'utilisation ou d'un délai dans le temps.
 		</div>
+		<br>
+		<table id="vouchers_table" cellspacing="1" class="tablesorter" border="0" width="100%">
+		<!--
+		<thead>
+			<tr>
+				<th width="20">#</th>
+				<th>Vouchers</th>
+				<th>Description</th>
+				<th>Nom complet (identifier la personne)</th>
+				<th>Date validitée</th>
+			</tr>
+		</thead>
+		<tfoot>
+			<tr>
+				<th width="20">#</th>
+				<th>Vouchers</th>
+				<th>Description</th>
+				<th>Nom complet (identifier la personne)</th>
+				<th>Date validitée</th>
+			</tr>
+		</tfoot>
+		-->
+		<thead>
+			<tr>
+				<th width="20">#</th><th width="200">Usagers</th><th>Nom, prénom</th><th width="100">Date validitée</th>
+			</tr>
+		</thead>
+		<tfoot>
+			<tr>
+				<th width="20">#</th><th width="200">Usagers</th><th>Nom, prénom</th><th width="100">Date validitée</th>
+			</tr>
+		</tfoot>
+		<tbody>
+		<!--
+			<tr><td>1</td><td><a href="user.php">cfjdjpjsdpajdazpjpaz</a></td><td><br /></td><td><br /></td><td><br /></td></tr>
+			<tr><td>2</td><td>cfjdjpjsdpajdazpjpaz</td><td><br /></td><td><br /></td><td><br /></td></tr>
+			<tr><td>3</td><td>casas456defe5zsd6saz</td><td><br /></td><td><br /></td><td><br /></td></tr>
+			<tr><td>4</td><td>cfjdjpjsdddzd54zsd5q</td><td><br /></td><td><br /></td><td><br /></td></tr>
+			<tr><td>5</td><td>cfd5d1s5d5df5fzpjpaz</td><td><br /></td><td><br /></td><td><br /></td></tr>
+		-->
+		</tbody>
+		</table>
 	</div>
 	<div id="tabs3">
 		<div>
 		Afin de gagner du temps dans la création des comptes usagers et vouchers, vous avez la possibilité de prédéfinir des profils de création de compte.
 		</div>

Subversion Repositories ALCASAR

(root)/web/admin/auth_users.php – Rev 596 → 600