Home Wiki

Editable DataTable example - ajax data source

Preamble

DataTable Editable plugin works with DataTables that dinamically read cells that should be displayed via ajax call. In this example, cells are not placed in the source of the page - they is loaded from the server-side via JSON request. Once cells are loaded from the source via AJAX call, they are processed on the client side.

Live example








First
Second
Third
ID Browser Platform(s) Engine version CSS grade
ID Browser Platform(s) Engine version CSS grade

Initialization code

In the initialization code you will need to pass URL of the data source that contains data that will be loaded. Processing option is placed just to show "Processing" dialog while the action is performing. Note that first column will be considered as an id and value of the first cell will added as an id of the row. You can hide this column if you want.

			$(document).ready( function () {
           $('#example').dataTable({
                                      "bProcessing": true,
                                      "sAjaxSource": "ajax_source.js"
                                      }
                                    ).makeEditable();
			} );
	

Additional HTML code

Html code is same as in the other cases, however you will need to add one change into the "Add" form. To inject id of the new record you will to put hidden field with value DATAROWID that will be mapped to the ID colum (rel=0). Plugin will take the id returned from server and put it as an id attribute of the row.



<!-- Custom form for adding new records with included place holder for id column-->
 <form id="formAddNewRow" action="#" title="Add new record">
        ...
	<input type="hidden" name="id" id="id" rel="0" value="DATAROWID" rel="0" />
        ...
</form>
	

Other examples