Demos

AJAX

This demo shows how to

enable AJAX requests by using the ajax property
configure the cell editors
plug a third-party date picker component and use the editor's delegates
use custom cell data validators

Please note that the AJAX requests are performed with jQuery, therefore it is has to be imported in the document. If jQuery is not found, ezEditTable will fallback automatically to a plain form submission method.

Also note that is a live demo and your tests will be recorded in a database!

Row editor Multiple selection

Id	Name	Email	Start Date	Salary
52964	the highest Date is in 2019...	employee@email.com	2019-12-01	0.00
52961	asdfsdaf	employee@email.com	2011-01-01	10.10
52960	dokter dark	dokter_dark@email.com	2011-01-01	0.00
52958	test	test@email.com	2011-01-01	0.00
52957	dfddsfg	employee@email.com	2011-01-01	0.00
52956	nombre	employee@email.com	2011-01-01	0.00
52955	Employee name...	employee@email.com	2011-01-06	0.00
52952	Employee name...	employee@email.com	2011-01-01	0.00
52951	Employee name...	employee@email.com	2011-01-01	0.00
52950	test	employee@email.com	2011-04-02	0.00
52940	Employee name...	employee@email.com	2011-01-01	0.00
52939	Employee name...	employee@email.com	2011-01-01	0.00
52938	erg4g24tgh42t	employee@email.com	2011-01-01	0.00
52937	ze name...	employee@email.com	2011-01-01	0.00
52936	Employee name...	employee@email.com	2011-03-12	0.00
52935	Employee name...	employee@email.com	2011-01-01	0.00
52934	Employee name...	employee@email.com	2011-01-01	0.00
52931	siano na sniadanie dla koziolkadfs	koziolek@email.com	0000-00-00	0.00
52922	tsting	employee@email.com	2011-01-05	0.00
52921	Test Me NOW	employee1@email.com	2011-01-01	0.00
52905	oöoiöoiöoiöioöoiö	employee@email.com	2011-01-01	0.00
52904	Employee name...	employee@email.com	2011-01-01	0.00
52901	rrrrr	employee@email.com	2011-01-01	0.00
52900	Employee name...	employee@email.com	2011-01-01	0.00
52899	Employee name...	employee@email.com	2011-01-01	0.00
52898	Employee name...	employee@email.com	2011-01-01	0.00
52897	Employee name...	employee@email.com	2011-01-01	0.00
52895	i7i7l78l789	employee@email.com	2011-01-01	0.00
52894	Employee name...	employee@email.com	2011-01-01	0.00
52893	Employee name...	employee@email.com	2011-01-01	0.00
52892	Employee name...	employee@email.com	2011-01-01	0.00
52891	Employee name...	employee@email.com	2011-01-01	0.00
52888		employee@email.com	2011-01-01	0.00
52887	Employee name...	employee@email.com	2011-01-01	0.00
52886	Employee name...	employee@email.com	2011-01-01	0.00
52885	Employee name...	employee@email.com	2011-01-01	0.00
52884	Employee name...	employee@email.com	2011-01-01	0.00
52883	Employee name...	employee@email.com	2011-01-01	0.00
52882	Employee name...	employee@email.com	2011-01-01	0.00
52881	Employee name...	employee@email.com	2011-01-01	0.00
52880	Employee name...	employee@email.com	2011-01-01	0.00
52879	Employee name...	employee@email.com	2011-01-01	0.00
52878	Employee name...	employee@email.com	2011-01-01	0.00
52877	Employee name...	employee@email.com	2011-01-01	0.00
52876	Employee name...	employee@email.com	2011-01-01	0.00
52875	Employee name...	employee@email.com	2011-01-01	0.00
52874	Employee name...	employee@email.com	2011-01-01	0.00
52873	Employee name...	employee@email.com	2011-01-01	0.00
52872	Employee name...	employee@email.com	2011-01-01	0.00
52871	Employee name...	employee@email.com	2011-01-01	0.00
52870	Employee name...	employee@email.com	2011-01-01	0.00
52869	Employee name...	employee@email.com	2011-01-01	0.00
52868	Employee name...	employee@email.com	2011-01-01	0.00
52867	Employee name...	employee@email.com	2011-01-01	0.00
52866	Employee name...	employee@email.com	2011-01-01	0.00
52865	Employee name...	employee@email.com	2011-01-01	0.00
52864	Employee name...	employee@email.com	2011-01-01	0.00
52863	Employee name...	employee@email.com	2011-01-01	0.00
52862	Employee name...	employee@email.com	2011-01-01	0.00
52861	Employee name...	employee@email.com	2011-01-01	0.00
52860	Employee name...	employee@email.com	2011-01-01	0.00
52859		employee@email.com	2011-01-01	0.00
52857	Employee name...	employee@email.com	2011-01-01	0.00
52852	rachunek	employee@email.com	2011-01-01	0.00
52851	Employee name...	employee@email.com	2011-01-01	0.00
52850	Employee name...	employee@email.com	2011-01-01	0.00
52849	Employee name...	employee@email.com	2011-01-01	0.00
52848	Employee name...	employee@email.com	2011-01-01	0.00
52847	Employee name...	employee@email.com	2011-01-01	0.00
52846	Employee name...	employee@email.com	2011-01-01	0.00
52845	Employee name...	employee@email.com	2011-01-01	0.00
52844	Employee name...	employee@email.com	2011-01-01	0.00
52843	Employee name...	employee@email.com	2011-01-01	0.00
52842	Employee name...	employee@email.com	2011-01-01	0.00
52841	Employee name...	employee@email.com	2011-01-01	0.00
52840	Employee name...	employee@email.com	2011-01-01	0.00
52839	Employee name...	employee@email.com	2011-01-01	0.00
52838	Employee name...	employee@email.com	2011-01-01	0.00
52837	Employee name...	employee@email.com	2011-01-01	0.00
52836	Employee name...	employee@email.com	2011-01-01	0.00
52835	Employee name...	1employee@email.com	2011-01-01	0.00
52834	Employee name...	employee@email.com	2011-01-01	0.00
52832	Employee name...	employee@email.com	2011-01-01	0.00
52827	tata	employee@email.com	2011-01-13	0.00
52824	fggtr	employee@email.com	2011-01-01	0.00
52822	Employee name...	employee@email.com	2011-01-01	0.00
52821	yyyy rghfg	employee@email.com	2011-01-01	0.00
52820	saya juga bisa	employee@email.com	2011-01-01	0.00
52819	dfsdfsdfsdfsdfsdf	das@ggg.com	2011-01-01	0.00
52817	Employee name...	employee@email.com	2011-01-01	0.00
52816	ABC	employee@email.com	2011-01-15	0.00
52815	Employee name...	employee@email.com	2011-01-01	0.00
52814	gdfgfdgdgdgfdg	employee@email.com	2011-01-01	0.00
52813	Rrr	employee@email.com	2011-01-01	0.00
52811	Tyyy	employee@email.com	2011-01-01	0.00
52810	Employee name...	employee@email.com	2011-01-01	0.00
52809	Employee name...	employee@email.com	2011-01-01	0.00
52808	Employee name...	employee@email.com	2011-01-01	0.00
52807	Employee name...	employee@email.com	2011-01-01	0.00
52806	Test	employee@email.com	2011-01-01	0.00

