15 49.0138 8.38624 1 0 4000 1 https://codeisall.com 300
jQuery Datatable in MVC - codeisall.com

jQuery datatables in MVC

In the previous article, you have learned about what is the Areas in MVC and how we can use them in MVC applications. 

In this article, you will learn about what jQuery Datatables is, the advantages of jQuery Datatables, and how to use it in an MVC application.

What is jQuery Datatables

DataTables is a powerful jQuery plugin for creating tables in your web applications. It provides facilities for searching, sorting and pagination without any configuration.

You can manage a large number of records in tabular form using jQuery Datatable plugin with custom configuration for page size, no of records, custom column sorting, etc.

Advantages of jQuery Datatables

  • Free open source software
  • Zero configuration
  • Pagination
  • Instant search
  • Multi-column ordering
  • Use almost any data source
  • Easily theme-able
  • Wide variety of extensions
  • Mobile friendly
  • Alternative pagination styles
  • Change language information
  • An many more

Setting up jQuery Datatables

Download a stable version of jQuery Datatables from datatable’s official site. Place that download code into your project and use it. Otherwise you can use CDN for jQuery Datatables file. As the name suggests it is a jQuery plugin, you must include jQuery library too from their official site.

jQuery Datatables in MVC Application

Step 1

Create a new project in asp.NET MVC, you can refer to create an asp.NET MVC application from here. Either you can also implement in existing applications or projects as well.

Step 2

Download jQuery Datatables from here. Or you can use CDN as well and you can also use NuGet package manager for .NET applications. asp.NET project by default loaded jQuery and Bootsrtap library, so no need to download jQuery library separately.

Step 3

Place the downloaded library in the Scripts folder or any other folder as you like. As shown in the below image there are many js files located in the Scripts folder. And all are associated with jQuery and Bootstarp library files. I have put my downloaded jQuery Datatables into it.

That contains CSS files for applying styles for datatables and js files for functions like sorting, searching and pagination.

Step 4

Include jQuery Datatables library from _Layout.cshtml file or your view page. I’m including it in _Layout.cshtml page so it’s globally accessible. Write the following line to include your datatable style to the web application. You should write it in before the </head> tag.

Write another line to include your datatable js to the web application. You should write it in before the </body> tag.

You can find there is some code block look like @Scripts.Render("~/bundles/bootstrap") that is the part of bundling, you can also add your stylesheet and and js file into bundling. For that you can refer to bundling and minification.

Step 5

I’m displaying data in a Home controller’s Index view. You can create a view for displaying data in data tables. For adding a new view go to the controller and add the method, right click on the newly created method and add view.

Here in above code apply datatables using table id selector. Above example is zero configuration you just need to call $().DataTable(); function.

searching , sorting and pagination by default added to the table as shown in the example.

jQuery-datatables-in-MVC2-codeisall.com

From the following code block I have set data size 5 per page. If you are not writing pageLength then it takes 10 by default.

Binding Data with Array

You can bind datatable data with an array. You write just table head or just table and set the data property to the array name. The following example shows binding data with arrays.

Binding Data with JSON

In the above example we are binding data with an array, we can also set data using JSON as well, you have to set the fields of the JSON to the columns property of DataTables.

Binding with AJAX Request

In jQuery datatables you can set data from JSON data sources like file or APIs and set it into datatables using AJAX request. Here I use an AJAX request to get data from JSON file that is located in my project’s Content folder. Make an AJAX call to get data from JSON file and show that data into datatable.

EmpDataSource.json

View File

To make AJAX requests you need to use AJAX property of datatable and provide url and dataSrc to that property.

You can find more example and advanced options in datatables official site.

I hope this article will help you to understand how jQuery Datatables can be used in MVC applications and also what is the advantages of use jQuery Datatables. We will be happy to help you if you have any issues or queries. Comment your suggestions and issues and we will try to resolve it.

Share:
Category:MVC
PREVIOUS POST
Areas in MVC
NEXT POST
Save Data with AJAX in MVC