Datatables et server_side - Rien ne se passe !

Version imprimable

Voir 40 message(s) de cette discussion en une page

08/01/2013, 15h51
jytest

ou encore l'erreur est dans l'ajax modifié (cfr plus haut dans les posts) !
Je ne vois rien d'autre !
08/01/2013, 16h01
SpaceFrog

????
l'erreur ?

tu m'as dit que tu n'avais pas d'erreur ... :calim2:
08/01/2013, 16h03
jytest

cela ne va pas non plus !
Cela ne viendrait-i-il pas de mon server modifié ?
08/01/2013, 16h10
jytest

Je viens d'essayer de prendre la forme simple de ce jquery...
Rien n'y change !

Mais pourquoi ce truc ne veut-il pas fonctionner ?
C'est apparemment un petit truc qui foire !
Mais quoi ?

Moi, je ne sais plus !
J'en perds mon latin... pardon mon javascript !

A l'aide.
08/01/2013, 16h16
SpaceFrog

jquery est bien chargé ?
tu sais visualiser les messages d'erreur dans la consola javascript ?
08/01/2013, 16h17
jytest

Jquery est bien chargé...
La preuve, datatables se charge bien,
ainsi que mes curseurs du haut de page et...
Des messages, j'en vois pas...

Par la plus grande des bontés,
pourrais-tu jeter plus qu'un oeil sur mes codes de cette pages ?
S'il-te-plaît..

J'en peux plus !!!
08/01/2013, 16h25
jytest

J'ai mis un echo + un exit en début du "server_processing.php" !
Ce script ne s'exécute apparemment pas !
08/01/2013, 16h31
SpaceFrog

c'est donc ce qu je soupçonne depuis le debut, une erreur js empeche l'attribution du onscroll voir du datatable sur ton tableau ...

essaye de mettre un simple alert après l'intialisation du datable
08/01/2013, 16h37
jytest

Je l'ai fait ! L'alert fonctionne bien !
Je l'avais même fait avant, juste après le chargement du jquery... OK !
Je l'ai fait aussi, juste après le dernier mot en javascript, dans ce bloc de fonctions et de lancements jquery... tout est ok
Je l'ai fait dans le dernier bloc javascript de la page... Tout est ok !

Et alors, où est cette erreur qui nous file entre les doigts ???
08/01/2013, 16h56
SpaceFrog

affiche le code source généré de la page dans l'onglet html de firebug
trouve dedans l'element qui scrolle ...

applique lui avec jquery un alert sur le onscroll ...
08/01/2013, 17h22
jytest

je n'y arrive pas !

Bonsoir,

J'ai testé chez moi en localhost. Avec ces codes cela fonctionne :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
 
<script type="text/javascript">
 
$(document).ready(function() {
	var oTable = $('#example').dataTable( {
		"sScrollY": "800px",
        "sAjaxSource": "scripts/DataTables-1.9.4/media/js/server_processing.php",
		"bServerSide": true,
 
		"sDom": "frtiS",
		"bScrollCollapse": true,
 
 
 
		"oScroller": {
			"loadingIndicator": true
			},
		"oLanguage": {
			 "sLoadingRecords": "Chargement en cours..."
			 	}
	} );
} );
</script>

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 
<div id="demo">
 
<table cellspacing="0" cellpadding="0" border="0" id="example" class="display dataTable" aria-describedby="example_info">
 
	<thead>
 
		<tr role="row">
		<th width="10%" class="sorting" role="columnheader" tabindex="0" aria-controls="example" rowspan="1" colspan="1" style="width: 50px;" aria-label="Rendering engine: activate to sort column ascending">Titre</th>
		<th width="25%" class="sorting" role="columnheader" tabindex="0" aria-controls="example" rowspan="1" colspan="1" style="width: 50px;" aria-label="Browser: activate to sort column ascending">Date de publication</th>
		<th width="25%" class="sorting_desc" role="columnheader" tabindex="0" aria-controls="example" rowspan="1" colspan="1" style="width: 50px;" aria-label="Platform(s): activate to sort column ascending">Nb de pages</th>
		<th width="15%" class="sorting" role="columnheader" tabindex="0" aria-controls="example" rowspan="1" colspan="1" style="width: 30px;" aria-label="Engine version: activate to sort column ascending">ISBN</th>
		<th width="15%" class="sorting" role="columnheader" tabindex="0" aria-controls="example" rowspan="1" colspan="1" style="width: 30px;" aria-label="CSS grade: activate to sort column ascending">Prix achat</th></tr>
 
 
	</thead>
 
