Jquery plugin for Grid view: GridViewFix

Introduction

In this article, I have discussed the problem that developer faces while using dataTable plugin with Asp.net Gridview control and suggested the solution for the same problem. This article is for you, if you are using very famous dataTable jquery plugin  with Asp.Net data-bound server controls.

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:

1. Dynamically add a new row
2. Individual column filtering
3. Highlight rows and columns
4. Show and hide details about a particular record
5. User selectable rows (multiple rows)
6. User selectable rows (single row) and delete rows
7. Editable rows (with jEditable)
8. Submit form with elements in table
9. Index column (static number column)
10. Show and hide columns dynamically
11. Regular expression filtering

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

Collapse | Copy Code

    //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:

Collapse | Copy Code

     //Ideal Table structure for applying dataTable plugin.
<table id="table_id">
    <thead>
        <tr>
            <th>
                Column 1
            </th>
            <th>
                Column 2
            </th>
            <th>
                etc
            </th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                Row 1 Data 1
            </td>
            <td>
                Row 1 Data 2
            </td>
            <td>
                etc
            </td>
        </tr>
        <tr>
            <td>
                Row 2 Data 1
            </td>
            <td>
                Row 2 Data 2
            </td>
            <td>
                etc
            </td>
        </tr>
        //rest rows...
    </tbody>
</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.