fnAddData and Add class

fnAddData and Add class

bilbodigibilbodigi Posts: 18Questions: 0Answers: 0
edited April 2009 in General
I have an table that looks like this
<td class=mEdit>".$betalt."</td>
<td class=mEdit>".$fnamn."</td>
<td class=mEdit>".$enamn."</td>
<td class=mEdit>".$adress."</td>
<td class=mEdit>".$postnr."</td>
<td class=mEdit>".$postort."</td>
<td class=mEdit>".$tel."</td>
<td class=mEdit>".$mtel."</td>
<td class=mEdit>".$uppf."</td>
<td class=mEdit>".$epost."</td>
<td class=mEdit>".$land."</td>
<td class=mySel>&nbsp;</td>

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


  • allanallan Posts: 30,689Questions: 1Answers: 2,517 Site admin
    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:

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

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

    Hope this helps,
  • bilbodigibilbodigi Posts: 18Questions: 0Answers: 0
    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
  • bilbodigibilbodigi Posts: 18Questions: 0Answers: 0
    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.
  • bilbodigibilbodigi Posts: 18Questions: 0Answers: 0
    Now it works
    I had to reinit the jeditable after i added a row.
  • allanallan Posts: 30,689Questions: 1Answers: 2,517 Site admin
    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 ).

  • KasreynKasreyn Posts: 4Questions: 0Answers: 0
    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:

    Not using jEditable but a different plugin called jquery.editinplace.js:

    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(),
    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);
    type: "POST",
    url: "ajax_functions/delete.aspx",
    data: "ID=" + del.attr('id').replace('del_', ''),
    success: function() {
    $("#report").addClass("success").html("Task Deleted");

    /* Bind jquery.editinplace.js script on newly added row*/
    url: "ajax_functions/update.aspx",
    params: "ajax=yes",
    value_required: true,
    default_text: "click to edit",

  • BkakBkak Posts: 2Questions: 0Answers: 0

    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 <td>?

  • hans_jameshans_james Posts: 10Questions: 0Answers: 0

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

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

  • allanallan Posts: 30,689Questions: 1Answers: 2,517 Site admin
    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.

    var a = oTable.fnAddData([whatever]); var nTr = oTable.fnSettings().aoData[ a[0] ].nTr; 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.

  • hans_jameshans_james Posts: 10Questions: 0Answers: 0
    Thx Allan,

  • hans_jameshans_james Posts: 10Questions: 0Answers: 0
    edited August 2010
  • bleerbleer Posts: 3Questions: 0Answers: 0
    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?
  • bleerbleer Posts: 3Questions: 0Answers: 0
    actually fixed this by removing any sorting option and setting redraw to true
  • rhythmicdevilrhythmicdevil Posts: 10Questions: 0Answers: 0
    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
  • arungarung Posts: 2Questions: 0Answers: 0
    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
  • hllinchllinc Posts: 1Questions: 0Answers: 0
    why there is no update operation? how to update a row of the datatable,don't need submit to the server
  • jainankit0312jainankit0312 Posts: 22Questions: 1Answers: 0
    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 ?

  • jainankit0312jainankit0312 Posts: 22Questions: 1Answers: 0
    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.

  • jainankit0312jainankit0312 Posts: 22Questions: 1Answers: 0

    I added the class name using

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

    and it is working fine now.

  • psionpsion Posts: 5Questions: 0Answers: 0
    using the nTr row object, how can I get the nth TD element?
    nTr.$(' ').css('background-color','red');?
This discussion has been closed.