Table header on vertical and horizontal

Question

Can anyone help me on how to achieved this output. If it is possible.

I would like to view my header horizontally and vertically.

e.g

        Header 4  Header 5 Header 6 Calendar
Header 1    a        b        c        10/10
Header 2    d        e        f        11/10
Header 3    g        h        i        12/10

vertical header is hard coded but horizontal header should be uploaded from the database(which inputted by a user) and I would like the Calendar to be shown at the end of the column. It means that if let says a user did enter 5 input and it shown in the horizontal header and the Calender should be shown on the 7th column.

Here are my html

{% if solutions%}
<div id ="person_table">
<form action="{% url Solution_view person_NOID %}" method="post">
{% csrf_token %}
<table border="1" id="thetable">
<thead>
      <tr>
      <th>NOID {{ person_NOID }}</th>
      <th>SMOKING</th>
      <th>WEIGHT</th>
      <th>BP</th>
      </tr>
</thead>
<tbody>
{% for solution in solutions %}

<tr>
    <td>{{ solution.NEW_DATE }}</td>
    <td><input type="text" name="solution" id="solution{{ forloop.counter }}" value="{{ solution.SMOKING}}" /></td>
    <td><input type="text" name="solution" id="solution{{ forloop.counter }}" value="{{ solution.WEIGHT}}" /></td>
    <td><input type="text" name="solution" id="solution{{ forloop.counter }}" value="{{ solution.BP}}" /></td>
    <td><input type="text" name="solution" id="solution{{ forloop.counter }}" value="{{ solution.BP}}" /></td>
</tr>
{% endfor %}                
</tbody>
</table>
<input type="submit" value="Save" />
</form>
{% else %}
<p>No Data.</p>
{% endif %}
</body>

I don't know if this can be done. It seems that I can't relate to this SO.

score 0 · Accepted Answer · answered Oct 25 '12 at 16:01

0

You can always use a custom template to display the data as you wish. If you need an existing plug-in with features like Pagination, Sorting, etc. I would recommend jqgrid

answered Oct 25 '12 at 16:01

Konstant

2,179
16
32

score 0 · Answer 2 · answered Oct 25 '12 at 20:17

There are lot of jquery plugins that you can go for,i myself have used datatables and jquery powertable myself.The following are the sites and last link is an example

1.Datatables: Probably the most powerfull jquery table plugin that i came across.

2.jQuery Powertable :the Author of the famous date time picker in jquery.

3.JQ Grid: haven't tested myself,but looks very solid.

4.An example link on powertable

Table header on vertical and horizontal

2 Answers2