</table>
 
</div>

Et pour info le début du fichier server_processing.php :

Code:

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
 
<?php
header('Content-type: text/html; charset=UTF-8');
	/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
	 * Easy set variables
	 */
 
	/* Array of database columns which should be read and sent back to DataTables. Use a space where
	 * you want to insert a non-database field (for example a counter or static image)
	 */
	$aColumns = array( 'titre', 'date_publication', 'nb_pages', 'isbn', 'prix_achat');
 
	/* Indexed column (used for fast and accurate table cardinality) */
	$sIndexColumn = "id_livre";
 
	/* DB table to use */
	$sTable = "livre";
 
	/* Database connection information */
	$gaSql['user']       = "root";
	$gaSql['password']   = "";
	$gaSql['db']         = "bd";
	$gaSql['server']     = "localhost";
 
	/* REMOVE THIS LINE (it just includes my SQL connection user/pass) */
/* 	include( $_SERVER['DOCUMENT_ROOT']."/datatables/mysql.php" ); */
	/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
	 * If you just want to use the basic configuration for DataTables with PHP server-side, there is
	 * no need to edit below this line
	 */
 
	/* 
	 * MySQL connection
	 */
	$gaSql['link'] =  mysql_pconnect( $gaSql['server'], $gaSql['user'], $gaSql['password']  ) or
		die( 'Could not open connection to server' );
 
	mysql_select_db( $gaSql['db'], $gaSql['link'] ) or 
		die( 'Could not select database '. $gaSql['db'] );
 
mysql_set_charset( 'utf8' );

Si cela peux t'aider ...

08/01/2013, 22h39
jytest

Oui, je désespère avec mon code !
Encore plus !
Merci, mais cela ne m'arrange pas directement !
Merci quand même !
Je ne passe pas par "mon ajax" !!!
Cela m'énerve !!!
Pourquoi ???

Voilà...

J'ai beau regardé... réssayer... dormir dessus...
Rien n'y fait... Je suis au point mort !!!

Pouvez-vous m'aider, svp !
Je n'en peux plus !

Quels sont les fichiers obligatoires de datatables
à déposer obligatoirement sur le serveur ?

Afin que vous puissiez m'aider sans trop perdre de votre temps, j'ai fortement allégé le code (ci-dessous)
AIDEZ-moi, svp !!!

Voici tout le code, en désespoir de cause (recherche00.php) !!!

Code:

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
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
 
<?php
        session_start();
        ob_start();
        
        require_once("php/connexionMysql.inc.php");
 
        ob_end_flush();
?>
 
<!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">
<meta name = "reply-to" content = "creaprint@skynet.be"/>
<meta name = "author" content = "creaprint"/>
<meta name = "description" content = "bdd"/>
<meta name = "keywords" content = ""/>
 
<title>celinni.com - bdd</title>
<style type="text/css">
<!--
-->
</style>
<link type="text/css" rel="stylesheet" href="css/general.css">
<link type="text/css" rel="stylesheet" href="css/general12.css">
<link type="text/css" rel="stylesheet" href="css/recherche.css">
<link type="text/css" rel="stylesheet" href="js/dt/jquery.dataTables.css">
<link type="text/css" rel="stylesheet" href="js/dt/jquery.dataTables-my.css">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/dt/jquery.dataTables.js"></script>
<script type="text/javascript">
	$(document).ready(function() {
		$('#example').dataTable( {
			"sScrollY": "615px",
			"sAjaxSource": "js/dt/chargementbdd.php",
			"bServerSide": true,
			"bProcessing": true,
			"sDom": "frtiS",
			"oScroller": {
				"loadingIndicator": true
			},
    		"iDeferLoading": 2500,
            "iDisplayLength": 505
		} );
	} );
</script>
<style type="text/css">
<!--
 
