11548 sujets

JavaScript, DOM et API Web HTML5

[Résolu] JQuery DataTable : Question pour un spécialiste

Bonjour à toutes et tous,

J'utilise le plugin JQuery DataTable afin de traiter des tableaux de données. J'appèle mes données via la méthode sAjaxSource en ciblant un fichier php qui me retourne des données au format json.

L'appel des données fonctionne impec, pas de soucis. Mon souci c'est d'arriver à rafraîchir mon tableau après y avoir inséré de nouvelles données.

J'ai essayé d'utiliser fnReloadAjax() mais sans succès, je ne vois pas comment l'utiliser. Je cherche donc un expert DataTable afin de répondre à ma question Smiley decu .

Voici en gros mon code de test actuel (je mettrai tout ça dans un js a part qd ça fonctionnera Smiley smile ) :



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
		<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/media/images/favicon.ico" />
		
		<title>DataTables example</title>
		<style type="text/css" title="currentStyle">
			@import "../../media/css/demo_page.css";
			@import "../../media/css/demo_table.css";
		</style>
		<script type="text/javascript" language="javascript" src="../../media/js/jquery.js"></script>
		<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
		<script type="text/javascript" charset="utf-8">
			$(document).ready(function() {
				var oTable = $('#tableau_terminaux').dataTable( {
					"bProcessing": true,
					"sAjaxSource": "sources/arrays.txt",
					"aoColumnDefs": [{
						"bSortable": false, "aTargets": [ 0,4,5,6,7,9,10,11 ]
					}],
					"sPaginationType":"full_numbers",
					"aaSorting":[[1, "asc"]],
					"iDisplayLength": 30,
					"aLengthMenu": [[30, 50, 100, -1], [30, 50, 100, "Toutes"]],						
					"oLanguage": {
						"sLengthMenu":		"_MENU_",
						"sZeroRecords": 	"Aucun &eacute;l&eacute;ment &agrave; afficher",
						"sInfo":			"_START_ &agrave; _END_ sur un total de _TOTAL_",
						"sInfoEmpty":		"0 &agrave; 0 sur un total de 0",
						"sInfoFiltered":	"(Filtr&eacute; sur un total de _MAX_ enregistrements)",
						"sProcessing":		"Traitement en cours...",
						"sSearch":			"",						
						"oPaginate": {
							"sFirst":    "Premier",
							"sPrevious": "Pr&eacute;c&eacute;dent",
							"sNext":     "Suivant",
							"sLast":     "Dernier"
						}								
					},
					"bRetrive" : true
				});
				
				var refresh = $('#tableau_terminaux').dataTable().fnDraw();
				
			});
		</script>
	</head>
	<body id="dt_example">
	
	
		<div id="container">

			<div id="dynamic">
			
				<table class="display dataTable" id="tableau_terminaux" style="margin: 10px 0 10px 0;text-align:center;width:100%;border-collapse:collapse;border:1px solid #D8D8D8;">
					<thead>
							<tr>
								<th style="width:20px;"></th>
								<th style="width:140px;">CONSTRUCTEUR</th>
								<th style="width:120px;">MOD&Egrave;LE</th>
								<th>IMEI</th>
								<th>CHARGEUR</th>
								<th>BATTERIE</th>
								<th>USB</th>
								<th>PI&Eacute;TON</th>
								<th>SIM</th>
								<th style="width:20px;"></th>
								<th style="width:20px;"></th>
								<th style="width:20px;"></th>
							</tr>
					</thead>
					<tbody>
		
					</tbody>
				</table>
				
			</div>
			
		</div>
		
		<a href="#home" onClick="refresh();">Refresh</a>
		
	</body>
</html>


En l'état ma console firebug me dit "ReferenceError: refresh is not defined" ce que je ne comprend pas vu que ma variable est bien définie... snif Smiley decu .
Modifié par Klesk (02 Oct 2012 - 13:43)
Essaye de rajouter 
var refresh;
avant et en dehors de ton 
$(document).ready(function() {...});

Modifié par MrJO (30 Sep 2012 - 22:14)
Merci pour ta réponse JO. J'ai trouvé la solution entre temps. Reste à valider que ça fonctionne aussi bien en situation que lors de mes tests : 


function termTable() {
	var oTable = $('#tableau_terminaux').dataTable( {
		"bDestroy":true,
		"bProcessing": true,
		"sAjaxSource": "sources/arrays.txt",
		"aoColumnDefs": [{
			"bSortable": false, "aTargets": [ 0,4,5,6,7,9,10,11 ]
		}],
		"sPaginationType":"full_numbers",
		"aaSorting":[[1, "asc"]],
		"iDisplayLength": 30,
		"aLengthMenu": [[30, 50, 100, -1], [30, 50, 100, "Toutes"]],						
		"oLanguage": {
			"sLengthMenu":		"_MENU_",
			"sZeroRecords": 	"Aucun &eacute;l&eacute;ment &agrave; afficher",
			"sInfo":			"_START_ &agrave; _END_ sur un total de _TOTAL_",
			"sInfoEmpty":		"0 &agrave; 0 sur un total de 0",
			"sInfoFiltered":	"(Filtr&eacute; sur un total de _MAX_ enregistrements)",
			"sProcessing":		"Traitement en cours...",
			"sSearch":			"",						
			"oPaginate": {
				"sFirst":    "Premier",
				"sPrevious": "Pr&eacute;c&eacute;dent",
				"sNext":     "Suivant",
				"sLast":     "Dernier"
			}								
		}
	});
};

$(document).ready(function(){
	termTable();
});


Et ça me permet d'appeler ma fonction termTable où je veux et quand je veux. Je suis un peu con j'aurai du y penser avant...
Modifié par Klesk (30 Sep 2012 - 22:48)
C'est le principe Smiley cligne Idem pour les variables, si tu veux les appeler ou tu veux et quand tu veux il faut les déclarer, mais hors d'une fonction. Le 
$(document).ready(function(){...});
étant une fonction si tu déclares une variable à l'intérieur de cette fonction elle ne sera pas disponible ailleurs sauf si tu l'as déclaré avant hors de cette fonction.
Sujet clos
Aller à