jqGrid Example

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/base/jquery-ui.css">
<link rel="stylesheet" href="http://trirand.com/blog/jqgrid/themes/ui.jqgrid.css">
<script src="http://trirand.com/blog/jqgrid/js/i18n/grid.locale-en.js"></script>
<script src="http://trirand.com/blog/jqgrid/js/jquery.jqGrid.min.js"></script>
<table id="list"></table>
<div id="pager"></div>

JavaScript

var myData = [{
    id: 1,
    name: "aaz",
    total: 9
}, {
    id: 2,
    name: "bbz",
    total: 11
}, {
    id: 3,
    name: "ccz",
    total: 12
}];

$("#list").jqGrid({
    datatype: "local",
    colNames: ["Id", "Name", "Total"],
    colModel: [{
        name: "id",
        index: "id",
        sorttype: "int"
    }, {
        name: "name",
        index: "name"
    }, {
        name: "total",
        index: "total",
        formatter: function(cellvalue, options, rowObject){
            if(cellvalue>10)
                return '<span style="background-color: red; display: block; width: 100%; height: 100%; ">' + cellvalue + '</span>';
            else
                return cellvalue;
        }
    }],
    caption: "Viz Test",
    pager: '#pager',
    search: true,
    multiselect: true,
    data: myData
});