Question

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

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

Answer 1

试试这个。。

的CSS：

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

在datatables 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 hide column without removing it from DOM

中检索到答案

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

1 个答案: