如何动态地使jQuery DataTable列消失

时间:2016-01-07 15:02:41

标签: c# jquery datatables

以下是有关我的开发环境的信息:

  • 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

BindPersonalUsersLogDataTable方法的调用是在C#文件中。 在BindPersonalUsersLogDataTable内,我将编码以确定登录用户是管理员还是普通用户。

如果登录用户是普通用户,那么我想动态地在jQuery DataTable Invisible中创建一些列。

有些人可以告诉我为了获得所需的功能而需要进行的更改吗?

1 个答案:

答案 0 :(得分: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);
},