Is it possible to render DataTables's columns horizontally?

Is it possible to render DataTables's columns horizontally?

tuxietuxie Posts: 6Questions: 3Answers: 0

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>

This question has an accepted answers - jump to answer

Answers

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin
    Answer ✓

    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

  • tuxietuxie Posts: 6Questions: 3Answers: 0
    edited September 2014

    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();
    
  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

    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

  • tuxietuxie Posts: 6Questions: 3Answers: 0

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

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin
    edited September 2014

    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

This discussion has been closed.