Chapter 7. Using the jQuery DataTables Plugin with Bootstrap 4

The jQuery DataTables plugin allows developers to add innovative interaction controls to any HTML table.

It supports a multitude of options and a wide range of extensions. ASP.NET MVC developers are also able to include this plugin in their own projects. The purpose of this chapter is not only to show you how to use the DataTables plugin, but also to illustrate how you can use almost any open source JavaScript and CSS plugin or framework with ASP.NET MVC.

In this chapter, we will cover the following topics:

• An overview of jQuery DataTables

• How to include jQuery DataTables in your ASP.NET MVC project

• Changing jQuery DataTables to support Bootstrap 4

• Loading and displaying data with jQuery DataTables and ASP.NET

• Using DataTables plugins and extensions

jQuery DataTables

DataTables is a free, open source plugin for the jQuery JavaScript library that was designed and created by a company called SpryMedia Ltd. This plugin makes adding features such as ordering, filtering, pagination, and searching to any standard HTML table incredibly easy to implement.

It also offers various extensions that enable Excel-like features, inline editing, and fixed columns, to name a few. The DataTables website offers well-documented examples, a blog, and a forum, which you can find on www.datatables.net.

The jQuery DataTables plugin can be added to your ASP.NET MVC project in a variety of ways, including NPM, Bower, or the DataTables Content Delivery Network (CDN).

Adding DataTables to your ASP.NET MVC project

To add the basic functionality for the DataTables plugin, the following two files are required:

• The first is jquery.dataTables.css and it contains the default CSS styling for the tables

• The second is jquery.dataTables.js and it contains the JavaScript logic for rendering the DataTables plugin and adding the necessary functionality

Both these files are available at the DataTables CDN at the following links:

• https://cdn.datatables.net/1.10.11/css/jquery.dataTables.min.css

• https://cdn.datatables.net/1.10.11/js/jquery.dataTables.min.js

Using the DataTables Bower package

You can also add all the required CSS and JavaScript files needed for jQuery DataTables as well as all the CSS and JavaScript files for the extensions using Bower. Complete the following steps to add jQuery DataTables when using Bower:

1. In Visual Studio, open the bower.json file. If you do not see the bower.json file inside the Visual Studio Solution Explorer, click on the Show All Files button...

Loading and displaying data in jQuery DataTables

In order to implement the jQuery DataTables plugin, you'll first need to create a new view that will list data inside an HTML table. For this example, you'll create a view that displays a list of customers. The list can be read from any data source, such as a SQL Server database. In this example, a simple List object will be used.

To accomplish this, complete the following steps:

1. In Visual Studio, add a new controller class called CustomerController.cs to the Controllers folder.

2. Add a new folder called Models to the root of your project and add a new class called Customer.cs to it.

3. The Customer class will be used to retrieve a list of sample customer records. The code for the class is as follows:

           public class Customer 
           { 
               public string CustomerCode { get; set; } 
               public string CompanyName { get; set; } 
               public string ContactName { get; set; } 
               public string...

DataTables plugins

jQuery DataTables provides a lot of built-in features and flexibility, but if you wish to add your own features or need extra flexibility, it does provide a plugin architecture.

Note

These are just some of the plugins available for the DataTables library. To see a full list of available plugins, visit https://datatables.net/plug-ins/index

Date sorting

Because of the wide variety of different date formats, sorting dates can sometimes prove to be very challenging. Fortunately, jQuery DataTables provides a flexible solution for sorting date fields using the Moment.js JavaScript library.

Note

Moment.js is a free and open source library that makes it easy to display, parse, manipulate, and validate dates in JavaScript. You can read more about the Moment.js library at http://momentjs.com/.

To enable date sorting on the Created Date column used in the previous example, complete the following steps:

1. Open the Index.cshtml file inside the Views\Customer folder.

2. Include the moment.js library...

DataTables extensions

The jQuery DataTables plugin provides a wide variety of extensions that can enhance the functionality of the plugin dramatically.

Note

To see a list of all available extensions for the DatatTables library, see https://datatables.net/extensions/index

The ColReorder extension

The ColReorder extension allows users to reorder table columns by clicking and dragging the column header to the location they prefer. To enable column reordering for your DataTables HTML table, complete the following steps:

1. Open the _Layout.cshtml file and add a reference to the dataTables.colReorder.css file:

           <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net        /colreorder/1.3.1/css/colReorder.bootstrap.min.css" /> 
   

2. Open the view .cshtml file and add a reference to the DataTables colReorder extension JavaScript file:

           <script type="text/javascript" charset="utf8" src="//cdn.datatables.net
           /colreorder/1.3.1/js/dataTables.colReorder.min...

Summary

In this chapter, you've implemented a sortable, searchable, and extendible HTML table using the jQuery DataTables plugin. You've also explored how to specify that the plugin should use the Bootstrap 4 styles. This chapter should also have given you the confidence to explore other open source plugins and incorporate them into your own ASP.NET MVC projects.

In the next and last chapter, you'll learn more about using the free Visual Studio Code editor to create ASP.NET MVC sites that use Bootstrap 4 for styling.