How to display results as rows instead of columns?

Z06Monster

I have some data which needs to displayed as 2 rows instead of 2 columns. Is this possible?

Instead of this 2 column

Title Abstract
Book 1 Lorem ipsum 1
Book 2 Lorem ipsum 2


I would like it displayed as

Title
Abstract

Book1
Lorem ipsum 1

Book2
Lorem ipsum 2

Is this possible?

fbas

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

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();
});

});