在 jQuery 数据表中隐藏列答案

【问题标题】：Hiding column in jQuery dataTables在 jQuery 数据表中隐藏列
【发布时间】：2014-10-27 10:58:52
【问题描述】：

我在隐藏 jQuery 数据表列时遇到问题。我希望该列检索数据，但我不希望它显示在显示页面上。我想隐藏我的第 8 列，所以从 CSS 中我尝试隐藏它，它给了我可折叠的 div。

下面是我的数据表代码，隐藏类是“hideCol”。

 var userTable = $('#user').dataTable( {
      "processing": true,
      "serverSide": true,
      "ajax":"admin/getData.php",
      "responsive" : true,
      "lengthMenu": [10, 25],
      "paginationType" : "input",
      columns: [
              { data:'param0'},
              { data: 'param1' },
              { data: 'param2' },
              { data: 'param3' },
              { data: 'param4' },
              { data: 'param5' },
              { data: 'param6' },
              { data: 'param7'},
          ],
      fnRowCallback:function(nRow,aData, iDisplayIndex, iDisplayIndexFull){
        var seenReportedVal =Number($('td:eq(7)', nRow).text());
        $('td:eq(7)', nRow).addClass('hideCol');
        if(seenReportedVal==0)
        {
         $(nRow).addClass('bold');
        }
      },
       "columnDefs": [
                       { "visible": false, "targets": 7 }
                     ],
    });

【问题讨论】：

标签： jquery-datatables

【解决方案1】：

尝试使用此代码

var userTable = $('#user').dataTable( {
      "processing": true,
      "serverSide": true,
      "ajax":"admin/getData.php",
      "responsive" : true,
      "lengthMenu": [10, 25],
      "paginationType" : "input",
      columns: [
              { data:'param0'},
              { data: 'param1' },
              { data: 'param2' },
              { data: 'param3' },
              { data: 'param4' },
              { data: 'param5' },
              { data: 'param6' },
              { data: 'param7'},
          ],
       "columnDefs": [
                       { "visible": false, "targets": [7] }
                     ],
    });

【讨论】：

我用你的回答试过了，没用。我试过这个评论“响应式”：true，它开始工作了。我使用它是为了使数据表响应。再次感谢您的回答:)
起初这个解决方案对我不起作用，但后来我注意到我在列列表中留下了可见的属性：“false”，这是在不可见列尝试失败后留下的。一旦我清理了我的烂摊子，柱子就看不见了。谢谢。

【解决方案2】：

您可以使用列的visible 属性。我建议用引号将对象属性括起来，例如“列”、“数据”或“可见”。

"columns": [
          { "data":'param0'},
          { "data": 'param1', "visible": false},
          { "data": 'param2'},
          { "data": 'param3'},
          { "data": 'param4'},
          { "data": 'param5'},
          { "data": 'param6'},
          { "data": 'param7'},
      ]

【讨论】：

【解决方案3】：

我不知道你是否已经解决了你的问题，但由于我遇到了同样的问题，我至少会与你分享我的解决方案。

看起来您在响应模式下使用 dataTable，因此基于此，如果您想隐藏列，则必须根据需要为其应用特定的 css 类。您应用到与该列关联的第 th 个元素，您的问题就解决了。

更多关于不同css类的信息可以在here找到。

【讨论】：

【解决方案4】：

我已经用一些 CSS 解决了这个问题。可能对其他人有帮助。

"aoColumnDefs": [
                 {"sClass": "dt_col_hide", "aTargets": [3]}
              ],

dt_col_hide 是一个 css 类，在这种情况下它将隐藏索引为 3 的列。

.dt_col_hide{display: none;}

或

.dt_col_hide{visibility:  hidden;}

根据您的要求。

【讨论】：

这是我设法隐藏该列的唯一方法，感谢您分享您的解决方案。