Question

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

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

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

Answer 2

您可以使用列的visible属性。我建议用引号括起对象属性，例如＆＃34;列＆＃34;，＆＃34;数据＆＃34;或＆＃34;可见＆＃34;。

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

Answer 3

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

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

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

Answer 4

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

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

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

.dt_col_hide{display: none;}

或

.dt_col_hide{visibility:  hidden;}

根据您的要求。

隐藏jQuery dataTables中的列

4 个答案: