JSGrid Basic

HTML

<link rel="stylesheet" href="https://code.jquery.com/ui/1.10.4/themes/redmond/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.1/jsgrid.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.1/jsgrid.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.1/jsgrid-theme.css">
<div id="jsGrid"></div>

CSS

.jsgrid-cell { 
    overflow: hidden; 
}

.jsgrid-pager { text-align: center; }

JavaScript

$ (función () {

			$("#jsGrid").jsGrid({
				height : "auto",
				width : "100%",
				filtering: true,
				sorting : true,
				paging : true,
				autoload : true,
				pageSize : 10,
			
				controller : {
					loadData : function(filter) {
								return  $.ajax({
						        type: "GET",
						        url : "/Final/Reports",
						        data: "url",
					           return $.grep(this.data, function (item)
								  {
					                    return (!filter.patientId || item.patientId.indexOf(filter.Name) >= 0);
					                    return (!filter.patientName || item.patientName.indexOf(filter.Name) >= 0);
					                    return (!filter.genderId || item.genderId.indexOf(filter.Name) >= 0);
					                    return (!filter.mobile || item.mobile.indexOf(filter.Name) >= 0);
					                });
					            
						    
						  
						    }
				},
			}); 

		});