Question

Hello StackOverFlow nation . I’m trying to add information to jqGrid , which is retrieved from MySQL database. I’ve two files => index.html and data.php (both in the same directory)

index.html source =>

<script type="text/javascript">
$(function(){
    $("#jqGrid_tb").jqGrid({
        url: "data.php",
        datatype: "json",
        sortable: true,
        height: "auto",
        colNames: ["Name","Surname","Birth Year","Famous Film"],
        colModel: [
            {name: "name", index: "name", width: "150"},
            {name: "surname", index: "surname", width: "150"},
            {name: "b_year", index: "year", width: "150"},
            {name: "film", index: "film", width: "200"}
        ],
        rowNum: 5,
        rowList: [5,10,15],
        viewrecords: true,
        pager: $("#pager"),
        caption: "Famous Actors",
    }).navGrid("#pager");
});
</script>

<div id="grid">
    <table id="jqGrid_tb"></table>
    <div id="pager"></div>
</div>

data.php source =>

include ("JSON.php");

$json = new Services_JSON();

$con = new mysqli("host","user","pswd","db");

if (!$con->connect_errno){
    if ($r = $con->query("SELECT * FROM actors")){
        while ($row = $r->fetch_assoc()){
            $info[] = array(
                "name" => $row[name],
                "surname" => $row[surname],
                "b_year" => $row[b_year],
                "film" => $row[film],
            );
        }
        $r->free();
    }
}

echo $json->encode($info);

if (isset($con)){
    $con->close();
}

jqGrid is shown without any information in index.html file , also when opening data.php file information is successfully encoded into JSON format , whats wrong I can’t understand . Please help , thanks …

Answer 1

Your response format is wrong. You can go to jqGrid Demos page where you will find a sample for PHP/MySQL after expanding Loading Data and then choosing JSON Data.

The proper format of data should look like this:

{
    "total": "1",
    "page": "1",
    "records": "2",
    "rows": [
        { "name": "Robert", "surname": "De Niro", "b_year": "1943", "film": "Once Upon A Time In America" },
        { "name": "Al", "surname": "Pacino", "b_year":"1971", "film": "Scent Of A Woman"}
    ]
}

Where:

• total –> total count of pages
• page –> current page number
• records –> total count of records
• rows –> the rows of data

Also if you want rows to be objects, you need to disable repeatitems in jqGrid jsonReader options:

$("#jqGrid_tb").jqGrid({
    ...
    jsonReader: { repeatitems: false }
});

It is also adviced for rows to have unique id for later reference.