flexigrid pour tableau dynamique

**maxredphenix** · 10/04/2012, 21h29

Bonsoir,

Je suis débutant en javascript et php. J'ai quelques petit soucis avec flexigrid : http://www.flexigrid.info/ pour afficher mon tableau dynamique, j'ai tester plusieurs trucs mais ...rien. Voici mes codes:
Le fichier javascript "tab_appel.js" pour afficher mon tableau

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
$(function() {
	$(".tab_appel").flexigrid({
	url:  'gest_appels_tableau.php',
	dataType: 'json',
 
	colModel : [
		{display: 'Numéro', name : 'id_appel', width : 40, sortable : true, align: 'left'},
		{display: 'Numéro', name : 'num_appelant', width : 100, sortable : true, align: 'left'},
		{display: 'Nom', name : 'nom_demandeur', width : 100, sortable : true, align: 'left'},
		{display: 'Service', name : 'service', width : 100, sortable : true, align: 'left'}
	],
 
	buttons : [
		{name: 'Ajouter', bclass: 'add', onpress : doCommand},
		{name: 'Supprimer', bclass: 'delete', onpress : doCommand},
		{separator: true}
	],
 
	searchitems : [
		{display: 'ID', name : 'id'},
		{display: 'Site', name : 'site', isdefault: true},
		{display: 'Type', name : 'type'}
	],
 
	sortname: "id",
	sortorder: "asc",
	usepager: true,
	title: "Liste des Appels",
	useRp: true,
	rp: 10,
	showTableToggleBtn: false,
	resizable: false,
	width: 800,
	height: 300,
	singleSelect: true
	});
});
 
function doCommand(com, grid) {
	if (com == 'Ajouter') {
		$('.trSelected', grid).each(function() {
			var id = $(this).attr('id');
			id = id.substring(id.lastIndexOf('row')+3);
			alert("Ajouter row " + id);
			});
	} 
	else if (com == 'Delete') {
		$('.trSelected', grid).each(function() {
			var id = $(this).attr('id');
			id = id.substring(id.lastIndexOf('row')+3);
			alert("Delete row " + id);
			});
		}
}

Le fichier php dans lequel je souhaite afficher mon tableau:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
<!DOCTYPE html>
<?php
			// Connect to MySQL database
			mysql_connect('localhost', 'root', '');
			mysql_select_db('gestbdd');
			$page = 1; // La Page Actuelle
			$sortname = 'id_appel'; // Trier la colonne par ID
			$sortorder = 'asc'; // Trier la colonne
			$qtype = ''; // Rechercher la colonne
			$query = ''; // Rechercher la chaine
			// -----------------Commandes Identiques pour tous les tableaux, ne pas toucher -----------------------------
			// Obtention des données publiées
			if (isset ($ _POST ['page'])) {
			$ Page = mysql_real_escape_string ($ _POST ['page']);
			}
			if (isset ($ _POST ['sortName'])) {
			$ SortName = mysql_real_escape_string ($ _POST ['sortName']);
			}
			if (isset ($ _POST ['ordre de tri'])) {
			$ Sortorder = mysql_real_escape_string ($ _POST ['ordre de tri']);
			}
			if (isset ($ _POST ['qtype'])) {
			$ Qtype = mysql_real_escape_string ($ _POST ['qtype']);
			}
			if (isset ($ _POST ['query'])) {
			$ Query = mysql_real_escape_string ($ _POST ['query']);
			}
			if (isset ($ _POST ['rp'])) {
			$ Rp = mysql_real_escape_string ($ _POST ['rp']);
			}
			// Configuration pour le trie et la recherche des données SQL publiées
			$sortSql = "order by $sortname $sortorder";
			$searchSql = ($qtype != '' && $query != '') ? "where $qtype = '$query'" : '';
			// ---------Fin commandes Identiques-------------------------------------------------------------------------
			// Récupération du nombre de total d'enregistrements
			$sql = "select count(*)
			from appels
			$searchSql";
			$result = mysql_query($sql);
			$row = mysql_fetch_array($result);
			$total = $row[0];
			// Configuration de la pagination des données SQL
			$pageStart = ($page-1)*$rp;
			$limitSql = "limit $pageStart, $rp";
			// Retour des données JSON
			$data = array();
			$data['page'] = $page;
			$data['total'] = $total;
			$data['rows'] = array();
			$sql = "select id_appel, num_appelant, date_appel, nom_demandeur, services from appels
			$searchSql
			$sortSql
			$limitSql";
			$results = mysql_query($sql);
			while ($row = mysql_fetch_assoc($results))
			{
				$data['rows'][] = array('id' => $row['id'],'cell' => array($row['id_appel'], $row['num_appelant'], $row['nom_demandeur'], $row['service']));
			}
			echo json_encode($data);
?>
 
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<!-- Titre -->
		<title>Gestion des Appels</title>
		<!-- Appel du css pour la page html + Menu -->
		<link href="../css/template_formulaires.css" rel="stylesheet" type="text/css" />
		<!-- Appel du css pour le tableau eyedatagrid -->
		<link href="../css/flexigrid.css" rel="stylesheet" type="text/css" />
		<!-- Appel des divers scripts -->
		<script type="text/javascript" src="../javascript/menu.js"></script> <!-- Fichier javascript pour le changement de couleur du texte du MENU -->
		<script type="text/javascript" src="../javascript/flexigrid.js"></script> <!-- Script d'affichage de tableau -->
		<script type="text/javascript" src="../javascript/tab_appel.js"></script> <!-- Script d'affichage de tableau -->
	</head>
 
	<body>
		<table id="tab_appel"></table>
	</body>
</html>

Voici l'appercu de la table appels:
http://www.developpez.net/forums/att...1&d=1334086151

Merci de votre aide

Maxredphenix

flexigrid pour tableau dynamique

jQuery

Mode arborescent

Discussions similaires

Partager

Partager