如何隐藏数据表中的特定列?

时间:2016-12-16 17:15:12

标签: javascript datatables

我正在构建一个我需要显示datatable的页面。 根据条件,此表应显示5或6列。

这是.js文件中的代码,用于显示包含6列的表格:

if(Display)
{
    myself.set_DataTable(myself._findjcontrol("tTable1"));    
    myself.get_DataTable().dataTable(
    {
        "sDom": '<"top">rt<"bottom"flp><"clear">',
        "aoColumns": [
             { "sType": "string" }, //Column1
             {"sType": "string" }, //Column2
             {"sType": "string" }, //Column3
             {"sType": "string" }, //Column4
             {"sType": "string" }, //Column5
             {"sType": "html"} //Column6
        ],
        "bPaginate": false,
        "bAutoWidth": false,
        "bJQueryUI": false,
        "bFilter": false,
        "bPage": false,
        "bSort": false,
        "binfo": false,
        "bSortClasses": false
    });
}
else
{
    myself.set_DataTable(myself._findjcontrol("tTable_2"));
    myself.get_DataTable().dataTable(
    {
        "sDom": '<"top">rt<"bottom"flp><"clear">',
        "aoColumns": [
             { "sType": "string" }, //Column1
             {"sType": "string" }, //Column2
             {"sType": "string" }, //Column3
             {"sType": "string" }, //Column4
             {"sType": "string" } //Column5
        ],
        "bPaginate": false,
        "bAutoWidth": false,
        "bJQueryUI": false,
        "bFilter": false,
        "bPage": false,
        "bSort": false,
        "binfo": false,
        "bSortClasses": false
    });
}

根据条件,我重复两次代码。有没有办法为列定义某种属性,因此,根据条件,我更改该属性并将其附加到列定义。像这样:

var isDisplay = false;
if(Display)
{
   isDisplay = true;
}
else
{
  isDisplay = false;
}

  /* the rest of code */

     {"sType": "string", isDisplay } //Column5

/* the rest of code */

可以这样做吗?

1 个答案:

答案 0 :(得分:0)

如果我正确理解了您的需求,您可以将设置与变量分开,而无需重复代码:

var control = "tTable_2"
  , columns = [
             { "sType": "string" }, //Column1
             {"sType": "string" }, //Column2
             {"sType": "string" }, //Column3
             {"sType": "string" }, //Column4
             {"sType": "string" } //Column5
          ];
if(Display)
{
   columns.push({"sType": "html"}); //Column6
   control = "tTable_1";
}


myself.set_DataTable(myself._findjcontrol(control));
myself.get_DataTable().dataTable(
{
    "sDom": '<"top">rt<"bottom"flp><"clear">',
    "aoColumns": columns,
    "bPaginate": false,
    "bAutoWidth": false,
    "bJQueryUI": false,
    "bFilter": false,
    "bPage": false,
    "bSort": false,
    "binfo": false,
    "bSortClasses": false
});

此外,似乎DataTable中有feature可以帮助您。尝试在要隐藏/显示的列中使用属性bVisible

myself.set_DataTable(myself._findjcontrol("tTable1"));    
myself.get_DataTable().dataTable(
{
    "sDom": '<"top">rt<"bottom"flp><"clear">',
    "aoColumns": [
         { "sType": "string" }, //Column1
         {"sType": "string" }, //Column2
         {"sType": "string" }, //Column3
         {"sType": "string" }, //Column4
         {"sType": "string" }, //Column5
         {"sType": "html", "bVisible": Display} //Column6
    ],
    "bPaginate": false,
    "bAutoWidth": false,
    "bJQueryUI": false,
    "bFilter": false,
    "bPage": false,
    "bSort": false,
    "binfo": false,
    "bSortClasses": false
});

希望它有所帮助。