Web Tutorials

HTML Tutorial
HTML5 Tutorial
Bootstrap3 Tutorial
Javascript Tutorial
TypeScript Tutorial
AngularJS Tutorial
CSharp Tutorial
.NET Tutorial
PHP Tutorial

Interview Q & A

ASP.NET Q & A
WEB API Q & A
WCF Q & A
JQuery Q & A
MVC Q & A
Bootstrap Q & A
LINQ Q & A
AJAX Q & A
SQL Server Q & A
C# Q & A
OOPS Q & A

Code Examples

AngularJS
Google MAP API V3
ASP.NET

Utility Tools

Html Encode
Html Decode
URL Decode
URL Encode
Base64 Encode
Base64 Decode
JSON Beautifier

JQuery DataTable Paging, Searching and Sorting In ASP.NET

Posted By: Ajay Saptaputre, 11 Oct,2015  |  Total View : 9805

In my previous article I discussed about create CRUD operation using Scaffolding with ASP.NET MVC 5 and database first approach using ASP.NET MVC 5 and Entity Framework 6 and model first approach using ASP.NET MVC 5 and Entity Framework 6

In this article I am going to discuss how to represent data in tabular format with sorting, searching and ordering features. Nowadays many online business web applications require representing data in tabular style with look and feel. There are lots of free tools and plug-in are available online which support's similar kind of data representation.

In this article I will discuss about very popular JQuery plug-in known as "DataTable". Here I will implement very basic DataTable example with JSON static data. All right, so before staring our sample DataTable web application let's understand about DataTable in brief.

DataTable are free open source plug-in for JQuery library. Being a JQuery plug-in, it uses many of the features of JQuery. It means that, in order to use DataTable you must include JQuery in your application. We can say DataTable has only one library dependency "JQuery".

DataTable works with JQuery 1.7 or newer version. In order to maximise the DataTable features, use latest version. DataTable typically includes everything else that it requires to work.

What is the advantage of using DataTable:

  • The beauty of DataTable is that it supports almost all data source such as post JSON data, static JSON from plain text file etc.
  • Support wide verity of UI themes like JQuery UI, Bootstrap, and Foundation etc
  • Fully internationalisable.
  • DataTable is free open source.
  • Support pagination, search and multi-column ordering.
  • Simple and easy to implement no extra effort require.

So let's open Visual Studio and start creating new empty web site. In this article I am using Visual Studio Express 2013 for Web but you can use Visual Studio 2013 as well.

Now start creating ASP.NET Web project in Visual Studio 2013.

Step 1: Start Visual studio 2013, click on "File" and then "New web site". I am selecting .Net framework 4.5 to build this sample application. All right, now give proper name as "DatatableSampleApp" to your application and click "Ok" button as below screen shot illustrate:


Step 2: Now right click on project from solution explorer and select "Add new item". Select "HTML Page" from "Add New Item" dialog window and give suitable name to it. In this sample e.g. "DisplayDataUsingDataTable.html". See below screen shot:


Step 3: Now right click on project from solution explorer and select "Add new folder" and rename it as "JSONData". This folder is used to keep JSON data file. So let's add new text file in "JSONData" folder and rename it as "JSONData.json". Add JSON data to the file as below code snippet:

