Is it possible to render DataTables's columns horizontally?

tuxie

Is it possible to change DataTables to render to horizontal column layout, to something like this:

<table>
  <tr><th> Heading1 </th><td> DATA1 </td></tr>
  <tr><th> Heading2 </th><td> DATA2 </td></tr>
  <tr><th> Heading2 </th><td> DATA3 </td></tr>
</table>

allan

No sorry. You could use th elements in the first column, but there is no option to have the row and column methods of DataTables rotate - i.e. searching would sill be row based.

Allan

tuxie

I played around a bit with jquery and tried to rotate. The following code (placed in the initcomplete) rotates everything all right but editing doesn't work. (yeah still dirty testing code) Any ideas if this could be fixed?
In our case we have some cases where we show just one row so it's much better to show it vertically than horizontally. Thus it doesn't matter if this solution can't sort and doesn't work for multiple rows. I guess if this would work it would be much better than editing the PHP parts which might be much bigger edit.

var  x = $(".vertical").find("th,td");
var i = $(".vertical").find("tr").length;
var j = x.length/i;

var newT= $("<table class='tempvertictable'>").appendTo("body");
for (j1=0; j1<j;j1++){
    var temp = $("<tr>").appendTo(newT);
    for(var i1=0;i1<i; i1++){
        temp.append($(x[i1*j+j1]).clone());
    }
}

$(".vertical").children().remove();
var div1Html = $('.tempvertictable').html();
$('.vertical').html(div1Html);
$('.tempvertictable').remove();

allan

Given that it is the HTML that is being rewritten, I suspect you'll need to attach new event handlers to allow whatever editing you are using.

Allan

tuxie

Ok thanks! Do you have any pointers as to how to kind of reattach the event handlers before I dive deeper into the code?

allan

You would need to rerun whatever code you have attaching them at the moment. If you are referring to the DataTables event listeners, then you will need to disassemble DataTables almost entirely. It just wasn't designed to do what you are looking for there.

Allan