jQuery DataTables in ASP.Net MVC: Part 2

If you are new to this plug-in, please go through the previous article that will provide you the basics about the jQuery plug-in.

Part 1: jQuery Data tables

In Part 1, I explained that we need to trigger the jQuery data tables inside the HTML page. If we invoke the following piece of jQuery code inside the jQuery Ready event, the jQuery data table is effective with its magic.

Let's explore this together, guys.



Figure 1: Exploring Tables

Step 1

Some JavaScript and CSS files for jQuery Data tables plug-in are necessary.

Step 2

Within the jQuery ready event, simply invoke the dataTable() method that has a vital role in rendering the jQuery data table within the UI.

Step 3

The table head (<th>) rows contain the data table headers, it's very important to render your data in data table format. If you skip this <th> tag completely then you won't be able to find any grid options on the screen.

Like paging, sorting and searching, you can simply see the data being rendered inside the table. Even for styles, you won't be able find any default styles also initialized on the screen.

Let's prove it guys. Try to browse the preceding HTML page using the Mozilla browser and open the Mozilla Firebug add in using the shortcut F12.

Figure 2: Mozila Firefox

If you see the preceding HTML output on the Mozilla Firefox, without any builtin data tables styles its simply rendering the data as a table format.

If you see the HTML source via Mozilla Firebug, no styles have been applied to any of the rows, even if we explicitly include the CSS class within a table tag. So the <th> tag is very necessary to render your output as grid format, please be aware of that.

In the remaining procedure I will prove to you guys that a jQuery Data table is customizable. That means you can customize them based on your business needs, but again up to certain limits.

Figure 3: Data Table

The preceding picture clearly shows all the data of the entire data table in HTML format, it's automatically placing the HTML table inside the div id tblEmployee_Wrapper.

The tblEmployee_Length div tag contains the list of page size's rendering on the HTML Select control, if we enable the lengthMenu property within the data table then the user can customize the page size. It will expect the parameter type as a two-dimensional JavaScript array.

< Script > $(document).ready(function()
{
    $("#tblEmployee").dataTable({
        "lengthMenu": [
            [3, 10, 25, 50],
            [3, 10, 25, 50]
        ]
    });
});
< /Script>

If you don't include this lengthMenu property then you will get a default page size like 10, 25, 50, 100. And if you want to include the show all record option then please find the following code.

<Script>
$(document).ready(function ()
{
$("#tblEmployee").dataTable
(
{ "lengthMenu": [[5, 25, 50, -1], [5, 25, 25, “All”]] }
);
});
</Script>

tblEmployee_Filter div tag contains the general search options text box, if you provide any text it will search and filter the records from the entire dataset collection.

Basically the data table plug-in does the following three kinds of searches:

1. Global Search
   
   Search based on the provided text across all the columns.
   
   
2. Regular Expression
   
   Using the regular expression able to find some records.
   
   
3. Smart
   
   Internally data table using regular expression to do this kind of search, so we need to disable Regular expression search.

tblEmployee table contains all the table records as rows and columns using TR and TD tags. The following screenshot is clearly displaying how the header rows and body rows are decorated with built-in DataTable CSS styles.



Figure 4: CSS Style

If you see the preceding picture, each odd row is decorated with the Odd class and the same thing for the even rows. If you want to customize it then you can change the preceding classes within the Data Table CSS file.



Figure 5: TblEmployee

Finally the div – tblEmployee_paginate contains all the anchor tags for moving it by page. I hope you guys have enjoyed this a lot. After reading this article, please provide your valuable comments. Really, it will provide me the energy for preparing future articles.