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:

Recommended Post
Featured Post
StartOf And EndOf Functions Example Of Carbon
StartOf And EndOf Functions Ex...

In this article, we will see startof and endof functions example of carbon in laravel. As you all know carbon provide ma...

Read More

Dec-19-2020

How To Install Moment.js In Angular 15
How To Install Moment.js In An...

Welcome to this step-by-step guide on installing Moment.js in your Angular 15 project. As an Angular developer, I unders...

Read More

Jun-26-2023

How To Send Email using Node.js
How To Send Email using Node.j...

Hello Friends, In this tutorial we will learn how to send email using node.js app. In this tutorial we will see send...

Read More

Jul-28-2021

How Generate PDF From HTML View In Laravel
How Generate PDF From HTML Vie...

In this example, I will teach you how to generate PDF files from an HTML view in laravel. For generating PDF files I wil...

Read More

Jun-01-2020