Support us .Net Basics C# SQL ASP.NET ADO.NET MVC Slides C# Programs Subscribe Buy DVD

jQuery datatable show hide columns

Suggested Videos
Part 105 - jQuery datatables plugin
Part 106 - jQuery datatables get data from database table
Part 107 - jQuery datatables individual column search



In this video we will discuss how to show or hide columns of a jQuery datatable. This is continuation to Part 107. Please watch Part 107 from jQuery tutorial before proceeding.



When we click on a column name, the respective column visibility should be toggled
jQuery datatable show hide columns

The following are the changes required for the example we worked with in Part 107.

Include the following HTML just above the datatable markup
<div style="padding: 5px; padding-left: 0px">
    <b>Show/Hide Column : </b>
    <a class="showHideColumn" data-columnindex="0">Id</a> -
    <a class="showHideColumn" data-columnindex="1">First Name</a> -
    <a class="showHideColumn" data-columnindex="2">Last Name</a> -
    <a class="showHideColumn" data-columnindex="3">Gender</a> -
    <a class="showHideColumn" data-columnindex="4">Job Title</a> -
    <a class="showHideColumn" data-columnindex="5">Web Site</a> -
    <a class="showHideColumn" data-columnindex="6">Salary</a> -
    <a class="showHideColumn" data-columnindex="7">Hire Date</a>
</div>

Include the following style section, in the head section of the page
<style>
    .showHideColumn {
        cursor: pointer;
        color: blue;
    }
</style>

The above HTML and CSS would produce the following
jquery datatables toggle column visibility

Finally, include the following code block in the success callback function
$('.showHideColumn').on('click', function () {
    var tableColumn = datatableInstance.column($(this).attr('data-columnindex'));
    tableColumn.visible(!tableColumn.visible());
});

Complete Example : 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="jquery-1.11.2.js"></script>
    <link rel="stylesheet" type="text/css"
        href="//cdn.datatables.net/1.10.7/css/jquery.dataTables.min.css" />
    <script src="//cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js">
    </script>
    <script type="text/javascript">
        $(document).ready(function () {
            $.ajax({
                url: 'EmployeeService.asmx/GetEmployees',
                method: 'post',
                dataType: 'json',
                success: function (data) {
                    var datatableInstance = $('#datatable').DataTable({
                        paging: true,
                        sort: true,
                        searching: true,
                        data: data,
                        columns: [
                            { 'data': 'Id' },
                            { 'data': 'FirstName' },
                            { 'data': 'LastName' },
                            { 'data': 'Gender' },
                            { 'data': 'JobTitle' },
                            {
                                'data': 'WebSite',
                                'sortable': false,
                                'searchable': true,
                                'render': function (webSite) {
                                    if (!webSite) {
                                        return 'N/A';
                                    }
                                    else {
                                        return '<a href=' + webSite + '>'
                                            + webSite.substr(0, 10) + '...' + '</a>';
                                    }
                                }
                            },
                            {
                                'data': 'Salary',
                                'render': function (salary) {
                                    return "$" + salary;
                                }
                            },
                            {
                                'data': 'HireDate',
                                'render': function (jsonDate) {
                                    var date = new Date(parseInt(jsonDate.substr(6)));
                                    var month = date.getMonth() + 1;
                                    return month + "/" + date.getDate() + "/" + date.getFullYear();
                                }
                            }
                        ]
                    });

                    $('#datatable tfoot th').each(function () {
                        var title = $('#datatable thead th').eq($(this).index()).text();
                        $(this).html('<input type="text" placeholder="Search ' + title + '" />');
                    });

                    datatableInstance.columns().every(function () {
                        var dataTableColumn = this;

                        $(this.footer()).find('input').on('keyup change', function () {
                            dataTableColumn.search(this.value).draw();
                        });
                    });

                    $('.showHideColumn').on('click', function (e) {
                        e.preventDefault();

                        var tableColumn =
                            datatableInstance.column($(this).attr('data-columnindex'));
                        tableColumn.visible(!tableColumn.visible());
                    });
                }
            });
        });
    </script>
    <style>
        .showHideColumn {
            cursor: pointer;
            color: blue;
        }
    </style>
</head>
<body style="font-family: Arial">
    <form id="form1" runat="server">
        <div style="padding: 5px; padding-left: 0px">
            <b>Show/Hide Column : </b>
            <a class="showHideColumn" data-columnindex="0">Id</a> -
            <a class="showHideColumn" data-columnindex="1">First Name</a> -
            <a class="showHideColumn" data-columnindex="2">Last Name</a> -
            <a class="showHideColumn" data-columnindex="3">Gender</a> -
            <a class="showHideColumn" data-columnindex="4">Job Title</a> -
            <a class="showHideColumn" data-columnindex="5">Web Site</a> -
            <a class="showHideColumn" data-columnindex="6">Salary</a> -
            <a class="showHideColumn" data-columnindex="7">Hire Date</a>
        </div>
        <div style="width: 1700px; border: 1px solid black; padding: 3px">
            <table id="datatable">
                <thead>
                    <tr>
                        <th>Id</th>
                        <th>First Name</th>
                        <th>Last Name</th>
                        <th>Gender</th>
                        <th>Job Title</th>
                        <th>Web Site</th>
                        <th>Salary</th>
                        <th>Hire Date</th>
                    </tr>
                </thead>
                <tfoot>
                    <tr>
                        <th>Id</th>
                        <th>First Name</th>
                        <th>Last Name</th>
                        <th>Gender</th>
                        <th>Job Title</th>
                        <th>Web Site</th>
                        <th>Salary</th>
                        <th>Hire Date</th>
                    </tr>
                </tfoot>
            </table>
        </div>
    </form>
</body>
</html>

jQuery tutorial for beginners

2 comments:

  1. hello sir....
    I have no idea how to implement mvc in real-time application .....
    It will really be helpful if you upload A series with real time app project having Impementation of all the Technologies...

    Thanking You for Such A Great & Awsome Series

    In Future I really hope to meet you..

    ReplyDelete
  2. If I will change the font for the colum name in the table above dataTable (ex. Bold) for hidden columns how can I get the status?
    thank you

    ReplyDelete

If you like this website, please share with your friends on facebook and Google+ and recommend us on google using the g+1 button on the top right hand corner.