Removing Rows with DataTables Editor

renderation

I have MyServlet set to return {"aaData": [["row1"], ["row2"]]} as sample data. I'm having a problem understanding how to use the remove row functionality. When I click Delete for a row, I get a POST that shows up in FireBug, but most of the fields are empty. The row also does not disappear either due to some null value. What am I doing wrong?
[code]
var editor;
var oTable;
$(document).ready(function(){
editor = new $.fn.dataTable.Editor({
"ajaxUrl": "MyServlet",
"domTable": "#example"
});

// Delete a record (without asking a user for confirmation)
$('#example').on('click', 'a.editor_remove', function (e){
e.preventDefault();
// The below gives me an error and fails to remove the row, probably because I'm not setting something up properly.
editor.remove($(this).parents('tr')[0], '', false, false);
editor.submit();
});

oTable = $('#example').dataTable({
"sAjaxSource": "MyServlet?username=SomeGuy",
"aoColumns": [
{"sTitle": "COL1"},
{
"mDataProp": null,
"sClass": "center",
"sDefaultContent": 'Delete'
}
]
});
});
[/code]

allan

Hi,

First question in the forum about Editor :-). I feel a prize is almost required...!

So - when Editor submits a 'delete' command the row IDs are sent in the 'data' array - you need to loop over that deleting the rows given, and return a JSON response with an id of -1. That should be all that is needed.

If you have a look at the examples on the Editor site ( http://editor.datatables.net/release/DataTables/extras/Editor/examples/index.html for example), when you perform a command the data sent to, and returned from, the server is shown in code boxes further down the page. Experiment by deleting a few rows and you'll be able to see what is it sending and receiving.

How are you currently trying to delete data in your servlet?

Allan

renderation

Ah, the {"id": -1} return from the POST fixed the null problem. I also wasn't returning enough information from the servlet and I didn't have mDataProp set for the first column. Here's the new code for anyone who misunderstands this like I did. MyServlet now returns {"aaData": [{"DT_RowId": "row_1", "col1": "exampleinfo"}]} as sample data.

[code]
var editor;
var oTable;
$(document).ready(function(){
editor = new $.fn.dataTable.Editor({
"ajaxUrl": "MyServlet",
"domTable": "#example"
});

// Confirm on delete.
$('#example').on('click', 'a.editor_remove', function (e){
e.preventDefault();
editor.message("Are you sure you want to remove this row?");
editor.remove($(this).parents('tr')[0], 'Delete row', {
"label": "Confirm",
"fn": function (){this.submit();}
});
});

oTable = $('#example').dataTable({
"sAjaxSource": "MyServlet?username=SomeGuy",
"aoColumns": [
{"mDataProp": "col1", "sTitle": "COLUMN1"},
{"mDataProp": null, "sClass": "center", "sDefaultContent": 'Delete'}
]
});
});
[/code]

Thanks for the software and information Allan!

allan

Nice one - thanks for the feedback.

Allan