November 2nd, 2014

Lost password?
Advanced Search

— Forum Scope —

— Match —

— Forum Options —

Minimum search word length is 3 characters - maximum search word length is 84 characters

The forums are currently locked and only available for read only access
sp_Feed Topic RSS sp_TopicIcon
jqgrid edit delete add buttons
Forum Posts: 5
Member Since:
sp_UserOfflineSmall Offline

hiiiii im a newbie in using jqgrid the bottons in the navgrid are non cliquable ??? and pleaase i need someone to check and correct my code or provide me with an example to edit and delete and thanks a lot 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns="">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jqGrid Demo</title>
html, body {
margin: 0; /* Remove body margin/padding */
padding: 0;
overflow: auto; /* Remove scroll bars on browser window */
font: 12px "Lucida Grande", "Lucida Sans Unicode", Tahoma, Verdana;
<!-- In head section we should include the style sheet for the grid -->
<link rel="stylesheet" type="text/css" media="screen" href="themes/redmond/jquery-ui-1.8.2.custom.css" />

<!-- Of course we should load the jquery library -->
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js\src\i18n\grid.locale-fr.js" type="text/javascript"></script>
<!-- and at end the jqGrid Java Script file -->
<script src="js/jquery.jqGrid.min.js" type="text/javascript"></script>

<script type="text/javascript">
// We use a document ready jquery function.
// the url parameter tells from where to get the data from server
// adding ?nd='+new Date().getTime() prevent IE caching
url:'final.php?nd='+new Date().getTime(),
// datatype parameter defines the format of data returned from the server
// in this case we use a JSON data
datatype: "json",
// colNames parameter is a array in which we describe the names
// in the columns. This is the text that apper in the head of the grid.
colNames:['nom','prenom', 'date','cin','role'],
// colModel array describes the model of the column.
// name is the name of the column,
// index is the name passed to the server to sort data
// note that we can pass here nubers too.
// width is the width of the column
// align is the align of the column (default is left)
// sortable defines if this column can be sorted (default true)
{name:'nom',index:'nom', width:100, align:"center", editable:true},
{name:'prenom',index:'prenom', width:100, align:"center", editable:true},
{name:'date',index:'date', width:100, align:"center", editable:true},
{name:'cin',index:'cin', width:80, align:"right", align:"center", editable:true},
{name:'role',index:'role', width:150, align:"right", align:"center", editable:true}

// pager parameter define that we want to use a pager bar
// in this case this must be a valid html element.
// note that the pager can have a position where you want
pager: jQuery('#pager2'),
// rowNum parameter describes how many records we want to
// view in the grid. We use this in example.php to return
// the needed data.
// rowList parameter construct a select box element in the pager
//in wich we can change the number of the visible rows
// sortname sets the initial sorting column. Can be a name or number.
// this parameter is added to the url
sortname: 'nom',
//viewrecords defines the view the total records from the query in the pager
//bar. The related tag is: records in xml or json definitions.
viewrecords: true,
gridview: true,
//mtype: 'GET',
autoencode: true,
//sets the sorting order. Default is asc. This parameter is added to the url
sortorder: "desc",
editurl: "finalEdit.php",
caption: "liste des utilisateurs"


var gr = mygrid.jqGrid('getGridParam','selrow');
if( gr != null )
else alert("Please Select Row");
var gr = jQuery("#delgrid").jqGrid('getGridParam','selrow');
if( gr != null ) jQuery("#delgrid").jqGrid('delGridRow',gr,{reloadAfterSubmit:false});
else alert("Please Select Row to delete!");
<!-- the grid definition in html is a table tag with class 'scroll' -->
<table id="list2"></table>

<!-- pager definition. class scroll tels that we want to use the same theme as grid -->
<div id="pager2"></div>


// Include the information needed for the connection to
// MySQL data base server.
//since we want to use a JSON data we should include
//encoder and decoder for JSON notation
//If you use a php >= 5 this file is not needed

// create a JSON service
//$json = new Services_JSON();

// to the url parameter are added 4 parameter
// we shuld get these parameter to construct the needed query
// for the pager

// get the requested page

$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
if(!$sidx) $sidx =1;
// connect to the MySQL database server
$db = mysql_connect("localhost", "root", "")
or die("Connection Error: " . mysql_error());

// select the database
mysql_select_db("gestion_conges") or die("Error conecting to db.");

// calculate the number of rows for the query. We need this to paging the result
$result = mysql_query("SELECT COUNT(*) AS count FROM utilisateur ");
$row = mysql_fetch_array($result,MYSQL_ASSOC);
$count = $row['count'];

// calculation of total pages for the query
if( $count >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; // do not put $limit*($page - 1)
// 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 * FROM utilisateur ORDER BY $sidx $sord LIMIT $start , $limit";
$result = mysql_query( $SQL ) or die("Couldn t execute query.".mysql_error());

// constructing a JSON

$responce= new stdClass ();
$responce->page = $page;
$responce->total = $total_pages;
$responce->records = $count;
while($row = mysql_fetch_array($result,MYSQL_ASSOC)) {

'cell' =>array($row['nom'],$row['prenom'],$row['date'],$row['cin'],$row['role']));

// $responce->rows[$i]['id']=$row[0];
// $responce->rows[$i]['cell']=array($row[nom],$row[prenom],$row[date],$row[cin],$row[type],$row[num1],$row[num2],$row[adresse],$row[matricule]);
// return the formated data
//echo $json->encode($responce);
echo json_encode($responce);


if (($_POST['oper']) == "edit") {
$updateSQL = sprintf("UPDATE utilisateur SET nom=%s, prenom=%s, date=%s, role=%s WHERE cin=%s",
GetSQLValueString($_POST['nom'], "text"),
GetSQLValueString($_POST['prenom'], "text"),
GetSQLValueString($_POST['date'], "date"),
GetSQLValueString($_POST['role'], "text"),
GetSQLValueString($_POST['cin'], "text"));

$Result1 = mysql_query($updateSQL) or die(mysql_error());
else if (($_POST['oper']) == "del") {

$deleteSQL = sprintf("DELETE FROM utilisateur WHERE id=%s",
GetSQLValueString($_POST['cin'], "text"));
$Result1 = mysql_query($deleteSQL) or die(mysql_error());

Sofia, Bulgaria

Forum Posts: 7721
Member Since:
sp_UserOfflineSmall Offline



You define the pager as jQuery object.

Not sure, but try to define it only as string i.e


pager: '#pager2',



For professional UI suites for Java Script and PHP visit us at our commercial products site - - by the very same guys that created jqGrid.

Forum Timezone: Europe/Sofia

Most Users Ever Online: 496

Currently Online:
32 Guest(s)

Currently Browsing this Page:
1 Guest(s)

Top Posters:

OlegK: 1255

markw65: 179

kobruleht: 144

phicarre: 132

YamilBracho: 124

Renso: 118

Member Stats:

Guest Posters: 447

Members: 11373

Moderators: 2

Admins: 1

Forum Stats:

Groups: 1

Forums: 8

Topics: 10592

Posts: 31289

Newest Members:

, razia, Prankie, psky, praveen neelam,

Moderators: tony: 7721, Rumen[Trirand]: 81

Administrators: admin: 66

Comments are closed.
Privacy Policy   Terms and Conditions   Contact Information