JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.10.3/themes/redmond/jquery-ui.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.13.0/css/ui.jqgrid.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.10.3/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.13.0/js/i18n/grid.locale-en.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.13.0/js/jquery.jqgrid.src.js"></script>
<table id="jqGrid"></table>
<div id="jqGridPager"></div>
JavaScript
var jsonData = {so_total_total:4321, in_total_total:1234, rows:[{
crmentity_id:"60199", so_enduser_id:"6808", so_enduser_name:"enduser123"
},{
crmentity_id:"60136", so_enduser_id:"6362", so_enduser_name:"userend321"
}]};
var formatEnduser = function (cellValue, options, rowObject, action){
return rowObject.so_enduser_id == undefined ? '' : '<a href="index.php?module=Accounts&view=Detail&record='+rowObject.so_enduser_id+'">'+rowObject.so_enduser_name+'</a>';
}
$("#jqGrid").jqGrid({
datatype: "jsonstring",
datastr: jsonData,
jsonReader: {
root: 'rows',
id: 'crmentity_id',
repeatitems: false,
page: function(obj) { return 1; },
total: function(obj) { return 1; },
records: function(obj) { return obj.rows.length; },
},
autowidth: true,
height: 600,
shrinkToFit: true,
rownumbers: true,
rowNum: 5,
pager: false,
loadonce: true,
viewrecords: true,
colModel: [
{
name: 'crmentity_id',
key: true,
hidden: true
},
{
label: 'Enduser',
name: 'so_enduser_name',
searchoptions: {
sopt : ['cn']
},
formatter: formatEnduser
},
]
});
$('#jqGrid').jqGrid('filterToolbar');