Monday, February 20, 2017

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.

Followers

Best Price Amazon Portal

Amazon Best Offers