Make sure jQuery is imported in your document before ezEditTable.js. Example of jQuery dependency:

Configuration object:

			//ezEditTable configuration object			
			var ezConfig = {
				editable: true,
				ajax: true,
				auto_save: true,
				auto_save_model: 'row',
				default_selection: 'both',
				editor_model: 'cell',
				editable_on_keystroke: true,
				form_submit_interval: 999, //interval separating data submissions to prevent server`s overload security policy
				cell_editors:[
					{ type: 'none' },
					{ type: 'input', attributes:[['title', 'First name and last name']] },
					{ type: 'input', attributes:[['title', 'email address']] },
					{ type: 'custom', target: 'datePick' },
					{ type: 'input', attributes:[['maxLength', 10], ['title', '10 digits max.\n numbers with 2 decimal places only']], css:'alignRight' },
					{ type: 'boolean' }
				],
				actions:{
					'update': {
						uri: 'php/json.update.record.php', form_method: 'POST',
						param_names: ['id','name','email','startdate','salary','active']
					},
					'insert': {
						uri: 'php/json.insert.record.php', form_method: 'POST',
						param_names: ['id','name','email','startdate','salary','active'],
						default_record: [
							'', 'Employee name...', 'employee@email.com', '2011-01-01','0', 
							'<input type="checkbox" checked />'
						]
					},
					'delete': { 
						uri: 'php/json.delete.record.php', form_method: 'POST', bulk_delete: false,
						param_names: ['id']
					}
				},
				
				//Data validation delegate, the script does not provide data validation tools
				validate_modified_value: function(o, colIndex, oldVal, newVal, cell, editor){
					if(colIndex==2 && oldVal != newVal){ 
						if(!et_ValidateEmail(newVal)){
							alert('Please insert a valid email!'); 
							return false;
						} else return true;
					}
					else if(colIndex == 4 && oldVal != newVal){
						if(!et_IsNumber(newVal)){
							alert('Please insert a valid number with 2 decimal places!');
							return false;
						} else return true;
					}
					else return true;
				},
				//Custom editor functions
				open_custom_editor: function(o, cell, editor){
					if(cell.cellIndex == 3){ 
						if(editor.innerHTML == '') setPickerDate();
						//properties added for date picker onselected delegate (setOnSelectedDelegate)
						datePicker.eg_obj = o; 
						datePicker.eg_cell = cell;
						datePicker.eg_editor = editor;
					} else cell.innerHTML = '';
					cell.appendChild(editor);
					editor.style.display = ''; 
				},
				close_custom_editor: function(o, cell, editor){ 
					if(cell.cellIndex == 3){
						editor.style.display = 'none';
						document.body.appendChild(editor);
					}
				},
				//We define here how to retrieve the custom editor value
				get_custom_editor_value: function(o, editor, colIndex){
					var strDate;
					if(colIndex == 3){//Date picker
						var obj = datePicker.getSelectedDay();
						var m = (obj.month.toString().length==1 ? '0' + obj.month : obj.month);
						var d = (obj.day.toString().length==1 ? '0' + obj.day : obj.day);
						strDate = obj.year+'-'+m+'-'+d;
					}				
					return strDate;
				},
				//We define here how to set the custom editor value
				set_custom_editor_value: function(o, editor, colIndex, val){
					if(colIndex == 3){ 
						var date = et_FormatDate(val, 'YMD');
						datePicker.setSelectedDay({ year:parseInt(date.getFullYear()), month:parseInt(date.getMonth()+1), day:parseInt(date.getDate()) });
					}
				}
			}

