Implementation Of jQuery Data Table In ASP.NET Web Forms

Introduction

JQuery offers the fastest way to populate the data in GridView.

The jQuery Data Table plugin is very cool and easy to use. It provides a lot of options like:

Filtration

It helps to filter your data in any order. If you do that by using C# code, you will have to write a lot of code but in jQuery, it automatically does this in just a single click.

Searching

This provides us a very quick way of searching in real time. If you do that using code, you have to send the request again and again to the server which would decrease the response time.

Pagination

jQuery plugins provide a pagination option and here, we can adjust on loading how much data should be displayed in the table.

Exporting

Here, we have one more option to export our Grid View in any type of format -

1. Excel
2. PDF
3. CSV

But I have only exported in the Excel format for this demonstration.

Visibility

Visibility of columns is also a significant option which helps us make particular columns visible or hidden.

A bunch more options are there in this plugin. So, let’s start with making a new project in Visual Studio.

Step 1

Just open Visual Studio and select a new project. Give a name to your application as you want and click OK.

Step 2

When we start with a new project, it gives us a built-in template which I have removed because I wanted to start from scratch. Now, at this stage, we have just a simple HTML code which we need for making an application from scratch.

Step 3

Here, we have two options -

1. We make this in the master page environment that is used for making our default theme on every page. The advantage of it is that we need to place all JS, CSS files, and functions at one location and these will be accessible in all forms. If you want to do it in a master page environment, then add a new content page.

2. You can also do it without making any master page. I worked in a master page environment; that’s why I added a content page and dragged the GridView.

Step 4

Now, I have to load my GridView from my database table’s record. So, I make one method of executeDT for fetching the data from the database (just change your connection string which I have given in the web.config file) and this method is to be called in the new method Fill_Grid. I have made a separate method for bifurcation and below is the code.

 

After making this and calling behind the page load event, I run this application. Well, it looks like this. Here, you can note it is only showing data but there is no filtration, searching, or exporting option.

 

Step 5

At this stage, we still don't use jQuery. At this stage, I want to share something that the jQuery plugin requires -- its predefined format which is an HTML table. Ours is not an HTML table, it’s GridView so to convert it into an HTML table, we should do some code which is below.

 

Step 6

Here, we want to add pagination, filtrations, exporting in Excel and searching. We can do this by GridView but we can also do it through jQuery Data Table, and it's simple and fast. So, download files from the jQuery official website and include in your project and make a JS function and add options as I did below.

 

Step 7

Run the application.

 

Summary

Today, we learned how to use the jQuery Data Table plugin in our ASP.NET Web Forms application. Everyone prefers to use this because of its high performance and less code. Many other options are there in this plugin. It is suggested that you read jQuery Data Table plugin documentation which will give you more knowledge.

Thanks for reading!!!