I successfully created a table using datatable with the following code:
<table id="display" class="display" width="100%" data-search="true"></table>
<script src="//cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>
<script src="//cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css"></script>
<script>
$(document).ready(function () {
var data = JSON.parse('@DATA_QUERIED');
var keys = Object.keys(data[0]);
var columns = [];
for (var k in keys) {
columns.push({
'title': keys[k],
'data': keys[k],
'targets': k,
'width': 60
});
}
$('#display').DataTable({
'data': data,
'columns': columns,
'searching': true,
"paging": true,
"ordering": true,
"info": true
});
});
</script>
Now, I am wondering how to achieve the same result using jqGrid. Here is my attempt:
<table id="list5"></table>
<div id="paper5"></div>
<script>
$(document).ready(function () {
jQuery("#list5").jqGrid({
datatype: "json",
data: "{}",
colModel: [
{ name: 'USER_ID', index: 'USER_ID', width: 100 },
{ name: 'USER_NAME', index: 'USER_NAME', width: 140 },
{ name: 'LOGIN_NAME', index: 'LOGIN_NAME', width: 140 },
{ name: 'PASSWORD', index: 'PASSWORD', width: 140, align: "right" },
{ name: 'DESCRIPTION', index: 'DESCRIPTION', width: 140, align: "right" },
{ name: 'GROPU_ID', index: 'ROPU_ID', width: 140, align: "right" },
{ name: 'EMAIL', index: 'EMAIL', width: 200, sortable: false },
{ name: 'ACTIVE', index: 'ACTIVE', width: 50 },
{ name: 'ORGANIZATION_ID', index: 'RGANIZATION_IDz', width: 140}
],
paper:"lits5",
rowNum: 10,
rowList: [10, 20, 30],
pager: '#pager5',
sortname: 'USER_ID',
viewrecords: true,
sortorder: "desc",
caption: "Simple data manipulation",
})
jQuery("#list5").jqGrid('navGrid','#paper5',{edit:false,add:false,del:false});
});
</script>
Next, I have an SQL query as follows:
SECLECT *
FROM sec_log
To parse this data, I use the following code snippet:
var data = JSON.parse('@DATA_QUERIED');
var keys = Object.keys(data[0]);
var columns = [];
for (var k in keys) {
columns.push({
'title': keys[k],
'data': keys[k],
'targets': k,
'width': 60
});
My question now is: How can I achieve similar functionality with JQGrid? I need detailed guidance on working with JSON data in JQGrid compared to my previous experience with datatable.