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.