fnAddData and Add class

fnAddData and Add class

edited April 2009 in General Posts: 18
Hi
I have an table that looks like this
<td>".$ID."</td>
<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
<td>".$ID."</td>
<td>".$betalt."</td>
<td>".$fnamn."</td>
<td>".$enamn."</td>
<td>".$adress."</td>
<td>".$postnr."</td>
<td>".$postort."</td>
<td>".$tel."</td>
<td>".$mtel."</td>
<td>".$uppf."</td>
<td>".$epost."</td>
<td>".$land."</td>
<td>&nbsp;</td>

Replies

  • Posts: 22,706
    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,
    Allan
  • Posts: 18
    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
  • Posts: 18
    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.
  • Posts: 18
    Now it works
    I had to reinit the jeditable after i added a row.
    Thanks
  • Posts: 22,706
    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
  • 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;
    }
    }
    }
    }
    );
    });
  • Posts: 2
    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 <td>?

    Thanks,
    Bhoomi.
  • HI,

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

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

    Thanks,
    Hans
  • Posts: 22,706
    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.

    Allan
  • Thx Allan,

    Hans
  • edited August 2010 Posts: 10
    Allan,
    thx
    Hans
  • Posts: 3
    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?
  • Posts: 3
    actually fixed this by removing any sorting option and setting redraw to true
  • 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
  • Posts: 2
    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
  • Posts: 1
    why there is no update operation? how to update a row of the datatable,don't need submit to the server
  • 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
  • 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
  • Hi,

    I added the class name using

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

    and it is working fine now.

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