在jQuery数据表中隐藏列

问题描述:

我有隐藏jQuery数据表列的问题。我希望该列检索数据,但我不希望它显示在显示页面上。我想隐藏我的专栏没有8,所以从CSS我试图隐藏它,它给了我可折叠的div。在jQuery数据表中隐藏列

image getting + icon on display page

下面是我对数据表和类的隐藏是“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 } 
        ], 
    }); 

尝试使用此代码

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] } 
        ], 
    }); 
+1

我试过你的答案,它没有工作。我试过这个评论“响应”:真正的,它开始工作。我正在使用它来使数据表达响应。再次感谢你的回答:) – 2014-10-28 11:32:02

+0

起初这个解决方案对我来说不起作用,但后来我注意到我已经在列表中留下了属性可见:“false”,在失败的列中失败的尝试。一旦我清理了我的烂摊子,这个栏目就看不见了。谢谢。 – MrsTapp 2016-01-13 16:30:23

您可以使用列visible财产。 我建议用引号括起对象属性,例如“列”,“数据”或“可见”。

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

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

看起来你在响应模式下使用dataTable,所以基于此,如果你想隐藏一个列,你必须根据你的需要应用特定的css类。您应用于与该列关联的第th个元素,并解决了您的问题。

有关不同css类的更多信息可以发现here

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

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

dt_col_hide是CSS类别,它会隐藏列在这种情况下索引3。

.dt_col_hide{display: none;} 

.dt_col_hide{visibility: hidden;} 

按您的要求。