How To Hide Datatable Column In Jquery

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.


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=""></script>

<link rel="stylesheet" type="text/css" href="">

<script type="text/javascript" src=""></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%">
            <td>John Doe</td>
            <td>[email protected]</td>

$(document).ready(function() {

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)

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.


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.