CODEWITHSUNDEEP
phpjqueryajaxjsonjqgrid
user3596261
user3596261

Reputation: 21

Call data from the server without using GET Method on jqgrid

I'm new to jqgrid. I did alot of research on how to call the data from the database without using GET method without success.

I have below HTML code:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>jqGrid UI</title>
    <link rel='stylesheet' type='text/css' href='http://code.jquery.com/ui/1.10.3/themes/redmond/jquery-ui.css' />
    <link rel='stylesheet' type='text/css' href='http://www.trirand.com/blog/jqgrid/themes/ui.jqgrid.css' />

    <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>

    <script type='text/javascript' src='http://www.trirand.com/blog/jqgrid/js/jquery-ui-custom.min.js'></script>        
    <script type='text/javascript' src='http://www.trirand.com/blog/jqgrid/js/i18n/grid.locale-en.js'></script>
    <script type='text/javascript' src='http://www.trirand.com/blog/jqgrid/js/jquery.jqGrid.js'></script>

    <script>
    $(document).ready(function () {
        $("#list_records").jqGrid({
            url: "getGridData.php", // I want to change this to be on the same page to call the data from the database, do I have to use the data: varname?
            datatype: "json",
            mtype: "GET", // should I change this to data type: local if I want to change the url?
            colNames: ["User Id", "User Name", "First Name", "Last Name"],
            colModel: [
                { name: "invid",align:"right"},
                { name: "invdate"},
                { name: "amount"},
                { name: "tax"}
            ],
            pager: "#perpage",
            rowNum: 10,
            rowList: [10,20],
            sortname: "invid",
            sortorder: "asc",
            height: 'auto',
            viewrecords: true,
            gridview: true,
            caption: ""
        });     
    });
    </script>
</head>

<body>
<table id="list_records"><tr><td></td></tr></table> 
<div id="perpage"></div>
</body>
</html>

And I have the php mysql code below:

<?php 
$conn = mysql_connect("localhost", "root", "") or die("Connection Error: " . mysql_error()); 
mysql_select_db("jqgrid") or die("Error connecting to db."); 

$page = $_GET['page']; 
$limit = $_GET['rows']; 
$sidx = $_GET['sidx']; 
$sord = $_GET['sord']; 

if(!$sidx) $sidx =1; 

$result = mysql_query("SELECT COUNT(*) AS count FROM invheader"); 
$row = mysql_fetch_array($result,MYSQL_ASSOC); 

$count = $row['count']; 
if( $count > 0 && $limit > 0) { 
    $total_pages = ceil($count/$limit); 
} else { 
    $total_pages = 0; 
} 
if ($page > $total_pages) $page=$total_pages;
$start = $limit*$page - $limit;
if($start <0) $start = 0; 

$SQL = "SELECT * FROM invheader ORDER BY $sidx $sord LIMIT $start , $limit"; 
$result = mysql_query( $SQL ) or die("Couldn't execute query.".mysql_error()); 

$i=0;
while($row = mysql_fetch_array($result,MYSQL_ASSOC)) {
    $responce->rows[$i]['id']=$row['invid'];
    $responce->rows[$i]['cell']=array($row['invdate'],$row['amount'],$row['tax'],$row['total']);
    $i++;
}
echo json_encode($responce);
?>

This is fully working. However, I don't want to use the getmethod. I want to put it all in a php page. Can someone give me a sample code on how can I achieve this preferably using an array. Thanks in advance!

UPDATE

I have now managed to find out on how I can convert php query results to javascript by following the instruction given here http://www.dyn-web.com/tutorials/php-js/json/array.php

My problem now is I'm unable to use the converted variable into jqgrid. I wanted to have the same result that is on this page http://trirand.com/blog/jqgrid/jqgrid.html#t95, only difference is I used converted php results into javascropt instead of creating a static data.

Below is my script code:

var mydata = <?php echo json_encode($dataitems)?>;
jQuery("#list4").jqGrid({
    data: mydata,
    datatype: "local",
    height: 250,
    colNames:['Inv No','Date', 'Client', 'Amount','Tax','Total','Notes'],
    colModel:[
        {name:'id',index:'id', width:60, sorttype:"int"},
        {name:'invdate',index:'invdate', width:90, sorttype:"date"},
        {name:'name',index:'name', width:100},
        {name:'amount',index:'amount', width:80, align:"right",sorttype:"float"},
        {name:'tax',index:'tax', width:80, align:"right",sorttype:"float"},     
        {name:'total',index:'total', width:80,align:"right",sorttype:"float"},      
        {name:'note',index:'note', width:150, sortable:false}       
    ],
    multiselect: true,
    caption: "Manipulating Array Data"
});

Upvotes: 0

Views: 757

Answers (1)

Machavity
Machavity

Reputation: 31624

While this isn't terribly efficient you can do something like this

$data = array();
while($row = mysql_fetch_assoc($result)) $data[] = $row;
echo '<script>var data =' . json_encode($data) . ';</script>';

At this point you will have a JSON object that contains all your data. This will make for a longer page load but will do what you asked without AJAX

While I'm at it, mysql_ functions are deprecated. Copnsider switching to mysqli_

Upvotes: 1

Related Questions