Background

jQuery plugin dataTable is vastly used in web applications. It can be easily integrated with repeater and table. DataTable plugin is used to make a normal Gridview/table/repeater to a powerful table having functionalities such as:

Dynamically add a new row

Individual column filtering

Highlight rows and columns

Show and hide details about a particular record

User selectable rows (multiple rows)

User selectable rows (single row) and delete rows

Editable rows (with jEditable)

Submit form with elements in table

Index column (static number column)

Show and hide columns dynamically

Regular expression filtering

Apart from the above listed APIs, DataTable plugin gives many more functionalities. We can convert any table into a jquery datatable by writing below one line query.

//Applying dataTable on table element.
$("#table-id").dataTable();

There is a prerequisite for dataTable plugin to function properly. Which says that the target table must be in a well formed manner by having the 'thead' and 'tbody' sections. Here 'tfoot' section is optional. Below is the example of the an ideal target table:

In the above table, I have not used tfoot section because it is optional. One can also include the 'tfoot' section also if required.

Problem with Gridview and dataTable Plugin

If you use DataTable plugin with ASP.NET Gridview control, then you will find that dataTable plugin does not work with ASP.NET Gridview control. Let's see why gridview is not working with dataTable plugin and try to resolve it by writing one helper plugin.

Analysis of the Problem

If we use Gridview, then it renders HTML that is not compatible with dataTable plugin. Let's use the below Gridview code to see its rendered HTML table.

//Gridview Code used in ASP.NET page
<asp:GridViewID="GridViewExample"runat="server"AutoGenerateColumns="false"cellpadding="0"cellspacing="0"border="0"class="display"><columns><asp:BoundFieldHeaderText="Name"DataField="Name"/><asp:BoundFieldHeaderText="Town"DataField="Town"/><asp:BoundFieldHeaderText="Age"DataField="Age"/><asp:BoundFieldHeaderText="Employee Id"DataField="Id"/><asp:BoundFieldHeaderText="Skills"DataField="Skills"/></columns><rowstylecssclass="rowStyle"> //Giving class name to all rows
<HeaderStyleCssClass="headerStyle"/> //Giving class name to header row
<footerstylecssclass="footerStyle">//Giving class name to footer row.
</footerstyle></rowstyle>

In the above table HTML, you can see that there is only tbody section. However, there is no thead and tfoot sections.

As I mentioned earlier that in order to work dataTable properly, the target table must have 'thead' and 'tbody' as mandatory elements.

Absence of 'thead' and 'tbody' elements in the gridview's rendered HTML is the reason behind why Gridview control doesn't work with datatable plugin.

Therefore, if we use dataTable plugin on Gridview then it will never work. Let's see it in action. Below is the code required to apply dataTable plugin on gridview.

//calling dataTable plugin on above Gridview
$(">

If you run your application and load the page, then you will see that code will break in dataTables.js file by throwing an exception that says "asSorting is null or not an object". See the below screen-shot.

The above error comes because the gridview is not rendering in a required format before applying dataTable() method. If you click on continue button, then you would see the table without being modified by dataTable plugin. See the below screen-shot.

Let's Look for the Solution to this Problem.

Solution is GridviewFix Helper Plugin

I have created one helper plugin and named it as GridviewFix that can be applied on Gridview Control before calling dataTable plugin. This helper plugin will make ASP.NET Gridview Control's rendered table HTML compatible with the dataTable plugin and hence, GridviewFix will make dataTable plugin working with gridview control. Let's understand the same plugin's code details, its use, and see it in action.

This plugin will make Gridview's default rendered table HTML to required standard format for dataTable plugin. GridviewFix method is created inside the jquery prototype object so that it will be available in jQuery object.

Method Name is GridviewFix.

Parameters required to call this method are a JSON object having header, row and footer class names of the target table.

Before calling plugin method, the target Gridview should have proper class names for Header, Footer and Rows section.

How GridviewFix plugin works: As we know that default rendered HTML for gridview is not proper so if we could make it proper before rendering then we can solve this problem. Let's see how this is being done by GridviewFix helper plugin.

First it finds header row, footer row and normal rows by searching them with their given classnames.

After finding rows, it wraps them in their corresponding required element section. Like header row would be wrapped under 'thead' element, normal rows would be wrapped under 'tbody' element and footer row would be wrapped under 'tfoot' element section.

After segregating and grouping them in the above mentioned sections, it cleans the gridview table by removing its 'tbody' section.

And then it appends the above grouped sections one by one in the gridview table. Hence the gridview table now contains 'thead', 'tbody' and 'tfoot' sections with the proper rows inside them.

Therefore, if you apply GridviewFix plugin on gridview before applying dataTable plugin. Then the gridview would become ready by having proper table format required for dataTable and will work properly.

GridviewFix Plugin in Action

Now we will see how we can use GridviewFix plugin in our page and see how it is resolving the problem. We will take the same above mentioned Gridview control. Include GridviewFix.js helper plugin file in the script section of the page. Call GridviewFix() helper method before making dataTable() method call on gridview control. Below is the query for the same:

//Applying GridviewFix plugin before calling dataTable method.
$(">

In the above query, I have first called GridviewFix() method on gridview and then called dataTable(). I didn't pass any arguments on GridviewFix() method. Because, I have used the same class names in the target Gridview that is defined in the plugin's default parameter object. If you have given different class names for the header, footer and rows of the target gridview then you can pass their class names in the argument object of the GridviewFix() method. See code for that:

Now let's run the application and see the below screen-shot of the rendered gridview.

You can see, once we applied our helper plugin's GridviewFix() method on the gridview, then gridview is rendering properly and dataTable plugin is working fine. Therefore, GridviewFix plugin is a simple and useful solution to the above mentioned problem.

Source Code

I have attached the source code in this article. Inside the source code, I have put the datatable.aspx for the demo. There, I have used the GridviewFix plugin on gridview. If you run the project, then you can see the demo. The source code can be downloaded from here. Below is the screen-shot of the project.

History

This is the first version of GridviewFix plugin. I need your feedback to make it more generic and useful.

I enjoy on exploring new technologies by implementing and writing about them, great interest in learning Design Patterns and their implementations. I love learning, writing JavaScript; now my favorite JavaScript library is jQuery. I enjoy writing jQuery Plugins and core JavaScript. I also write Technical blogs here. You can find me on LinkedIn.

Comments and Discussions

Firstly, My Vote of 5 for this article...
Secondly, i m stuck at a problem since 2 weeks. I want to use jquery tooltip on DataTable row hover. It is working fine for the first page. But as i move on the next page index, no tooltip appears. Even if i sort the data, only the values for the tooltip for the first page which were loaded at first time gets displayed. No other rows gets the tooltip bound to it. I have tried the Pre/Post initializations also but couldn't find d result.

Since in jQuery you are binding the tooltip on document ready Only. That's why it is working for only 1st page. While in paging you are not refreshing the entire page that's why on second page the same jQuery code is not running. And hence tooltip is not showing up.

Therefore, create one method for binding tooltip to the rows in JavaScript put same binding code whih you have put on load only and call that method on paging , sorting and any partial refresh you do on the grid.