jGrid

Rakesh Ku Nayak

4.80/5 (5 votes)

Sep 25, 2014

CPOL

1 min read

22911

694

A new plugin named jGrid to display grid with pagination and sorting functionality in an easy way

Introduction

To display grid with pagination and sorting functionality in an easy way, I have created a plugin named jGrid.
In this tutorial, I am trying to explain this new plugin. This is a small JavaScript library which enables us to create grid with pagination and sorting functionality. This plugin facilitates retrieving page wise data from server.

Advantages

It is very easy to implement.
It works with any lower or higher versions of jQuery plugin.
It works with any mainstream browser.
Grid rendering is fast because it uses only <div> HTML tag to display grid.
No image is needed to implement.

Implementation

Before going to implement, we need to download jGrid plugin and CSS files.

Then add these files in your project folders.

This plugin depends on jQuery plugin. So first, you need to add reference of jQuery plugin.

<script src="http://code.jquery.com/jquery-1.10.1.min.js" type="text/javascript"></script>

Then add reference of jGrid plugin and CSS file.

 <script type="text/javascript" src="Scripts/jgrid-1.0.js"></script>
 <link href="Styles/jgrid.css" rel="stylesheet" />

Put <div> tag in your page.

 <div id="divGrid">
 </div>

To make this div as grid with sorting and pagination functionality, you will write in JavaScript file as:

$(function () {
  $("#divGrid").jGrid({
    url: '/Service1.svc/GetPersons',
    columns: [
      { title: "First Name", index: "FirstName", width: '20' },
      { title: "Last Name", index: "LastName", width: '20' },
      { title: "Birth Date", index: "DateOfBirth", width: '20', align: 'center', sortable: false },
     { title: "Age", index: "Age", width: '10' },
      { title: "Gender", index: "Gender", width: '10' },
      { title: "Edit", index: "Edit", width: '10', align: 'center', sortable: false, formatter: editLink },
      { title: "Delete", index: "Delete", width: '10', align: 'center', sortable: false, formatter: deleteLink }
    ],
    width: '1000',
    pageSizes: [5, 10, 20, 30],
    rows: 10,
    sortName: 'Age',
    sortOrder: 'desc'
  });
});
 
function editLink(rowValue) {
  return '<a href="#">Edit</a>';
}
 
function deleteLink(rowValue) {
  return '<a href="#">Delete</a>';
}

HTML

The HTML file will look like this:

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="http://code.jquery.com/jquery-1.10.1.min.js" type="text/javascript"></script>
<script type="text/javascript" src="Scripts/jgrid-1.0.js"></script>
<link href="Styles/jgrid.css" rel="stylesheet" />
<script type="text/javascript">
$(function () {
  $("#divGrid").jGrid({
    url: '/Service1.svc/GetPersons',
    columns: [
      { title: "First Name", index: "FirstName", width: '20' },
      { title: "Last Name", index: "LastName", width: '20' },
      { title: "Birth Date", index: "DateOfBirth", width: '20', align: 'center', sortable: false },
      { title: "Age", index: "Age", width: '10' },
      { title: "Gender", index: "Gender", width: '10' },
      { title: "Edit", index: "Edit", width: '10', align: 'center', sortable: false, formatter: editLink },
      { title: "Delete", index: "Delete", width: '10', align: 'center', sortable: false, formatter: deleteLink }
    ],
    width: '1000',
    pageSizes: [5, 10, 20, 30],
    rows: 10,
    sortName: 'Age',
    sortOrder: 'desc'
  });
});
 
function editLink(rowValue) {
  return '<a href="#">Edit</a>';
}
 
function deleteLink(rowValue) {
  return '<a href="#">Delete</a>';
}
</script>
</head>
<body>
  <form id="form1" runat="server">
    <div id="divGrid">
    </div>
  </form>
</body>
</html>

The server side code can be webmethod, WCF methods or web API methods.
You should pass four parameters (sidx, sord, page, rows) to the server side method.

public CustomClass GetPersons(string sidx, string sord, int page, int rows)
{
  //write code to retrieve page wise list

  //return result in this format
  return new CustomClass
  {
    totalPages = totalPages,
    rows = personList,
    totalRecords = totalRecords
  };
}

Please note that the return result format should be:

return new CustomClass
{
  totalPages = totalPages,
  rows = personList,
  totalRecords = totalRecords
};

History

In this tutorial, I have explained the advantages and features of the plugin jGrid. This plugin now includes only sorting and paging features. I will include more features in the next version of this plugin later.

You can download the demo project from the link at the top of the tip.