-->
</style>
 
</head>
<body>
 
<div id="ombre">
<div id="site">
    <div id="contenu">
        <div id="bloc30">
        	<div id="bloc31">
				<table cellpadding="0" cellspacing="0" border="0" class="display" id="example">
                    <thead>
                        <tr>
                            <th align='center' style='width:25px;'></th>
                            <th align='left'>&nbsp;idreference</th>
                            <th align='left'>&nbsp;forme</th>
                            <th align='right' style='width:30px;'>&nbsp;carat</th>
                            <th align='left'>&nbsp;taille</th>
                            <th align='center' style='width:45px;'>&nbsp;couleur</th>
                            <th align='center' style='width:45px;'>&nbsp;pureté</th>
                            <th align='center' style='width:45px;'>&nbsp;poli</th>
                            <th align='center' style='width:45px;'>&nbsp;sym</th>
                            <th align='center' style='width:45px;'>&nbsp;prof</th>
                            <th align='center' style='width:45px;'>&nbsp;table</th>
                            <th align='center' style='width:45px;'>&nbsp;fluo</th>
                            <th align='right' style='width:45px;'>&nbsp;prix/ct</th>
                            <th align='center' style='width:45px;'>&nbsp;colette</th>
                            <th align='right' style='width:45px;'>&nbsp;Lg/lg</th>
                            <th align='right'>&nbsp;délai</th>
                            <th align='right'>&nbsp;prix</th>
                            <th>&nbsp;détail</th>
                        </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>
            </div>
        	<div id="bloc32">
            </div>
            <div style="clear:left;"></div>
        </div>
    </div>
</div>
</div>
 
</body>
</html>

Et pour server_processing :

Code:

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
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
 
<?php
	session_start();
