How To Fixed Header In Datatable Using jQuery

WebSolutionStuff | Jan-05-2023 | Categories : Laravel PHP jQuery

In this article, we will see how to fix the header in datatable using jquery. Here, we will learn to fix the header and footer in datatable in jquery. Datatable provides fixedHeader attributes. You can true and false fixedHeader attributes.

FixedHeader is an extension for DataTables that provides the ability to show a header and / or footer that is sticky. The default value is undefined. FixedHeader is not automatically enabled on a DataTable.

So, let's see the jquery datatable fixed header, jquery datatable fixed header not working, how to fix the footer in datatable, header and footer fixed in datatable.

Example:

Enable FixedHeader with default values.

$('#example').DataTable( {
    fixedHeader: true
} );

Enable FixedHeader with footer also enabled.

$('#example').DataTable( {
    fixedHeader: {
        footer: true
    }
} );

Disable the header, but enable the footer.

$('#example').DataTable( {
    fixedHeader: {
        header: false,
        footer: true
    }
} );

FixedHeader will lock a table's header to the top of the table.

Add HTML

<table id="example" class="display nowrap" style="width:100%">
    <thead>
        <tr>
            <th>First name</th>
            <th>Last name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th>Salary</th>
            <th>Extn.</th>
            <th>E-mail</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Tiger</td>
            <td>Nixon</td>
            <td>System Architect</td>
            <td>Edinburgh</td>
            <td>61</td>
            <td>2011-04-25</td>
            <td>$320,800</td>
            <td>5421</td>
            <td>[email protected]</td>
        </tr>
        <tr>
            <td>Garrett</td>
            <td>Winters</td>
            <td>Accountant</td>
            <td>Tokyo</td>
            <td>63</td>
            <td>2011-07-25</td>
            <td>$170,750</td>
            <td>8422</td>
            <td>[email protected]</td>
        </tr>
        <tr>
            <td>Ashton</td>
            <td>Cox</td>
            <td>Junior Technical Author</td>
            <td>San Francisco</td>
            <td>66</td>
            <td>2009-01-12</td>
            <td>$86,000</td>
            <td>1562</td>
            <td>[email protected]</td>
        </tr>
        <tr>
                <td>Cedric</td>
                <td>Kelly</td>
                <td>Senior Javascript Developer</td>
                <td>Edinburgh</td>
                <td>22</td>
                <td>2012-03-29</td>
                <td>$433,060</td>
                <td>6224</td>
                <td>[email protected]</td>
            </tr>
            <tr>
                <td>Airi</td>
                <td>Satou</td>
                <td>Accountant</td>
                <td>Tokyo</td>
                <td>33</td>
                <td>2008-11-28</td>
                <td>$162,700</td>
                <td>5407</td>
                <td>[email protected]</td>
            </tr>
            <tr>
                <td>Brielle</td>
                <td>Williamson</td>
                <td>Integration Specialist</td>
                <td>New York</td>
                <td>61</td>
                <td>2012-12-02</td>
                <td>$372,000</td>
                <td>4804</td>
                <td>[email protected]</td>
            </tr>
            <tr>
                <td>Herrod</td>
                <td>Chandler</td>
                <td>Sales Assistant</td>
                <td>San Francisco</td>
                <td>59</td>
                <td>2012-08-06</td>
                <td>$137,500</td>
                <td>9608</td>
                <td>[email protected]</td>
            </tr>
            <tr>
                <td>Rhona</td>
                <td>Davidson</td>
                <td>Integration Specialist</td>
                <td>Tokyo</td>
                <td>55</td>
                <td>2010-10-14</td>
                <td>$327,900</td>
                <td>6200</td>
                <td>[email protected]</td>
            </tr>
    </tbody>
</table>

Add jQuery

$(document).ready(function() {
    var table = $('#example').DataTable( {
        responsive: true,
        paging: false
    } );
 
    new $.fn.dataTable.FixedHeader( table );
} );

CDN Files

https://code.jquery.com/jquery-3.5.1.js
https://cdn.datatables.net/1.13.1/js/jquery.dataTables.min.js
https://cdn.datatables.net/responsive/2.4.0/js/dataTables.responsive.min.js
https://cdn.datatables.net/fixedheader/3.3.1/js/dataTables.fixedHeader.min.js

You might also like: