fnAddData and Add class

bilbodigi

Hi
I have an table that looks like this
".$ID."
".$betalt."
".$fnamn."
".$enamn."
".$adress."
".$postnr."
".$postort."
".$tel."
".$mtel."
".$uppf."
".$epost."
".$land."
 

when i use fnAddData i get a new row, but i also need to set the class for each column.
What i get is this
".$ID."
".$betalt."
".$fnamn."
".$enamn."
".$adress."
".$postnr."
".$postort."
".$tel."
".$mtel."
".$uppf."
".$epost."
".$land."
 

allan

Hi bilbodigi,

There are two ways of doing this:

1. Use the column property sClass ( http://datatables.net/usage#sClass ) to assign a class to the columns you want to give a class to (which looks like all of them :-) ).

2. Modify the inserted row's node after the insert is complete. fnAddData returns and array of indexes for the settings 'aoData' property which have been added to the table:

[code]
var a = oTable.fnAddData([whatever]);
var oSettings = oTable.fnSettings();
var nTr = oSettings.aoData[ a[0] ].nTr;
[/code]
* warning this code is untested!

Which way you want to go is up to you... :-)

Hope this helps,
Allan

bilbodigi

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

bilbodigi

Sorry i was a little bit to quick on my replay.
I found that the class was added when the function was init.
When i removed the class from my table then it will be only one class.
But when i do this the jeditable will not work.
So i tried to init that function after init DataTables and now i can edit the old rows, but not the new one.

bilbodigi

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

allan

Yes the reason for that is the the new rows don't have the jEditable event handler on them. Check out Visual Event ( http://sprymedia.co.uk/article/Visual+Event ) to let you see graphically what nodes have what events attached to them.

To over come this either add the jEditable event controller to the new row - or use jQuery's live() option ( http://docs.jquery.com/Events/live ).

Allan

Kasreyn

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(),'']);

/* 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;
}
}
}
}
);
});

Bkak

Hi,

I tried the same thing. But the row I added does not have any id attribute.
What is the code to add Id attribute to ?

Thanks,
Bhoomi.

hans_james

HI,

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

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

Thanks,
Hans

allan

The code for adding ID attribute, class or any other attribute is basically the same. fnAddData returns an array of indexes to the internal data store that DataTables uses for the newly added data.

[code]
var a = oTable.fnAddData([whatever]);
var nTr = oTable.fnSettings().aoData[ a[0] ].nTr;
[/code]
And now the newly added row is in nTr - so you can do whatever you want to it as you would with any DOM element.

Allan

hans_james

Thx Allan,

Hans

hans_james

Allan,
thx
Hans

bleer

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?

bleer

actually fixed this by removing any sorting option and setting redraw to true

rhythmicdevil

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

arung

Hi Allan,

Could you please let me know how to convert columns into rows as I am getting from database as JSON result aadata from the controller. but I want to convert the columns into rows and bind them

for example

AgeDays Agedays-f french to French Spain German
AgeDays Agedays-s spain Agedays-f Agedays-s Agedays-g
AgeDays Agedays-h hindi
AgeDays AgeDays - g german

Showing 1 to 8 of 10 entries

hllinc

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

jainankit0312

Hi Allan,

I tried your code :

var a = oTable.fnAddData([whatever]);
var nTr = oTable.fnSettings().aoData[ a[0] ].nTr;

nTr is holding the recently added row. When I try to do :

nTr.css('background-color', 'red');

It is giving me error "nTr.css is not a function" .
Isn't it a DOM object ? Why the error ? How to apply a css to this row only ?

Regards,
Ankit

jainankit0312

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

jainankit0312

Hi,

I added the class name using

nTr.className = "io-highlight-row";

and it is working fine now.

Regards.
Ankit

psion

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