DataTables

Hi Allan
Thanks for the quick replay.

I started with nr. 1 since nr. 2 is untested.
But it didn't work so god.
The new row got the classes, but the function also inserrted the same classes on the old rows. (See below.)

Here is my code
/* Init DataTables */
oTable = $('#myTable').dataTable({
"bAutoWidth": false,
"bProcessing": true,
"aaSorting": [[11,'desc'], [3,'asc']],
"aoColumns": [
/* ID */ { "bSearchable": false, "bVisible": false },
/* Betalt */ { "sClass": "mEdit" },
/* f

Now it works
I had to reinit the jeditable after i added a row.
Thanks

I wanted to make a simple CRUD and ran into the trouble you mention. New rows can't be deleted or edited. And I came up with a solution still using DataTables. My solution follows, a lot of legwork setting up the new row to match a "default" template. Or reload the page, but that's too ugly.

Really great plugin Allan! :D

I started from this tutorial:
http://naspinski.net/post/Inserting-New-Items-Into-a-Table--REAL-AJAX-with-AspNet-Series.aspx

Not using jEditable but a different plugin called jquery.editinplace.js:
http://code.google.com/p/jquery-in-place-editor/

Following code is bound on html-button "AddButton", t1..t3 are textfields:

$("#AddButton").click(function(event) {
var vals = [
$("#<%= t1.ClientID %>"),
$("#<%= t2.ClientID %>"),
$("#<%= t3.ClientID %>")
];
$.post("ajax_functions/add.aspx", {
t1: vals[0].val(),
t2: vals[1].val(),
t3: vals[2].val(),
function(data){
var success = (data.toString().substr(0, 5) == "added");
if (success) {
var sID = data.toString().substr(5);
var ID = parseInt(sID);
oTable.fnAddData([ID,vals[0].val(),vals[1].val(),vals[2].val(),vals[3].val(),vals[4].val(),vals[5].val(),'<img src="images/delete_item.png" alt="delete"/>']);

/* Access cells in row, set up the correct attributes and bind deletecell.
This is done so events like edit and delete will work on newly added row. */
var nRows = oTable.fnGetNodes();
for (var i = 0; i < nRows.length; i++) {
var aPos = oTable.fnGetPosition(nRows[i]);
if (parseInt(nRows[i].cells[0].innerHTML) == ID) {
nRows[i].cells[0].setAttribute("id", "ID_" + sID);
nRows[i].cells[1].setAttribute("id", "t1_" + sID);
nRows[i].cells[2].setAttribute("id", "t2_" + sID);
nRows[i].cells[3].setAttribute("id", "del_" + sID);
nRows[i].cells[3].setAttribute("style", "text-align:right;");

/* Bind delete function on newly added row*/
$(nRows[i].cells[3]).bind("click", function(event) {
var pos = oTable.fnGetPosition(this);
var del = $(this);
$.ajax({
type: "POST",
url: "ajax_functions/delete.aspx",
data: "ID=" + del.attr('id').replace('del_', ''),
success: function() {
$("#report").addClass("success").html("Task Deleted");
oTable.fnDeleteRow(pos[0]);
}
});
});

/* Bind jquery.editinplace.js script on newly added row*/
$(".editable").editInPlace({
url: "ajax_functions/update.aspx",
params: "ajax=yes",
value_required: true,
default_text: "click to edit",
});

break;
}
}
}
}
);
});

HI,

how can I put class "gradeX" for new Data ???

var a = oTable.fnAddData([whatever]);

Thanks,
Hans

Thx Allan,

Hans

This method isnt working when i set the redraw param of fnAddRow to false, nTr returns null... I am doing this because i dont want the table reordered when it redraws, how can i get a hold of the new added row when i set redraw to false?

I was having some issues with adding editable rows and initializing lots of editable datatables. Most of the examples for the API here dont really take into account that you would not want to do an initialization for every single datatable. I have hundreds in my application and it would be ridiculous to initialize all of them one at a time. So to that end here is my solution: http://rhythmicalmedia.com/?p=325

why there is no update operation? how to update a row of the datatable,don't need submit to the server

Hi Allan,

That was my bad. Don't know how I missed it.

I used $('nTr').css('background-color', 'red'); and there is no error now.

But the css is not getting applied.

If I use $('tr').css('background-color', 'red') it apply the css for all the rows.

Regards,
Ankit

using the nTr row object, how can I get the nth TD element?
nTr.$(' ').css('background-color','red');?