Replies

• gregt Posts: 5Questions: 0Answers: 0

  May 2010

  I've read the docs some more but still no luck. If there was a handler that was called for rows as they become visible or as a new page is shown then I was thinking I could generate the image for each visible row at that point from hidden table data. But it doesn't look like there's anything like that. Anyone have any other ideas?
• gregt Posts: 5Questions: 0Answers: 0

  May 2010

  I should have said btw that in this case I'm loading data via Ajax
• gregt Posts: 5Questions: 0Answers: 0

  May 2010

  Ive found a solution! To anyone else wanting to do this kind of thing, you can use fnRowCallback - see docs at http://datatables.net/usage/callbacks. It lets me do exactly what I need.
  
  I can now have a hidden column in my data with the image urls in and create an image tag as the rows are drawn. Result = no more monster load up front of every bloody thumbnail. Happy days.
• ed Posts: 5Questions: 0Answers: 0

  May 2010

  Hi Gregt,
  
  I have a similar problem.
  Could you please provide the code as well?
  
  Thank you :-)
• allan Posts: 63,405Questions: 1Answers: 10,452 Site admin

  May 2010

  @gregt : Nice use of fnRowCallback :-) . Thanks for posting your solution to this.
  
  @ed : Just take the data from the row/cell, and wrap it up in is what I think gregt is suggesting. I'd imgine fnRender would work as well - although that occurs when the row is 'added', so the browser _may_ load the image then... Go with fnRowCallback ;-)
  
  Allan
• gregt Posts: 5Questions: 0Answers: 0

  May 2010 edited May 2010

  @ed np, here's the main bits of code that did the trick (simplified)
  
  [code]
  oTable = $('#example').dataTable( {
  "bProcessing": true,
  "sAjaxSource": 'my_json_url/',
  "fnRowCallback": customFnRowCallback,
  "aoColumns": [
  { sTitle:'', sWidth:'10px', sClass:'tableThumbnailCell', bSortable:false } /*the thumbnail*/
  ,{ sTitle:'', bVisible:false } /*url*/
  ,{ sTitle:'Name' }
  ]
  });
  
  //custom function to generate img tags at render time (pseudo lazy loading)
  function customFnRowCallback( nRow, aData, iDisplayIndex )
  {
  $('td:eq(0)', nRow).html( '' );
  return nRow;
  }
  [/code]
  
  The data coming back from my server is
  
  [code]
  {
  aaData:[
  ['myurl/thumb1.png', 'myurl/thingy1.html', 'thingy1']
  , ['myurl/thumb2.png', 'myurl/thingy2.html', 'thingy2']
  ...
  ]
  }
  [/code]
  
  So the data coming back has 3 columns; img url, link url & name. The table has 2 visible columns; the thumbnail & the name. Each time a table row is drawn, customFnRowCallback will be called and it will build a string for the thumbnail column that is an img wrapping with a link.
  
  Hope that helps;
  Greg
• ed Posts: 5Questions: 0Answers: 0

  May 2010

  Hi Allan and Gregt,
  
  Thank you guys for your quick answer.
  
  @Gregt: Thanks for sharing this peace of code. It helped me a lot to understand. It works great now. It's really a good idea to do it with the callback method
  
  @Allan: Big respect brother. I like your DataTables. Really fantastic work.
  
  Thanks guys you made my day :-)
• bradaric Posts: 1Questions: 0Answers: 0

  March 2011

  Hi,
  
  Very helpful :) Thanks :)
  
  Take care,
  Alex
• MichaelJohnston Posts: 1Questions: 0Answers: 0

  June 2011 edited June 2011

  Thanks, this was super helpful! My approach is slightly different, but I think it offers a little more obfuscation and fanciness. Basically I add the class 'loading' to images I plan to use this effect upon so that I can add a little loading spinner to the background while the image loads. I then use a fake image attribute 'orig' for the image URLs so that I can swap the transparent gif I set for src as default. The callback function is as follows:
  
  [code]function lazy_datatable(nRow, aData, iDisplayIndex)
  {
  var img = $('img.loading', nRow);
  
  img.attr('src', img.attr('orig'));
  return nRow;
  }[/code]