jQuery jqGrid Example with JSON Data Using Rest Service

jqGrid is a popular jQuery Plugin for table grid. You can use jqGrid for displaying and editing data in tabular format. It has some other more sophisticated features like add, edit, sorting, paging, subgrids, TreeGrids, grouping, and so on. This tutorial help to convert HTML table into featured table grid using jqGrid jQuery plugin.

You can download jqGrid library from GitHib repository this is the fork of jqGrid 4.7.0 – the latest version available under MIT/GPL-licenses.

You can also check other tutorials on table plugin,

• jQuery jqGrid Example with JSON Data Using Rest Service
• Datatables Example with JSON Data Using Rest WebService
• Simple Example and Use of jQuery Flexigrid
• Best Free jQuery Table and Grid Plugins

jqGrid supported 40+ languages so that you can localize your table grid. The locale file is optional because the same information is already included in the jquery.jqgrid.min.js or jquery.jqgrid.src.js file.

jQuery jqGrid Example listing with JSON data using Restful web service

Here, I am creating a simple listing of data with pagination using rest service and jqGrid. I am using the sample rest service to get JSON data and passed to jqGrid. I have added pagination and sorting on the table grid listing.

Step 1: Included all jqGrid and jQuery files in the head section of index.html file.

<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/cupertino/jquery-ui.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.13.5/css/ui.jqgrid.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.13.5/js/jquery.jqgrid.min.js"></script>

I am using cupertino jquery UI theme. you can change jQuery UI theme as per your need.

Step 2: Created HTML table and pagination layout for jqGrid listing in index.html file.

    <table id="photos" class="display" cellspacing="0" width="100%">
    </table>
    <div id="pager2"></div>

I am taking #photos for table listing record and #pager2 for pagination container.

Step 3: Fetched data from restful web service and passed data to jqGrid.

  $(document).ready(function(){
    $("#photos").jqGrid({
        url:'https://jsonplaceholder.typicode.com/posts',
        datatype: "json",
        colNames:['ID', 'User ID', 'Title', 'Body'],
        colModel:[
            {name:'id',index:'id', width:55},
            {name:'userId',index:'userId', width:55},
            {name:'title',index:'title', width:300},    
            {name:'body',index:'body', width:350, sortable:false}        
        ],
        rowNum:10,
        loadonce: true,
        rowList:[10,20,30],
        pager: '#pager2',
        sortname: 'id',
        viewrecords: true,
        sortorder: "desc",
        caption:""
    });
});

in the above code, I have used jqGrid() instance and passed JSON data into that, The configured jqGrid parameters as per our need, like no of rows in a single page, pagination lists, pager div id, default sort column and loadonce param to load all json data at once, you can change this configurable variable as per your requirement.

You can configure column display text, width and sortable properties.I am using sortable:false attribute on body column so that body column is not sortable.

Step 4: Configured pagination on pager container.

$("#photos").jqGrid('navGrid','#pager2',{edit:false,add:false,del:false});

You can download source code and Demo from below link.