First include reference of the following JavaScript Libraries download it from this site.
1. jquery.jqGrid.src.js
SCRIPT
var dataTableExample = 'undefined';
var requestUri = "https://servername/_vti_bin/ListData.svc/DownloadTrackingList";
$(document).ready(function () {
loadDataTable();
});
function loadDataTable() {
console.log("loadDataTable");
$('#gridID').jqGrid({
datatype: 'json',
//Change url here it just dummy.
url: "https://servername//_vti_bin/ListData.svc/DownloadTrackingList",
type:"GET",
dataType:"json",
contentType: 'application/json;odata=verbose',
ajaxGridOptions: { contentType: "application/json; charset=utf-8" },
colNames:['Id','DocID','Title','DocName','DocURL','UserName','DownloadDate','Modified'], //define column names
colModel:[
{name:'Id',index:'Id',key: true, width:55, editable:true, editoptions:{readonly:true}, sorttype:'int'},
{name:'DocID', index:'DocID', width:150,sortable:true,editable:true},
{name:'Title', index:'Title', width:150,sortable:true,editable:true},
{name:'DocName', index:'DocName', width:150,sortable:true,editable:true},
{name:'DocURL', index:'DocURL', width:200,sortable:true,editable:true},
{name:'UserName', index:'UserName', width:150,sortable:true,editable:true},
{name:'DownloadDate', index:'DownloadDate', width:100,sortable:false,editable:true},
{name:'Modified', index:'Modified', width:100, sorttype:'date', editable:true, editrules:{date:true},formatter:'date', datefmt:'d/m/Y'}
],
jsonReader : {
root: "d.results",
cell: "",
repeatitems: false
},
rowNum:10,
rowTotal: 50,
rowList:[10,20,30],
pager: '#pager',
sortname: 'id',
loadonce: true,
viewrecords: true,
sortorder: "desc",
editurl: 'https://servername/_vti_bin/ListData.svc/DownloadTrackingList', //
caption:"CRUD on SharePoint server Data"
});
$("#gridID").jqGrid('navGrid','#pager',{});
$("#gridID").jqGrid('filterToolbar',{stringResult: true,searchOnEnter : false});
}
HTML
<head>
<script type="text/javascript" src="https://gkms.sharepoint.com/sites/Khaitan/SiteAssets/jquery-3.1.1.js"></script>
<!-- Add your CSS styles to the following file -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.6.0/css/ui.jqgrid.css" />
<!-- Add your JavaScript to the following file -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/themes/eggplant/jquery-ui.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-ui-bootstrap/0.5pre/css/custom-theme/jquery-ui-1.10.0.custom.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.6.0/css/ui.jqgrid.css" />
<!-- Add your JavaScript to the following file -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.6.0/js/jquery.jqGrid.src.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.6.0/js/i18n/grid.locale-en.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
<!--
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.6.0/plugins/ui.multiselect.js"></script>
<link rel="Stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.6.0/plugins/ui.multiselect.css" />
Add your JavaScript to the following file -->
<script type="text/javascript" src="https://servername/sites/sitename/Shared%20Documents/JQGridExample.js"></script>
<style>
.form-control {
border-radius: 0;
}
</style>
</head>
<body>
<div>
<div id='tblMain' style="float:left">
<table id="gridID"></table>
<div id="pager"></div></div>
</div>
</body>
</html>
References
Here most important thing to be take care is jsonReader here
https://stackoverflow.com/questions/23127039/unable-to-load-sharepoint-list-item-rest-api-response-in-jqgrid
http://www.json.org/js.html
http://sharepointrestapi.blogspot.in/
