Replies

• allan Posts: 63,407Questions: 1Answers: 10,452 Site admin

  April 2009

  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 Posts: 18Questions: 0Answers: 0

  April 2009

  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 Posts: 18Questions: 0Answers: 0

  April 2009

  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 Posts: 18Questions: 0Answers: 0

  April 2009

  Now it works
  I had to reinit the jeditable after i added a row.
  Thanks
• allan Posts: 63,407Questions: 1Answers: 10,452 Site admin

  April 2009

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

  December 2009

  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 Posts: 2Questions: 0Answers: 0

  May 2010

  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 Posts: 10Questions: 0Answers: 0

  August 2010

  HI,
  
  how can I put class "gradeX" for new Data ???
  
  var a = oTable.fnAddData([whatever]);
  
  Thanks,
  Hans
• allan Posts: 63,407Questions: 1Answers: 10,452 Site admin

  August 2010

  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 Posts: 10Questions: 0Answers: 0

  August 2010

  Thx Allan,
  
  Hans
• hans_james Posts: 10Questions: 0Answers: 0

  August 2010 edited August 2010

  Allan,
  thx
  Hans
• bleer Posts: 3Questions: 0Answers: 0

  January 2012

  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 Posts: 3Questions: 0Answers: 0

  January 2012

  actually fixed this by removing any sorting option and setting redraw to true
• rhythmicdevil Posts: 10Questions: 0Answers: 0

  February 2012

  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 Posts: 2Questions: 0Answers: 0

  May 2012

  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 Posts: 1Questions: 0Answers: 0

  June 2012

  why there is no update operation? how to update a row of the datatable,don't need submit to the server
• jainankit0312 Posts: 22Questions: 1Answers: 0

  June 2012

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

  June 2012

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

  June 2012

  Hi,
  
  I added the class name using
  
  nTr.className = "io-highlight-row";
  
  and it is working fine now.
  
  Regards.
  Ankit
• psion Posts: 5Questions: 0Answers: 0

  June 2012

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