The customization we added consists of some HTML to define a<button> element and some JavaScript to render it as a nice trashcan button and to act on a click:

Chapter10/customizationexample4.html

<button class="delete">delete</button>
<script>
$("button.delete").click(function(){
	var url = $("form").last().attr('action')+'/delete';
	$("tr.selected").each(function(i){
			var id=$(this).attr('id'),
			$.get(url,{'id':id});
	});
	$("input[name=cacheid]").remove();
	$("button[name=first]").click();
	false;
}).button({icons: { primary: "ui-icon-trash" },text: false});
</script>

The click handler fetches the action attribute from the last form in the list of entities (highlighted). This form holds the add button and this action attribute will therefore point to the URL serviced by the index() method of a Display instance. We simply add delete to it to make it point to the URL that will be serviced by the delete() method.

The next step is to iterate over all<tr> elements with a selected class and use jQuery's get() method to fetch the URL with the id attribute from the<tr> element added as an argument.

Finally, we have to redisplay the list of entities to show the effects of the deletion. If the list was filtered and/or sorted, we would like to retain that, but we still have to remove the hidden<input> element that holds the cacheid, otherwise we would be presenting the old list. After removing it, we trigger the click handler on the first button to initiate a reload.

Like almost every jQuery method, the click() method returns the selected elements it was invoked on, so we can chain a button() method to adorn our button element with a proper icon.