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
Carbon Add Minutes In Laravel
Carbon Add Minutes In Laravel

In this example, we will see carbon add minutes in laravel. Here we will give you a simple example of laravel carbo...

Read More

Dec-11-2020

Laravel 11 Simple Pagination Example
Laravel 11 Simple Pagination E...

Hello developers! In this article, we'll see the laravel 11 simple pagination example. Here, we'll use Bootstrap...

Read More

May-03-2024

Laravel 9 Yajra Datatable Example
Laravel 9 Yajra Datatable Exam...

In this artical we will see laravel 9 yajra datatable example. As we all used datatable on our backend side project, Her...

Read More

Mar-10-2022

Laravel 10 Scout Search and Algolia Example
Laravel 10 Scout Search and Al...

Hey everyone! Ever wished your Laravel application could deliver lightning-fast search results? Well, I've got great...

Read More

Feb-21-2024