jQuery Datatable Hide/Show Column Based On Condition

Websolutionstuff | Jan-26-2023 | Categories : Laravel jQuery

In this article, we will see a jquery datatable hide/show column based on condition. Here, we will learn how to hide and show a datatable column dynamically. You can make use of the column().visible() API method to dynamically show and hide columns in a datatable.

column().visible() is used to show and hide columns in datatable based on condition. Also, you can get/set the visibility of single and multiple selected columns.

So, let's see hide datatable column using jquery, show/hide column dynamically in datatable, jquery datatable add column dynamically, show/hide columns dynamically datatable, laravel 9 datatable hide and show columns dynamically.

Example:

We will check the column based on the condition and get the visibility status of column index 1.

var table = $('#example').DataTable();
 
alert( 'Column index 1 is '+
    (table.column( 1 ).visible() === true ? 'visible' : 'not visible')
);

 

Example:

Hide the second column in the table. You can hide and show any column using the true and false.

var table = $('#example').DataTable();
 
table.column( 1 ).visible( false );

 
Example:

In this example, we will see on click you can hide and show columns in datatable.

<div>
    Toggle column: <a class="toggle-vis" data-column="0">Name</a> - <a class="toggle-vis" data-column="1">Position</a> - <a class="toggle-vis" data-column="2">Office</a> - <a class="toggle-vis" data-column="3">Age</a> - <a class="toggle-vis" data-column="4">Start date</a> - <a class="toggle-vis" data-column="5">Salary</a>
</div>
<table id="example" class="display" style="width:100%">
    <thead>
        <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th>Salary</th>
        </tr>
    </thead>
    <tbody>           
        <tr>
            <td>Bruno Nash</td>
            <td>Software Engineer</td>
            <td>London</td>
            <td>38</td>
            <td>2011-05-03</td>
            <td>$163,500</td>
        </tr>
        <tr>
            <td>Sakura Yamamoto</td>
            <td>Support Engineer</td>
            <td>Tokyo</td>
            <td>37</td>
            <td>2009-08-19</td>
            <td>$139,575</td>
        </tr>
        <tr>
            <td>Thor Walton</td>
            <td>Developer</td>
            <td>New York</td>
            <td>61</td>
            <td>2013-08-11</td>
            <td>$98,540</td>
        </tr>
        <tr>
            <td>Finn Camacho</td>
            <td>Support Engineer</td>
            <td>San Francisco</td>
            <td>47</td>
            <td>2009-07-07</td>
            <td>$87,500</td>
        </tr>
        <tr>
            <td>Serge Baldwin</td>
            <td>Data Coordinator</td>
            <td>Singapore</td>
            <td>64</td>
            <td>2012-04-09</td>
            <td>$138,575</td>
        </tr>
        <tr>
            <td>Zenaida Frank</td>
            <td>Software Engineer</td>
            <td>New York</td>
            <td>63</td>
            <td>2010-01-04</td>
            <td>$125,250</td>
        </tr>
        <tr>
            <td>Zorita Serrano</td>
            <td>Software Engineer</td>
            <td>San Francisco</td>
            <td>56</td>
            <td>2012-06-01</td>
            <td>$115,000</td>
        </tr>
        <tr>
            <td>Jennifer Acosta</td>
            <td>Junior Javascript Developer</td>
            <td>Edinburgh</td>
            <td>43</td>
            <td>2013-02-01</td>
            <td>$75,650</td>
        </tr>
        <tr>
            <td>Cara Stevens</td>
            <td>Sales Assistant</td>
            <td>New York</td>
            <td>46</td>
            <td>2011-12-06</td>
            <td>$145,600</td>
        </tr>
        <tr>
            <td>Hermione Butler</td>
            <td>Regional Director</td>
            <td>London</td>
            <td>47</td>
            <td>2011-03-21</td>
            <td>$356,250</td>
        </tr>
        <tr>
            <td>Lael Greer</td>
            <td>Systems Administrator</td>
            <td>London</td>
            <td>21</td>
            <td>2009-02-27</td>
            <td>$103,500</td>
        </tr>
        <tr>
            <td>Jonas Alexander</td>
            <td>Developer</td>
            <td>San Francisco</td>
            <td>30</td>
            <td>2010-07-14</td>
            <td>$86,500</td>
        </tr>
        <tr>
            <td>Shad Decker</td>
            <td>Regional Director</td>
            <td>Edinburgh</td>
            <td>51</td>
            <td>2008-11-13</td>
            <td>$183,000</td>
        </tr>
        <tr>
            <td>Michael Bruce</td>
            <td>Javascript Developer</td>
            <td>Singapore</td>
            <td>29</td>
            <td>2011-06-27</td>
            <td>$183,000</td>
        </tr>
        <tr>
            <td>Donna Snider</td>
            <td>Customer Support</td>
            <td>New York</td>
            <td>27</td>
            <td>2011-01-25</td>
            <td>$112,000</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th>Salary</th>
        </tr>
    </tfoot>
</table>

 

 

jQuery:

$(document).ready(function () {
    var table = $('#example').DataTable({
        scrollY: '200px',
        paging: false,
    });
 
    $('a.toggle-vis').on('click', function (e) {
        e.preventDefault();
 
        // Get the column API object
        var column = table.column($(this).attr('data-column'));
 
        // Toggle the visibility
        column.visible(!column.visible());
    });
});

 


You might also like:

Recommended Post
Featured Post
What Is New In Laravel 9 - Features Of Laravel 9
What Is New In Laravel 9 - Fea...

In this article, we will see what is new in laravel 9 and the features of laravel 9. Laravel 9 is recently released...

Read More

Feb-13-2022

How To Merge Two PDF Files In Laravel 9
How To Merge Two PDF Files In...

In this article, we will see how to merge two pdf files in laravel 9. Here, we will learn laravel 8/9 to merge two...

Read More

Dec-20-2022

Building a Custom WebSocket Server with Laravel 11 and Ratchet
Building a Custom WebSocket Se...

In this tutorial, I'll walk you through the process of building a custom WebSocket server using Laravel 11 and Ratch...

Read More

Sep-23-2024

Laravel 10 Change Column Name And Type In Migration
Laravel 10 Change Column Name...

In this article, we will see laravel 10 change column names and data types in migration. Here, we will learn about...

Read More

Apr-19-2023