{
  "data": [
    {
      "name": "Manoj M",
      "designation": "Tech Lead",
      "salary": "25000",
      "JoinDate": "2010/11/21",
      "Address": "12/12, East",
      "City": "Pune",
	  "State": "MH",
      "Zip": "542221"
    },
    {
      "name": "Rahul J",
      "designation": "General Manager",
      "salary": "120000",
      "JoinDate": "2011/11/21",
      "Address": "12-13-275, Baner",
      "City": "Pune",
	  "State": "MH",
      "Zip": "532222"
    },
    {
      "name": "Sachin S",
      "designation": "Developer",
      "salary": "12000",
      "JoinDate": "2011/01/01",
      "Address": "Street# 12, South Tukoganj",
      "City": "Indore",
	  "State": "MP",
      "Zip": "122311"
    },
    {
      "name": "Ajay S",
      "designation": "Tech Lead",
      "salary": "20000",
      "JoinDate": "2012/01/01",
      "Address": "12-13-283/284, Uppal",
      "City": "Hyderabad",
	  "State": "AP",
      "Zip": "745455"
    },
    {
      "name": "Manish T",
      "designation": "QA",
      "salary": "20000",
      "JoinDate": "2012/01/09",
      "Address": "Block# 12, Ho.No 12",
      "City": "Panjab",
	  "State": "PN",
      "Zip": "967575"
    },
    {
      "name": "Devendra R",
      "designation": "QA Lead",
      "salary": "25000",
      "JoinDate": "2013/01/09",
      "Address": "Streen# 1, Arera Colony",
      "City": "Bhopal",
	  "State": "MP",
      "Zip": "432333"
    },
    {
        "name": "Ashok R",
		"designation": "Manager",
		"salary": "105000",
		"JoinDate": "2011/01/09",
		"Address": "Streen# 1, Habsiguda",
		"City": "Hyderabad",
		"State": "AP",
		"Zip": "432333"
    },
    {
        "name": "Satya M",
		"designation": "Project Manager",
		"salary": "150000",
		"JoinDate": "2010/01/09",
		"Address": "12-13-275, Baner",
		"City": "Pune",
		"State": "MH",
		"Zip": "432333"
    },
    {
        "name": "Jimi S",
		"designation": "Director",
		"salary": "250000",
		"JoinDate": "2009/01/01",
		"Address": "12-13-275, Baner",
		"City": "Pune",
		"State": "MH",
		"Zip": "656566"
    },
    {
        "name": "Amit S",
		"designation": "Developer",
		"salary": "12000",
		"JoinDate": "2009/01/01",
		"Address": "12-13-275, Souttukoganj",
		"City": "Indore",
		"State": "MP",
		"Zip": "656566"
    }
  ]
}

Step 4: After adding all the required files the solution explorer will looks like below:


Step 5: Now we need to include jquery-1.11.3.min.js, jquery.dataTables.js and jquery.dataTables.min.css file in our project. You can download all the files from here . All right, now include these files in "DisplayDataUsingDataTable.html" page under head section. As below code snippet:

<script src="Scripts/jquery-1.11.3.min.js"></script>
    <script src="Scripts/jquery.dataTables.js"></script>
    <link href="css/jquery.dataTables.min.css" rel="stylesheet" />

Step 6: In order to use JQuery DataTable in our sample application, I have added below code in HTML's head tag. This is very simple JQuery Ajax call code that is loading static JSON data from specified location. Also, you can observer that I am setting some properties like "searching", "ordering", "pagingType" and "columns". Here "columns" array is used to assign property those maps with our JSON object properties. You can see here I am using JQuery $(document).ready() function that will execute once document is ready. As below code snippet:

<script type="text/javascript">
        $(document).ready(function () {
            $('#tblEmployee').DataTable({
                "searching": true,
                "ordering": true,
                "pagingType": "full_numbers",
                "ajax": "JSONData/JSONData.json",
                "columns": [
                    { "data": "name" },
                    { "data": "designation" },
                    { "data": "salary" },
                    { "data": "JoinDate" },
                    { "data": "Address" },
                    { "data": "City" },
                    { "data": "State" },
                    { "data": "Zip" }
                ]
            });
        });
    </script>

Step 7: All right, notice that "DataTable" extension method is used to assign loaded JSON data to "tblEmployee" DOM element. This "tbleEmployee" DOM element nothing but simple HTML table that will display all the records from JSON object. So let's add DOM element in HTML page as below:

<table id="tblEmployee" class="display" cellspacing="0" data-page-length='5'>
	<thead>
		<tr>
			<th>Name</th>
			<th>Designation</th>
			<th>Salary</th>
			<th>JoinDate</th>
			<th>Address</th>
			<th>City</th>
			<th>State</th>
			<th>Zip</th>
		</tr>
	</thead>
</table>

Step 8: Now our sample ASP.NET web application is ready to run. Press Ctrl + F5 and run the application, you can see below output in browser.


Appreciate your valuable feedback:

I hope this article is useful for you. I look forward for your comments and feedback. So please provide your valuable feedback so that I can make this blog better. You can also share this article by hitting below button.
Happy learning...

Download Code ⇩