echo "HELPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPP !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!";
exit;
	/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
	 * Easy set variables
	 */
 
	/* Array of database columns which should be read and sent back to DataTables. Use a space where
	 * you want to insert a non-database field (for example a counter or static image)
	 */
	$aColumns = array( "item_id");
 
	/* Indexed column (used for fast and accurate table cardinality) */
	$sIndexColumn = "item_id";
 
	/* DB table to use */
	$sTable = "diamant_data";
 
	/* Database connection information */
	$gaSql['user']       = "xxx";
	$gaSql['password']   = "yyy";
	$gaSql['db']         = "zzz";
	$gaSql['server']     = "xyz";	
 
	/* REMOVE THIS LINE (it just includes my SQL connection user/pass) */
	/* include( $_SERVER['DOCUMENT_ROOT']."/datatables/mysql.php" ); */
 
 
	/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
	 * If you just want to use the basic configuration for DataTables with PHP server-side, there is
	 * no need to edit below this line
	 */
 
	/* 
	 * Local functions
	 */
	function fatal_error ( $sErrorMessage = '' )
	{
		header( $_SERVER['SERVER_PROTOCOL'] .' 500 Internal Server Error' );
		die( $sErrorMessage );
	}
 
 
	/* 
	 * MySQL connection
	 */
	if ( ! $gaSql['link'] = mysql_pconnect( $gaSql['server'], $gaSql['user'], $gaSql['password']  ) )
	{
		fatal_error( 'Could not open connection to server' );
	}
 
	if ( ! mysql_select_db( $gaSql['db'], $gaSql['link'] ) )
	{
		fatal_error( 'Could not select database ' );
	}
 
	/* 
	 * Paging
	 */
	$sLimit = "";
	if ( isset( $_GET['iDisplayStart'] ) && $_GET['iDisplayLength'] != '-1' )
	{
		$sLimit = "LIMIT ".intval( $_GET['iDisplayStart'] ).", ".
			intval( $_GET['iDisplayLength'] );
	}
 
 
	/*
	 * Ordering
	 */
	$sOrder = "";
	if ( isset( $_GET['iSortCol_0'] ) )
	{
		$sOrder = "ORDER BY  ";
		for ( $i=0 ; $i<intval( $_GET['iSortingCols'] ) ; $i++ )
		{
			if ( $_GET[ 'bSortable_'.intval($_GET['iSortCol_'.$i]) ] == "true" )
			{
				$sOrder .= "`".$aColumns[ intval( $_GET['iSortCol_'.$i] ) ]."` ".
					($_GET['sSortDir_'.$i]==='asc' ? 'asc' : 'desc') .", ";
			}
		}
 
		$sOrder = substr_replace( $sOrder, "", -2 );
		if ( $sOrder == "ORDER BY" )
		{
			$sOrder = "";
		}
	}
 
 
	/* 
	 * Filtering
	 * NOTE this does not match the built-in DataTables filtering which does it
	 * word by word on any field. It's possible to do here, but concerned about efficiency
	 * on very large tables, and MySQL's regex functionality is very limited
	 */
	$sWhere = "";
	if ( isset($_GET['sSearch']) && $_GET['sSearch'] != "" )
	{
		$sWhere = "WHERE (";
		for ( $i=0 ; $i<count($aColumns) ; $i++ )
		{
			if ( isset($_GET['bSearchable_'.$i]) && $_GET['bSearchable_'.$i] == "true" )
			{
				$sWhere .= "`".$aColumns[$i]."` LIKE '%".mysql_real_escape_string( $_GET['sSearch'] )."%' OR ";
			}
		}
		$sWhere = substr_replace( $sWhere, "", -3 );
		$sWhere .= ')';
	}
 
	/* Individual column filtering */
	for ( $i=0 ; $i<count($aColumns) ; $i++ )
	{
		if ( isset($_GET['bSearchable_'.$i]) && $_GET['bSearchable_'.$i] == "true" && $_GET['sSearch_'.$i] != '' )
		{
			if ( $sWhere == "" )
			{
				$sWhere = "WHERE ";
			}
			else
			{
				$sWhere .= " AND ";
			}
			$sWhere .= "`".$aColumns[$i]."` LIKE '%".mysql_real_escape_string($_GET['sSearch_'.$i])."%' ";
		}
	}
 
 
	/*
	 * SQL queries
	 * Get data to display
	 */
	$sQuery = "
		SELECT SQL_CALC_FOUND_ROWS `".str_replace(" , ", " ", implode("`, `", $aColumns))."`
		FROM   $sTable
		$sWhere
		$sOrder
		$sLimit
		";
	$rResult = mysql_query( $sQuery, $gaSql['link'] ) or fatal_error( 'MySQL Error: ' . mysql_errno() );
 
	/* Data set length after filtering */
	$sQuery = "
		SELECT FOUND_ROWS()
	";
	$rResultFilterTotal = mysql_query( $sQuery, $gaSql['link'] ) or fatal_error( 'MySQL Error: ' . mysql_errno() );
	$aResultFilterTotal = mysql_fetch_array($rResultFilterTotal);
	$iFilteredTotal = $aResultFilterTotal[0];
 
	/* Total data set length */
	$sQuery = "
		SELECT COUNT(`".$sIndexColumn."`)
		FROM   $sTable
	";
	$rResultTotal = mysql_query( $sQuery, $gaSql['link'] ) or fatal_error( 'MySQL Error: ' . mysql_errno() );
	$aResultTotal = mysql_fetch_array($rResultTotal);
	$iTotal = $aResultTotal[0];
 
 
	/*
	 * Output
	 */
	$output = array(
		"sEcho" => intval($_GET['sEcho']),
		"iTotalRecords" => $iTotal,
		"iTotalDisplayRecords" => $iFilteredTotal,
		"aaData" => array()
	);
 
	while ( $aRow = mysql_fetch_array( $rResult ) )
	{
		$row = array();
		for ( $i=0 ; $i<count($aColumns) ; $i++ )
		{
			if ( $aColumns[$i] == "version" )
			{
				/* Special output formatting for 'version' column */
				$row[] = ($aRow[ $aColumns[$i] ]=="0") ? '-' : $aRow[ $aColumns[$i] ];
			}
			else if ( $aColumns[$i] != ' ' )
			{
				/* General output */
				$row[] = $aRow[ $aColumns[$i] ];
			}
		}
		$output['aaData'][] = $row;
	}
 
	echo json_encode( $output );
?>

Bonsoir,

