I was looking for inline datatable for one of my web 2.0 based application. I need the table like spreadsheet. Finally i got YUI library and its seems a cool one. But i felt an issue with that its seems a big one and i don’t have an option for inline editing of Datatable header which one of my major requirement. So is started thinking of doing a datatable from scratch. When i think about it seems very easy build. So i started developing it using one of my favorite prototype library.

Step 1:

Create a dataviewer using javascript so that it wont spoil anytime for my HTML designer and the server side developer. So what i need to deliver a datatable using javascript 100%. So how can the data from the server DB to bind. Simple solution is used an associative array in javascript.

DataSource: [
{SL: "1", Name:"SANIL", Email:"sanil@mobme.in", Mobile:"9895270073", Location:"Kollam", Sex:"Male"},
{SL: "1", Name:"SANIL", Email:"sanil@mobme.in", Mobile:"9895270073", Location:"Kollam", Sex:"Male"},
]

Step 2.

Create in line editing for each cell. Simple solution create textarea / input at the time when the user click on the cell with content previously in the cell. And what do after user edit. We can simple invoke an AJAX request to update it in the server database :) . So simple na to create a datatable .

Step 3.

Use AJAX calls for updating the data in the server

datatable.rar

Click here to submit your review.


Submit your review
* Required Field

ABOUT THE AUTHOR:

Sanil S Founding member of MobMe Wireless Pvt Ltd, Ayruz Web Holdings

< Previous Article

Leave a Reply

Your email address will not be published. Required fields are marked *

*


× four = 20

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>