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

Hide columns and keep columns in the datatable DOM

本文关键字：数据表 DOM 保留 隐藏      更新时间：2023-09-26

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

<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中。

试试这个。

css：

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

在数据表init:中

"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隐藏列，而不将其从DOM 中删除

相关文章：