How to dynamically make columns of jQuery DataTable disappear

Question

Here is the information about my development environment:

• Microsoft Visual Studio Professional 2013

• .NET Framework 4.0

• jQuery-2.1.4.min.js

• jQuery DataTables 1.10.7

• Newtonsoft.Json.7.0.1

• jQuery UI 1.11.2

  var GetAUsersLogs = function (sortColumn, isDescending) {
            $('#PersonalUsersLogTable').DataTable({
                "aoColumns": [
                            { "sTitle": "LogBsonValueId" },
                            { "sTitle": "UserID" },
                            { "sTitle": "Driver Name" },
                            { "sTitle": "Log Date" },
                            { "sTitle": "Duty Cycle" },
                            {
                                "mData": null,
                                "mRender": function (obj) {
                                    return '<a href="#" id="' + obj.DT_RowId + '" onclick="ViewLogAuditHistory(this)"  >Log Hist</a>';
                                }
                            },
                            {
                                "sTitle": "Details",
                                "mData": null,
                                "mRender": function (obj) {
                                    return '<a href="#" id="' + obj.DT_RowId + '" onclick="ViewParticularLogsInfo(this)"  >View</a>';
                                }
                            }
            ],
            "aoColumnDefs": [{ "bVisible": false, "aTargets": [0, 1, 5] }],
            "iDisplayLength": 5,
            "sDom": '<"clear">frtip',
            "bProcessing": true,
            "bServerSide": true,
            "bLengthChange": false,
            "bPaginate": true,
            "bDestroy": true,
            "bSort": false,
            "bInfo": true,
            "bFilter": false,
            "sAjaxSource": 'LogsList.aspx/BindPersonalUsersLogDataTable',
            "bJQueryUI": true,
            "bDeferRender": true,
            "sPaginationType": "full_numbers",
            "fnServerParams": function (aoData) {
                aoData.push(
                            { "name": "sortColumn", "value": sortColumn },
                            { "name": "isDescending", "value": isDescending }
                );
            },
            "fnServerData": function (sSource, aoData, fnCallback) {
                $.ajax({

                    "dataType": 'json',
                    "contentType": "application/json; charset=utf-8",
                    "type": "GET",
                    "url": sSource,
                    "data": aoData,
                    "success":
                            function (msg) {
                                var json = jQuery.parseJSON(msg.d);
                                fnCallback(json);

                            },

                    beforeSend: function () {
                        $('.loader').show()
                    },
                    complete: function () {
                        $('.loader').hide()

                    }
                });
            }
        }); // end of PersonalUsersLogTable DataTable method
    }
    // end of Code used to Bind Data to Table

The invocation to BindPersonalUsersLogDataTable method is in a C# file. Within BindPersonalUsersLogDataTable, I will code that will determine if logged in user is an Admin or plain user.

If the logged in user is a plain user, then I want to dynamically make some of the columns in the jQuery DataTable Invisible.

Could some please tell me the changes I need to make in order to the aforementioned code to get the desired functionality?

Answer 1

You can use column().visible() or columns().visible() API methods to dynamically show/hide a single column or a set of columns.

"success": function (msg) {
   var api = $('#PersonalUsersLogTable').DataTable();

   var json = jQuery.parseJSON(msg.d);

   // Enable/disable columns based on user type            
   if(json.isAdminUser){
      api.columns([2,3]).visible(true);
   } else {
      api.columns([2,3]).visible(false);
   }

   fnCallback(json);
},