How To Hide Datatable Column In Jquery

by

In this blog post, we will discuss how to hide a specific column in a DataTable using jQuery. Hiding a column can be useful for various reasons, such as hiding sensitive information, reducing clutter, or improving the user experience.

Requirements

Step 1: Include the required files

First, make sure to include the necessary DataTables and jQuery files in your project. You can either download them locally or use a CDN. Here’s an example:

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.11.3/css/jquery.dataTables.min.css">

<script type="text/javascript" src="https://cdn.datatables.net/1.11.3/js/jquery.dataTables.min.js"></script>

Step 2: Initialize the DataTable

Next, we need to create an HTML table and initialize it as a DataTable. Here’s a simple example:

<table id="example" class="display" style="width:100%">
    <thead>
        <tr>
            <th>ID</th>
            <th>Name</th>
            <th>Email</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>John Doe</td>
            <td>john.doe@example.com</td>
        </tr>
    </tbody>
</table>

<script>
$(document).ready(function() {
    $('#example').DataTable();
});
</script>

Step 3: Hide a column

Now that our DataTable is initialized, let’s hide a column using the column() and visible() methods. For example, if we want to hide the first column (ID), we can do the following:

$(document).ready(function() {
    var table = $('#example').DataTable();

    // Hide the first column (ID)
    table.column(0).visible(false);
});

Note that the column() method takes the column index as an argument, starting from 0. In the example above, we passed 0 to hide the first column.

Conclusion

In this blog post, we learned how to hide a specific column in a DataTable using jQuery. This technique can be applied to any column you want to hide, and it’s a simple way to create a cleaner and more user-friendly table.