Below the PHP code used for the CRUD operations in this demo:

Insert:

			<?php
				header("content-type: application/json");
				header("Cache-Control: no-cache");
				
				$ret = array();
			
				if(isset($_POST["id"]) && isset($_POST["name"]) && isset($_POST["email"])){
					$id = $_POST["id"];
					$name = echappement(utf8_urldecode($_POST["name"]));
					$email = echappement(utf8_urldecode($_POST["email"]));
					$startdate = $_POST["startdate"];
					$salary = $_POST["salary"];
					$active = $_POST["active"];		 
					$ip = isset($_SERVER['HTTP_X_FORWARDED_FOR']) ? $_SERVER['HTTP_X_FORWARDED_FOR'] : $_SERVER['REMOTE_ADDR'];
					$rowId = $_POST["rowId"]; // rowId param is appended to all insert calls
					if($active == 'true') $active = 1;
					else $active = 0;
					
					connect_db();
					$query = "INSERT INTO ".TBL_DEMO_EMPLOYEE." ".
								" VALUES('0','$name','$email','$startdate','$salary',null, null,". 
								"'$ip', null, null, NOW(), null, null, $active, 0)";
					$result = mysql_query($query);
			
					if(mysql_affected_rows() > 0) {
						//last inserted record id
						$insert_id = mysql_insert_id();
						$ret = array( "result" => array("success" => 1, "description" => "Record successfully created.", "id" => $insert_id) );
					} else {
						$ret = array( "result" => array("success" => 0, "description" => "No record(s) affected.", "id" => null) );
					}
					
					close_db();
				} else {
					$ret = array( "result" => array("error" => 1, "description" => "Expected parameter(s) not found.") );
				}
				
				echo json_encode($ret);
			?>

