Plugin jqGrid - Recherche simple

Bonsoir,

étudiant en informatique, je me suis vu confier dans le cadre de mon stage de première année la tâche d'intégrer le plugin jqGrid dans le back office d'un site internet.

J'avais déjà entendu parler de jQuery, mais je ne m'y étais jamais vraiment intéressé.

Quoi qu'il en soit, cela fait une semaine que je suis dessus et j'ai bien avançé ; voyez plutôt :

http://img37.imageshack.us/img37/3330/jqgrid.png

Uploaded with ImageShack.us

Ma Grid récupère les données de ma base de données, pas de soucis ! Je suis donc actuellement en train de m'atteler à l'amélioration de la grille, je suis chargé de mettre en place l'édition, la suppression et la recherche.

J'aimerais vous poser moult question, mais commençons par le problème que je rencontre actuellement : j'ai décidé de commencer par la recherche. Le bouton s'affiche correctement, lorsque je clique dessus la fenêtre de recherche s'ouvre et je peux saisir mes informations. Le problème se pose lorsque je clique sur 'rechercher' : rien ne se passe. La fenêtre reste ouverte, mes informations restent entrées dans cette dernière, mais rien d'autre.. C'est comme si le bouton 'rechercher' n'avait pas de code derrière.

J'ai suivi ce tuto : http://www.trirand.com/jqgridwiki/do...rching#options

Voici mes codes :

index.php

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
	<head>
		<title>My Third Grid!</title>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />		
		<link rel="stylesheet" type="text/css" media="screen" href="css/south-street/jquery-ui-1.8.13.custom.css" />
		<link rel="stylesheet" type="text/css" media="screen" href="css/ui.jqgrid.css" />
	</head>
	<body>
		<table id="list"><tr><td/></tr></table> 
		<div id="pager"></div>
		<script src="js/jquery-1.6.1.js" type="text/javascript"></script>
		<script src="js/i18n/grid.locale-fr.js" type="text/javascript"></script>
		<script src="js/jquery.jqGrid.min.js" type="text/javascript"></script>
		<script src="js/list.js" type="text/javascript"></script>
	</body>
</html>

list.js

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
 
jQuery("#list").jqGrid({
	url:'example.php',
	datatype: 'xml',
	mtype: 'GET',
	colNames:['Inv No','Date', 'Amount','Tax','Total','Notes'],
	colModel :[ 
		{name:'invid', index:'invid', width:55}, 
		{name:'invdate', index:'invdate', width:90}, 
		{name:'amount', index:'amount', width:80, align:'right'}, 
		{name:'tax', index:'tax', width:80, align:'right'}, 
		{name:'total', index:'total', width:80, align:'right'}, 
		{name:'note', index:'note', width:150, sortable:false} 
	],
	pager: '#pager',
	rowNum:10,
	rowList:[10,20,30],
	sortname: 'invid',
	sortorder: 'asc',
	viewrecords: true,
	gridview: true,
	caption: 'My Third Grid!',
}).navGrid('#pager',{view:true, del:false},
{}, //  default settings for edit
{}, // delete instead that del:false we need this
{
     caption: "Search...",
     Find: "Find",
     Reset: "Reset",
     odata : ['equal', 'not equal', 'less', 'less or equal','greater','greater or equal', 'begins with','does not begin with','is in','is not in','ends with','does not end with','contains','does not contain'],
     groupOps: [ { op: "AND", text: "all" }, { op: "OR", text: "any" } ],
     matchText: " match",
     rulesText: " rules"
}, // search options
{} // view parameters
);

example.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
 
<?php 
//include the information needed for the connection to MySQL data base server. 
// we store here username, database and password 
include("dbconfig.php");
 
// to the url parameter are added 4 parameters as described in colModel
// we should get these parameters to construct the needed query
// Since we specify in the options of the grid that we will use a GET method 
// we should use the appropriate command to obtain the parameters. 
// In our case this is $_GET. If we specify that we want to use post 
// we should use $_POST. Maybe the better way is to use $_REQUEST, which
// contain both the GET and POST variables. For more information refer to php documentation.
// Get the requested page. By default grid sets this to 1. 
$page = $_GET['page']; 
 
// get how many rows we want to have into the grid - rowNum parameter in the grid 
$limit = $_GET['rows']; 
 
// get index row - i.e. user click to sort. At first time sortname parameter -
// after that the index from colModel 
$sidx = $_GET['sidx']; 
 
// sorting order - at first time sortorder 
$sord = $_GET['sord']; 
 
// if we not pass at first time index use the first column for the index or what you want
if(!$sidx) $sidx =1; 
 
// connect to the MySQL database server 
$db = mysql_connect($dbhost, $dbuser, $dbpassword) or die("Connection Error: " . mysql_error()); 
 
// select the database 
mysql_select_db($database) or die("Error connecting to db."); 
 
// calculate the number of rows for the query. We need this for paging the result 
$result = mysql_query("SELECT COUNT(*) AS count FROM invheader"); 
$row = mysql_fetch_array($result,MYSQL_ASSOC); 
$count = $row['count']; 
 
// calculate the total pages for the query 
if( $count > 0 && $limit > 0) { 
              $total_pages = ceil($count/$limit); 
} else { 
              $total_pages = 0; 
} 
 
// if for some reasons the requested page is greater than the total 
// set the requested page to total page 
if ($page > $total_pages) $page=$total_pages;
 
// calculate the starting position of the rows 
$start = $limit*$page - $limit;
 
// if for some reasons start position is negative set it to 0 
// typical case is that the user type 0 for the requested page 
if($start <0) $start = 0; 
 
// the actual query for the grid data 
$SQL = "SELECT invid, invdate, amount, tax,total, note FROM invheader ORDER BY $sidx $sord LIMIT $start , $limit"; 
$result = mysql_query( $SQL ) or die("Couldn't execute query.".mysql_error()); 
 
// we should set the appropriate header information. Do not forget this.
header("Content-type: text/xml;charset=utf-8");
 
$s = "<?xml version='1.0' encoding='utf-8'?>";
$s .=  "<rows>";
$s .= "<page>".$page."</page>";
$s .= "<total>".$total_pages."</total>";
$s .= "<records>".$count."</records>";
 
// be sure to put text data in CDATA
while($row = mysql_fetch_array($result,MYSQL_ASSOC)) {
    $s .= "<row id='". $row['invid']."'>";            
    $s .= "<cell>". $row['invid']."</cell>";
    $s .= "<cell>". $row['invdate']."</cell>";
    $s .= "<cell>". $row['amount']."</cell>";
    $s .= "<cell>". $row['tax']."</cell>";
    $s .= "<cell>". $row['total']."</cell>";
    $s .= "<cell><![CDATA[". $row['note']."]]></cell>";
    $s .= "</row>";
}
$s .= "</rows>"; 
 
echo $s;
?>

Alors voilà, si quelqu'un à une idée pour m'aider à avançer, je suis preneur !

Merci,

Jigga.