Editable DataTable example - Delete records

Preamble

DataTable Editable plugin enhances standard DataTables plugin by adding functionalities that allow user to to select rows and delete them. Plugin encapsulates all required processing, and it is up to you to take care of implementing server-side code that accepts delete AJAX requests sent by the plugin.

You will need page that handles delete AJAX requests (DeleteData.php in this example) and accepts single parameter:

  1. id - id of the record that user wants to delete (id is placed in the tag that surrounds the cell).
If operation was successfully completed server-side page should return "ok" string. Otherwise, it should return error message.

Live example

Rendering engine Browser Platform(s) Engine version CSS grade
Rendering engine Browser Platform(s) Engine version CSS grade
A Trident(read only cell) 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(read only cell) Win 98+ 6 A
Trident Internet Explorer 7 Win XP SP2+(read only cell) 7 A
Trident AOL browser (AOL desktop) Win XP 6 A(read only cell)
Gecko (UTF-8: $¢€) 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
Webkit Safari 1.2 OSX.3 125.5 A
Webkit Safari 1.3 OSX.3 312.8 A
Webkit Safari 2.0 OSX.4+ 419.3 A
Webkit Safari 3.0 OSX.4+ 522.1 A
Webkit OmniWeb 5.5 OSX.4+ 420 A
Webkit iPod Touch / iPhone iPod 420.1 A
Webkit S60 S60 413 A
Presto Opera 7.0 Win 95+ / OSX.1+ - A
Presto Opera 7.5 Win 95+ / OSX.2+ - A
Presto Opera 8.0 Win 95+ / OSX.2+ - A
Presto Opera 8.5 Win 95+ / OSX.2+ - A
Presto Opera 9.0 Win 95+ / OSX.3+ - A
Presto Opera 9.2 Win 88+ / OSX.3+ - A
Presto Opera 9.5 Win 88+ / OSX.3+ - A
Presto Opera for Wii Wii - A
Presto Nokia N800 N800 - A
Presto Nintendo DS browser Nintendo DS 8.5 C/A1
KHTML Konqureror 3.1 KDE 3.1 3.1 C
KHTML Konqureror 3.3 KDE 3.3 3.3 A
KHTML Konqureror 3.5 KDE 3.5 3.5 A
Tasman Internet Explorer 4.5 Mac OS 8-9 - X
Tasman Internet Explorer 5.1 Mac OS 7.6-9 1 C
Tasman Internet Explorer 5.2 Mac OS 8-X 1 C
Misc NetFront 3.1 Embedded devices - C
Misc NetFront 3.4 Embedded devices - A
Misc Dillo 0.8 Embedded devices - X
Misc Links Text only - X
Misc Lynx Text only - X
Misc IE Mobile Windows Mobile 6 - C
Misc PSP browser PSP - C
Other browsers All others - - U

Initialization code

Initialization code is very simple. You just need to specify URL of the pages that accept delete requests on the server side.

$(document).ready( function () {
		$('#example').dataTable().makeEditable({
                    					sDeleteURL: "DeleteData.php"
							});
}
	

Additional HTML code

One delete button needs to be placed in your HTML source. This button will be enabled each time user selects a row in the table, and disabled each time user deselects row. Id of the button has to be "btnDeleteRow".

<!-- Delete button can be placed anywhere in the page -->
<button id="btnDeleteRow">Delete</button>
	

Plugin tries to find id of the row in the id attribute of the tag. Therefore, following row format is required:

<tr id="2">
	<td>Misc</td>
	<td>Links</td>
	<td>Text only</td>
	<td class="center">-</td>
	<td class="center">X</td>
</tr>

Server-side code for delete request (PHP)

Server-side page that accepts delete request should return "ok" if row was successfully deleted, or an error message if operation failed. In this example, server page always returns "ok" value:

<?php
	//Always accepts delete
	echo "ok"
?>

Other examples