JQuery data table with multiple header rows and fixed column
10,210
make sure you have imported everything correctly friend, i hope this helps you http://www.cubicfactory.com/jseditor/welcome/137556/edit
Author by
Oshada Ekanayake
Updated on December 05, 2022Comments
-
Oshada Ekanayake over 1 year
My html table contain two header rows as below. I want to make quarter column fixed I tried an example in jquery datatable plugin but it is not working as I expexted. The table is convered to a datatable but first column is not fixed
Example i tried https://datatables.net/extensions/fixedcolumns/examples/initialisation/left_right_columns.html
HTML
<table id="example" class="table table-stripped"> <thead> <tr> <th rowspan="2">Quarter</th> <th colspan="10">ICT Sector</th> <th colspan="10">Shipping</th> </tr> <tr> <th>WSO2</th> <th>IFS</th> <th>Company A</th> <th>Company B</th> <th>Company C</th> <th>Company D</th> <th>Company E</th> <th>Company F</th> <th>Company G</th> <th>Company H</th> <th>PSA</th> <th>Mercantile Shipping</th> <th>Company A</th> <th>Company B</th> <th>Company C</th> <th>Company D</th> <th>Company E</th> <th>Company F</th> <th>Company G</th> <th>Company H</th> </tr> </thead> <tbody> <tr> <td>Quater 1</td> <td>100</td> <td>700</td> <td>800</td> <td>900</td> <td>1100</td> <td>2200</td> <td>7821</td> <td>8862</td> <td>6231</td> <td>5891</td> <td>100</td> <td>700</td> <td>800</td> <td>900</td> <td>1100</td> <td>2200</td> <td>7821</td> <td>8862</td> <td>6231</td> <td>5891</td> </tr> <tr> <td>Quater 1</td> <td>100</td> <td>700</td> <td>800</td> <td>900</td> <td>1100</td> <td>2200</td> <td>7821</td> <td>8862</td> <td>6231</td> <td>5891</td> <td>100</td> <td>700</td> <td>800</td> <td>900</td> <td>1100</td> <td>2200</td> <td>7821</td> <td>8862</td> <td>6231</td> <td>5891</td> </tr> </tbody> </table>
Javascript
$(document).ready(function() { var table = $('#example').DataTable( { scrollY: "300px", scrollX: true, scrollCollapse: true, paging: false, fixedColumns: { leftColumns: 1 } } ); } );
-
Thisara Subath over 5 yearsSame Issue Here , stackoverflow.com/questions/51046659/…
-
-
Oshada Ekanayake over 5 yearsyou are correct i have missed one js library <script src="cdn.datatables.net/fixedcolumns/3.2.6/js/…>