在数据表 DOM 中隐藏列并保留列答案

【问题标题】：Hide columns and keep columns in the datatable DOM在数据表 DOM 中隐藏列并保留列
【发布时间】：2015-01-03 13:12:36
【问题描述】：

我有一个数据表，我用这种方式隐藏了一些列：

<script>
var tbl = document.getElementById("myTable");
for (var j = 0; j < tbl.rows.length; j++){
      tbl.rows[j].cells[1].style.display = "none";      
      tbl.rows[j].cells[2].style.display = "none";
      tbl.rows[j].cells[6].style.display = "none"; 
      tbl.rows[j].cells[8].style.display = "none";
    }
</script>

因为当我尝试隐藏数据表定义中的列时，列会从 DOM 中删除。我需要将这些列保留在 DOM 中，因为我使用该列的值来更改其他单元格的背景颜色。

我的数据表函数定义：

<script type="text/javascript">
$(document).ready( function() {
     $('#myTable').dataTable( {
      "bPaginate": false,
      "bJQueryUI": true,
      "bAutoWidth": false,
      "iDisplayLength": -1,
      "oLanguage": {
         "sSearch": "Buscar",
        "oPaginate":{
           "sFirst":    "Primero",
            "sLast":     "Ãimo",
            "sNext":     "Siguiente",
            "sPrevious": "Anterior"
        }
         }
     });

   });
   $(function() {
            $('.list-group-item').click(function() {
                $('.panel-collapse.in').collapse('hide');
            });
   });
</script>

如何隐藏列并将列保留在数据表的 DOM 中。

【问题讨论】：

您应该在 jquery 中执行此操作，就像您拥有数据表一样。另外， display: none 不会从 dom 中删除。您一定是遗漏了一些东西，而您的问题有所不同。
你能给我们提琴吗？
@ADASein 我尝试隐藏 jquery 中的列，但是这些列已从数据表 DOM 中删除，我需要评估其他列。出于这个原因，我决定使用 display:none 代替 jquery。当我尝试使用固定标题时，标题是固定的，但也会显示隐藏列中的文本。

标签： javascript jquery html datatables

【解决方案1】：

试试这个。 . .

css:

th.hide_me, td.hide_me {display: none;}

在数据表初始化中：

"aoColumnDefs": [ { "sClass": "hide_me", "aTargets": [ 0 ] } ] // first column in visible columns array gets class "hide_me"

记得将你的隐藏类也添加到你的 thead 单元格中：

<thead>
    <th class="hide_me">First Column</th>
    <th>Second Column</th>
    <th>Third Column</th>
</thead>

答案来自：jQuery DataTables hide column without removing it from DOM

【讨论】：