jqGrid fetched json but has empty rows and no data

Question

JSON As generated by Spring 3 MVC @ResponseBody

{
    \"total\": \"1\",
    \"page\": \"1\",
    \"records\": \"2\",
    \"rows\":         


        

Answer 1

Your main error is that the data are wrong formatted. You should use

{
    "total": "1",
    "page": "1",
    "records": "2",
    "rows": [
        {
            "id": "1",
            "cell": ["1", "1", "6", "0", "Credit Card", "Movie Hall Pass",
                     "250.0", "2011-03-16", "Entertainment" ]
        },
        ...
    ]
}

instead of

{
    "total": "1",
    "page": "1",
    "records": "2",
    "rows": [
        {
            "id": "1",
            "cell": {
                "accountId": 1,
                "userId": 1,
                "transactionId": 6,
                "subCatId": 0,
                "accountName": "Credit Card",
                "remarks": "Movie Hall Pass",
                "amount": 250.0,
                "transactionDate": "2011-03-16",
                "subCatName": "Entertainment"
            }
        },
        ...
    ]
}

In general jqGrid is flexible enough to read almost any JSON data. You can just define the jsonReader jqGrid parameter and sometime additionally jsonmap property in the column definition. In your case for example one can read your data with the following jqGrid definition

$("#transactionLogTable").jqGrid({
    // ... other parameters
    cmTemplate: {width: 100},
    colModel:[
        {name:'transactionId',   jsonmap: 'cell.transactionId'},
        {name:'userId',          jsonmap: 'cell.userId'},
        {name:'subCatId',        jsonmap: 'cell.subCatId'},
        {name:'subCatName',      jsonmap: 'cell.subCatName'},
        {name:'accountId',       jsonmap: 'cell.accountId'},
        {name:'accountName',     jsonmap: 'cell.accountName'},
        {name:'transactionDate', jsonmap: 'cell.transactionDate'},
        {name:'amount',          jsonmap: 'cell.amount'},
        {name:'remarks',         jsonmap: 'cell.remarks'}
    ],
    height: "auto",
    jsonReader: { repeatitems: false }
});

Here I used jsonReader: { repeatitems: false } to define that JSON data for a row are not in array for, but in for of object with named property. The property like jsonmap: "cell.userId" is needed to specify that the value for the corresponding grid column should be not as the default userId property of the row object, but are additionally are the child of the "cell" property. By the way you use 'userid' as the column name and 'userId' in the JSON data. It is better to use the same names as the JSON data. In you use the same 'index' property as the 'name' you can drop out the 'index'. In the case the value of the 'name' property will be used as the 'index'.

Because you used "width:100" property for all columns of your grid I used cmTemplate: {width: 100} parameter to make colModel definition shorter and better to read.

You can see the modified grid live here.

I recommend you additionally post the date always in the ISO form YYYY-mm-dd and use formatter:'date' and datefmt properties of colModel (for example formatter:'date', formatoptions:{newformat:'d-m-Y'}, datefmt: 'd-m-Y')