Home Wiki

DataTables Editable DOM Configuration - customize more than one table in the page

Preamble

This example shows how DataTables Editable can be customized to work with the two tables on the same page. First table that is placed in the first tab in configured as a standard table. For the second is added separate add form, add and delete buttons. The second table is configured to find additional elements by id. If DataTables Editable plugin finds elements that have the same ids as specified in the configuration, it will not auto-generate these elements - only event handlers will be attached to the existing buttons.

To configure elements for the second table, the following tasks need to be done:

Live example

Trident








First
Second
Third

Gecko








First
Second
Third
Rendering engine Browser Platform(s) Engine version Grade
Rendering engine Browser Platform(s) Engine version Grade
Trident Internet Explorer 4.0 Win 95+ 4 X
Trident Internet Explorer 5.0 Win 95+ 5 C
Trident Internet Explorer 5.5 Win 95+ 5.5 A
Trident Internet Explorer 6 Win 98+ 6 A
Trident Internet Explorer 7 Win XP SP2+ 7 A
Trident AOL browser (AOL desktop) Win XP 6 A
Rendering engine Browser Platform(s) Engine version Grade
Rendering engine Browser Platform(s) Engine version Grade
Gecko Firefox 1.0 Win 98+ / OSX.2+ 1.7 A
Gecko Firefox 1.5 Win 98+ / OSX.2+ 1.8 A
Gecko Firefox 2.0 Win 98+ / OSX.2+ 1.8 A
Gecko Firefox 3.0 Win 2k+ / OSX.3+ 1.9 A
Gecko Camino 1.0 OSX.2+ 1.8 A
Gecko Camino 1.5 OSX.3+ 1.8 A
Gecko Netscape 7.2 Win 95+ / Mac OS 8.6-9.2 1.7 A
Gecko Netscape Browser 8 Win 98SE+ 1.7 A
Gecko Netscape Navigator 9 Win 98+ / OSX.2+ 1.8 A
Gecko Mozilla 1.0 Win 95+ / OSX.1+ 1 A
Gecko Mozilla 1.1 Win 95+ / OSX.1+ 1.1 A
Gecko Mozilla 1.2 Win 95+ / OSX.1+ 1.2 A
Gecko Mozilla 1.3 Win 95+ / OSX.1+ 1.3 A
Gecko Mozilla 1.4 Win 95+ / OSX.1+ 1.4 A
Gecko Mozilla 1.5 Win 95+ / OSX.1+ 1.5 A
Gecko Mozilla 1.6 Win 95+ / OSX.1+ 1.6 A
Gecko Mozilla 1.7 Win 98+ / OSX.1+ 1.7 A
Gecko Mozilla 1.8 Win 98+ / OSX.1+ 1.8 A
Gecko Seamonkey 1.1 Win 98+ / OSX.2+ 1.8 A
Gecko Epiphany 2.20 Gnome 1.8 A

Custom DOM elements - add/delete buttons

Add and delete buttons should be added in HTML code of the page so DataTables Editable plugin can attach add/delete event handlers to these buttons instead of the auto-generated ones.

     <button id="btnDeleteRow2">Delete Selected Gecko Browser</button> <button id="btnAddNewRow2">Add New Gecko Browser</button>
     
     

Custom DOM elements - add new row form

Custom add new row form should be added to the page with ok and cancel buttons. When DataTables Editable plugin get ids of the ok and cancel buttons, detects that buttons exist, it will attach ok and cancel event handlers to these buttons.

       <form id="formAddNewRow2" action="#" title="Add New Gecko Browser">
          <button id="btnAddNewRowCancel2" value="cancel">Cancel</button>
          <button id="btnAddNewRowOk2" value="Ok">Add Gecko Browser</button>
 
          <!-- INPUT elements of the form -->

      </form>    
     

Initialization code (for the second table in the second tab)

In the DataTable Editable initialization call should be passed ids of the elements listed in previous examples. When the DataTables Editable plugin detects that elements with these ids exist in the page, it will not autogenerate the new ones with default ids - it will attach event handlers to the existing buttons instead.




$('#example2').dataTable( {
					"sScrollY": "200px",
					"bScrollCollapse": true,
					"bPaginate": false,
					"bJQueryUI": true,
					"aoColumnDefs": [
						{ "sWidth": "10%", "aTargets": [ -1 ] }
					]
				}).makeEditable({
									sUpdateURL: "UpdateData.php",
                    							sAddURL: "AddData.php",
                    							sDeleteURL: "DeleteData.php",

                    							sAddNewRowFormId: "formAddNewRow2",
                    							sAddNewRowButtonId: "btnAddNewRow2",
                    							sAddNewRowOkButtonId: "btnAddNewRowOk2",
                    							sAddNewRowCancelButtonId: "btnAddNewRowCancel2",
                    							sDeleteRowButtonId: "btnDeleteRow2"
										});
			} );

Other examples