Replies

• fbas Posts: 1,094Questions: 4Answers: 0

  July 2011

  I found myself having to do something non-traditional today and it reminded me of this post.
  
  in my case, I have a bunch of datatables related to files and projects. in today's table, I wanted to make a search engine similar to google images, but to keep the pagination tools and search tools of datatables, for continuity with my other pages. it works really well, and was easy since it's similar in most ways to another page I had already finished.
  
  http://i.imgur.com/vx5Zb.jpg
  
  So that brings me to this topic: displaying your data in an alternate way. in my case, I have a grid, but I don't mind if the users use the same sorting/filtering tools as other tables.
  
  In your case, if you don't want those available, perhaps disable/hide the THEAD items.
  
  But if you're willing to code a little to change the layout of your data, you can make it work.
  
  I hide the original table body and find the div that holds the table and write to that element
  
  in pre-draw, I delete the contents of the div, then for every row returned, I add an element. (luckily for me I already had old code that rendered column 9 as a link with an image in it that leads to a pop-up, so I just needed to include the column data)
  [code]
  "fnPreDrawCallback": function (oSettings) {
  // create a thumbs container if it doesn't exist. put it in the dataTables_scrollbody div
  if ($('#thumbs_container').length < 1) $('.dataTables_scrollbody').append("");
  
  // clear out the thumbs container
  $('#thumbs_container').html('');
  
  return true;
  },
  "fnRowCallback": function( nRow, aData, iDisplayIndex, iDisplayIndexFull ) {
  $('#thumbs_container').append(aData[9]);
  
  return nRow;
  },
  [/code]
  
  In your case, since the items you want to draw aren't homogeneous, you'll have to work out how to go through the data elements and display them how you want. if your code is always 2 x 2, this will be simple for you.
• Z06Monster Posts: 3Questions: 0Answers: 0

  August 2011 edited August 2011

  Thanks fbas. I went ahead and wrote this. Basically, I pull the content from the other columns, place them into a div and append to the first column. I placed it into the fnDrawCallback function so it gets called everytime the table redraws.
  
  $("#table1 tr").each( function()
  {
  firstColumn=$(this).find("td:first");
  firstColumn.html( "" + firstColumn.html() + "");
  
  $(this).find("td:gt(0)").each( function()
  {
  firstColumn.append( "" + $(this).html() + "");
  $(this).remove();
  });
  
  });