JavaScript Data Grids

I recently had cause to build an editable grid out of HTML and JavaScript and settled on two jQuery plugins: DataTables and jEditable. I’ve really been impressed with both!

The DataTables plugin takes a basic HTML table and adds column sorting, filtering, pagination and much more. To create the default grid all it takes is the following:


The jEditable plugin allows the grid contents to be edited inline. So all you have to do is click on a value and a textbox or select list appears. Like DataTables, jEditable is quite flexible. Basic initialization is as easy as:


What I love about the jEditable plugin is that if you want a select list to appear when the cell is in edit mode, all you have to do is this:

  $('.editable').editable('http://URL_To_Page_To_Handle_Database_Action', {
    type: 'select',
    data: {’Ford’:‘Ford Motor Company’,‘Honda’:‘Honda North America’,‘selected’:'Toyota'} 

This configuration will cause the field to be a select list in edit mode and populated with the car company information in the data array. If you need the select list to be dynamically populated, you can provide jEditable with an array of values.

Since you initialize jEditable using a jQuery CSS selector, you can choose which columns become editable or even which columns are textboxes and which are select lists while in edit mode. Just apply unique CSS classes to the correct column.

If you use ASP.NET, you can create a method on page and decorate it with the [Web_Method] attribute. Then you can use the jQuery AJAX method to send data changes to an update method to be written to the database. If you want to have your select list be dyanmic (as mentioned above) you can also use the jQuery AJAX method to retrieve your option list.

If you didn’t need the pagination, sorting, filtering or other features provided by the DataTables plugin, you can just use the jEditable plugin on the HTML table.

I used these two plugins to replace ASP.NET grid views. The page had grown over time to be quite complex with a number of grid view controls on the page. The grids had become slow and the View State was very large. These plugins allowed us to give the end user an editable grid but with great performance and much less overhead.

Share this Story:
  • facebook
  • twitter
  • gplus

About Jeremy Foltz

Leave a comment