Adding extra columns in jQuery Datatable

JQuery Datatables is an awesome and easy to use plugin for displaying data in a table from almost any source. It is very flexible and easy to use. I however came across a little problem of adding extra columns in a dynamic table. I googled and still could not find a very suitable or easy to implement solution so I had to improvise with the technique below.

In order to try this, you would have to get a copy of the Datatables plugin. Get your hands dirty quickly by trying out this simple setup found on the datatables website which pulls data from a mysql table using php. If you followed the example link, you would end up touching about 2 main files.

1) server_processing.php located in the examples_support folder

2) server_side.html located in -> examples/server_side/

If you were successful, you should see something close to the image below when you run it in your web server:

Now, to the fun part of adding an extra column. In this example, we would include an extra column which is a link to edit that particular row using the row's id. We would do this without touching the javascript. It is just simple html and php. 

Step 1 Open server_processing.php located in the examples_support folder. Copy line 9 which has the $aColumns array variable:

$aColumns = array( 'engine', 'browser', 'platform', 'version', 'grade');

 On line 146 paste and modify the array to reflect what is below. I just had to include the 'id' field. 

 $aColumns = array( 'engine', 'browser', 'platform', 'version', 'grade','id' );

Step 2 - Modify the queryThis is the shortest step. You need to include the 'id' column to the query. Modify the query on line 116  to 122 and include the 'id' column: 

Step 3 - Add it to the json echoBetween line 151 and 168, you should find a while loop which actually generates the output for the datatable:

We would include another 'elseif' condition which would check if the current row it is iterating is the id field, please note that you can always change this condition. If it is the 'id' field it would display a link in that column: 

Step 4 - Add another column to the display (html)Open server_side.html located in -> examples/server_side/. Because we had to introduce another column in the array used to fetch data in the server side, we would have to do the same here in the html or whichever file you use to display your data. 

Simply add another column here in the table and that should solve the problem. 

If you were able to go through these steps you should see something like this: 

Update: I have uploaded the example files I used to http://dl.dropbox.com/u/255987/tumblr/datatable/example_files.zip

You can download it to have a look.