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

Share:
10,210
Oshada Ekanayake
Author by

Oshada Ekanayake

Updated on December 05, 2022

Comments

  • Oshada Ekanayake
    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>
    

    table output

    Javascript

    $(document).ready(function() {
        var table = $('#example').DataTable( {
            scrollY:        "300px",
            scrollX:        true,
            scrollCollapse: true,
            paging:         false,
            fixedColumns:   {
                leftColumns: 1
    
            }
        } );
    } );
    
  • Oshada Ekanayake
    Oshada Ekanayake over 5 years
    you are correct i have missed one js library <script src="cdn.datatables.net/fixedcolumns/3.2.6/js/…>