J'ai fait quelques tests et je pense ... avoir trouvé la cause de tes ennuis ;) Il s'avère que tu n'appelles pas le script "extra", à savoir dataTables.scroller.js, qui est indépendant de jquery.dataTables.js (le script scroller est présent dans le DataTables package). Pense aussi à intégrer le fichier css "dataTables.scroller.css". Avec ce code, cela devrait donc fonctionner :

Code:

1
2
3
4
5
6
7
8
9
10
11
<head>

<link rel="stylesheet" type="text/css" href="scripts/DataTables-1.9.4/media/css/demo_page.css" media="screen" />
<link rel="stylesheet" type="text/css" href="scripts/DataTables-1.9.4/media/css/demo_table.css" media="screen" />
<link rel="stylesheet" type="text/css" href="scripts/DataTables-1.9.4/extras/Scroller/media/css/dataTables.scroller.css" media="screen" />

<script type="text/javascript" src="scripts/lib/jquery_1_7_1.js"></script>
<script type="text/javascript" src="scripts/DataTables-1.9.4/media/js/jquery.dataTables.js"></script>

<script type="text/javascript" src="scripts/DataTables-1.9.4/media/js/dataTables.scroller.js"></script>

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 
<script type="text/javascript">
	$(document).ready(function() {
		$('#example').dataTable( {
			"sScrollY": "615px",
                        "sAjaxSource": "js/dt/chargementbdd.php",
			"bServerSide": true,
			"bProcessing": true,
			"sDom": "frtiS",
			"oScroller": {
			"loadingIndicator": true
			}/* ,
    		"iDeferLoading": 2500,
            "iDisplayLength": 505 ] A désactiver*/
		} );
	} );
</script>

En espérant que tu arrives à tes fins.

14/01/2013, 10h02
jytest

Effectivement, il n'est mis nullement qu'il est recommandé de le faire...
Il y a effectivement un changement.
Il y avait bien une erreur là.
Merci d'y avoir mis le doigt dessus !

Mais...
cela ne fonctionne toujours pas !
Peux-tu encore prendre un peu de ton temps pour m'aider ?
D'avance, je t'en remercie.

Dans la bdd "diamant_data", j'ai une zone appelée "table" !
JSON tenterait de "l'interpréter"... et c'est là qu'il foire !!!

Outre le fait que je ne peux pas changer le nom de cette zone,
comment faire ?

J'ai tenté de double quoter... Rien n'y fait !

Bonne semaine !
14/01/2013, 13h22
almoha
Effectivement firebug indique une erreur de syntaxe sql sur ton site. Dans ta requête, essaye plutôt d’échapper le champ de la façon suivante :
Code:

1 2 `table`
14/01/2013, 13h26
jytest

oui mais ceci se passe dans "chargementbdd.php",
formé dérivée du server_processing de dataTables :

Code:

$aColumns = array( "item_id", "cut", "carat", "cut_grade", 'color', 'clarity', "polish", 'symmetry', "depth", "table", 'fluo_intensity', "price_per_carat", 'culet_size', 'total_price' );

Mais alors comment faire dans ce cas-ci ?
As-tu une idée ?
14/01/2013, 13h40
almoha
Affiche la requête effectuée en ajoutant un echo dans le fichier php :
Code:

1 2 3 4 5 6 7 8 $sQuery = " SELECT SQL_CALC_FOUND_ROWS `".str_replace(" , ", " ", implode("`, `", $aColumns))."` FROM $sTable $sWhere $sOrder $sLimit "; echo $sQuery;
Et mets des simples quotes autour de chaque champ :

Code:

$aColumns = array( 'item_id', 'cut', 'carat', 'cut_grade', 'color', 'clarity', 'polish', 'symmetry', 'depth', 'table', 'fluo_intensity', 'price_per_carat', 'culet_size', 'total_price' );

Et je mets cela où ?

Code:

1
2
3
4
5
6
7
8
$sQuery = "
		SELECT SQL_CALC_FOUND_ROWS `".str_replace(" , ", " ", implode("`, `", $aColumns))."`
		FROM   $sTable
		$sWhere
		$sOrder
		$sLimit
		";
echo $sQuery;

Voir 40 message(s) de cette discussion en une page