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
How To Disabled Submit Button After Clicked Using jQuery
How To Disabled Submit Button...

In this article, we will see how to disabled submit button after clicked using jquery. Using jQuery we will disable the...

Read More

May-08-2022

Next Previous Link Button Pagination in Laravel
Next Previous Link Button Pagi...

Today we will learn next previous link button pagination in laravel, Using paginate method you can easily create paginat...

Read More

Jun-14-2021

Export Buttons In Datatable
Export Buttons In Datatable

In this tutorial i will show you How To Add Export Buttons In Datatable, If you want to export DataTable data...

Read More

Sep-02-2020

How To Import SQL File Into MySQL Using Command
How To Import SQL File Into My...

In this article, we will see how to import SQL files into MySQL using the command. You can import databases in multiple...

Read More

Nov-10-2022