Monday, February 20, 2017

jquery datatables with colspan and rowspan

To make datatables jquery plugin work with colspan and rowspan, We can use following trick:

<table id="example" class="display nowrap" cellspacing="0" width="100%">

        <thead>

            <tr>

                <th>Name</th>

                <th>Position</th>

                <th>Office</th>

                <th>Age</th>

                <th>Start date</th>

                <th>Salary</th>

            </tr>

        </thead>

        <tfoot>

            <tr>

                <th>Name</th>

                <th>Position</th>

                <th>Office</th>

                <th>Age</th>

                <th>Start date</th>

                <th>Salary</th>

            </tr>

        </tfoot>

        <tbody>

            <tr>

                <td>Tiger Nixon</td>

                <td>System Architect</td>

                <td>Edinburgh</td>

                <td>61</td>

                <td>2011/04/25</td>

                <td>$320,800</td>

            </tr>

            <tr>

                <td>Garrett Winters</td>

                <td>Accountant</td>

                <td>Tokyo</td>

                <td colspan="3">63</td>

                <td style="display:none"></td>

                <td style="display:none"></td>

            </tr>

         </tbody>

</table>

So we need to add same number of hidden td for datatables plugin to work.


Same approach can also be used for rowspan.

1 comment:

  1. I really appreciate your professional approach. These are pieces of very useful information that will be of great use for me in future.

    ReplyDelete

Powered by Blogger.

Best Price Amazon Portal