Update:

			<?php
				header("content-type: application/json");
				header("Cache-Control: no-cache");
			
				$ret = array();
			
				if(isset($_POST["rowId"]) && isset($_POST["name"]) && isset($_POST["email"])){
					$id = $_POST["id"];
					$rowId = $_POST["rowId"];
					if($id == ""){ //if id empty then id is retrieved from rowId
						$id = str_replace("tr", "", $rowId);
					}
					$name = echappement(utf8_urldecode($_POST["name"]));
					$email = echappement(utf8_urldecode($_POST["email"]));
					$startdate = $_POST["startdate"];
					$salary = $_POST["salary"];
					$active = $_POST["active"];		 
					$ip = isset($_SERVER['HTTP_X_FORWARDED_FOR']) ? $_SERVER['HTTP_X_FORWARDED_FOR'] : $_SERVER['REMOTE_ADDR'];
					if($active == 'true') $active = 1;
					else $active = 0;
					connect_db();
					$query = "UPDATE ".TBL_DEMO_EMPLOYEE." SET ".
								"NAME='$name',EMAIL='$email',STARTDATE='$startdate',SALARY='$salary'".
								",MODIP='$ip',MODDATE=NOW(),ACTIVE=$active ".
								"WHERE ID='$id'";
					$result = mysql_query($query);
					
					if(mysql_affected_rows() > 0) {
						$ret = array( "result" => array("success" => 1, "description" => "Record successfully updated.", "id" => $id) );
					} else {
						$ret = array( "result" => array("success" => 0, "description" => "No record(s) affected.", "id" => $id) );
					}
			
					close_db();
				} else {
					$ret = array( "result" => array("error" => 1, "description" => "Expected parameter(s) not found.") );
				}
				
				echo json_encode($ret);
			?>

Delete:

			<?php
				header("content-type: application/json");
				header("Cache-Control: no-cache");
				
				$ret = array();
				
				if(isset($_POST["rowId"])){
					$id = isset($_POST["id"]) ? $_POST["id"] : str_replace("tr", "", $_POST["rowId"]);
					$ip = isset($_SERVER['HTTP_X_FORWARDED_FOR']) ? $_SERVER['HTTP_X_FORWARDED_FOR'] : $_SERVER['REMOTE_ADDR'];		
					connect_db();
					$query = "UPDATE ".TBL_DEMO_EMPLOYEE." SET ".
								"DELIP='$ip',DELDATE=NOW(),DELETED=1 ".
								"WHERE ID='$id'";
					$result = mysql_query($query);
					
					if(mysql_affected_rows() > 0) {
						$ret = array( "result" => array("success" => 1, "description" => "Record successfully deleted.", "id" => $id) );
					} else {
						$ret = array( "result" => array("success" => 0, "description" => "No record(s) affected.", "id" => $id) );
					}
					
					close_db();
				} else {
					$ret = array( "result" => array("error" => 1, "description" => "Expected parameter(s) not found.") );
				}
				
				echo json_encode($ret);
			?>

Top of page