How To Fixed Header In Datatable Using jQuery

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

Data presentation and organization are easier with data tables. They help display information in an organized way. These tools are important for showing data clearly, even when it's complex.

jQuery, a popular JavaScript library, makes data tables even better for web developers. It's easy to use and has strong features. jQuery is great for improving data tables. You can change, sort, and filter data with it. You can also make interactive designs and improve how users interact with the data.

Here, we will talk about fixing headers in data tables using jQuery. We will show you how to do it and make your data-driven websites better. So, let’s dive deeper:

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

Conclusion

Using jQuery to fix headers in a data table can really boost your web development skills. By following these steps, you can make sure your tables stay organized and easy to use, even with lots of data.

With jQuery, you can easily keep headers in place, improving the user experience and making your web apps look even better. With this new skill, you'll be able to create more interesting and effective ways to show data, which will impress the people who visit your site.

You might also like: