javascript - How to combine treetable in datatable using fixed column -
hi facing issue regarding combining treetable in datatable using fixed column on expand , collapse.
here code tried out. please me out solve issue.
$("#example").treetable({expandable:true}); $('#example').datatable( { scrollx: true, fixedcolumns: true, "scrollx": true, } );
<link href="http://ludo.cubicphuse.nl/jquery-treetable/css/jquery.treetable.css" rel="stylesheet" /> <link href="http://ludo.cubicphuse.nl/jquery-treetable/css/jquery.treetable.theme.default.css" rel="stylesheet" /> <link href="http://cdn.datatables.net/1.9.4/css/jquery.datatables.css" rel="stylesheet" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="http://cdn.datatables.net/1.10.4/js/jquery.datatables.min.js"></script> <script src="https://cdn.datatables.net/fixedcolumns/3.1.0/js/datatables.fixedcolumns.min.js"></script> <script src="http://ludo.cubicphuse.nl/jquery-treetable/jquery.treetable.js"></script> <table id="example" class="display nowrap" cellspacing="0" width="100%"> <thead> <tr> <th rowspan="2">level</th> <th colspan="4">main header 1</th> <th colspan="3">main header 2</th> <th colspan="4">main header 3</th> </tr> <tr> <th>sub header 11</th> <th>sub header 12</th> <th>sub header 13</th> <th>sub header 14</th> <th>sub header 21</th> <th>sub header 22</th> <th>sub header 23</th> <th>sub header 31</th> <th>sub header 32</th> <th>sub header 33</th> <th>sub header 34</th> </tr> </thead> <tbody> <tr data-tt-id='1'> <td>place 1</td> <td>data1</td> <td>data2</td> <td>data3</td> <td>data4</td> <td>data5</td> <td>data6</td> <td>data7</td> <td>data8</td> <td>data9</td> <td>data10</td> <td>data11</td> </tr> <tr data-tt-id='1-1' data-tt-parent-id='1'> <td>child 1</td> <td>data1</td> <td>data2</td> <td>data3</td> <td>data4</td> <td>data5</td> <td>data6</td> <td>data7</td> <td>data8</td> <td>data9</td> <td>data10</td> <td>data11</td> </tr> <tr data-tt-id='1-1-1' data-tt-parent-id='1-1'> <td>sub-child 2</td> <td>data1</td> <td>data2</td> <td>data3</td> <td>data4</td> <td>data5</td> <td>data6</td> <td>data7</td> <td>data8</td> <td>data9</td> <td>data10</td> <td>data11</td> </tr> <tr data-tt-id='1-2' data-tt-parent-id='1'> <td>child 2</td> <td>data1</td> <td>data2</td> <td>data3</td> <td>data4</td> <td>data5</td> <td>data6</td> <td>data7</td> <td>data8</td> <td>data9</td> <td>data10</td> <td>data11</td> </tr> <tr data-tt-id='2'> <td>place 2</td> <td>data1</td> <td>data2</td> <td>data3</td> <td>data4</td> <td>data5</td> <td>data6</td> <td>data7</td> <td>data8</td> <td>data9</td> <td>data10</td> <td>data11</td> </tr> </tbody> </table>
Comments
Post a Comment