如何动态地使 jQuery DataTable 的列消失答案

【问题标题】：How to dynamically make columns of jQuery DataTable disappear如何动态地使 jQuery DataTable 的列消失
【发布时间】：2016-01-07 15:02:41
【问题描述】：

这里是关于我的开发环境的信息：

Microsoft Visual Studio Professional 2013
.NET Framework 4.0
jQuery-2.1.4.min.js
jQuery 数据表 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

对BindPersonalUsersLogDataTable 方法的调用位于C# 文件中。在BindPersonalUsersLogDataTable 中，我将编写代码来确定登录用户是管理员还是普通用户。

如果登录用户是普通用户，那么我想动态地使 jQuery DataTable 中的某些列不可见。

请告诉我我需要进行哪些更改才能使上述代码获得所需的功能？

【问题讨论】：

标签： c# jquery datatables

【解决方案1】：

您可以使用column().visible() 或columns().visible() API 方法来动态显示/隐藏单个列或一组列。

"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);
},

【讨论】：