數據表重新加載到第一頁時，隱藏列

Question

我正在使用jQuery數據表插件，我試圖讓用戶隱藏一列。

代碼正在工作，但是當我轉到不是第一頁的頁面時，我隱藏了一列，它回到隱藏列的第一頁。

我想要的是，它停留在用戶所在的頁面上並隱藏該列。

var oTable = $("#x").dataTable({ 
     responsive: true, 
     "bFilter": true, 
     "bPaginate": true, 
     "order": [[5, 'desc']], 
     "aoColumns": [ 
     {"bSortable": false }, 
     {"sClass": "text-center", "sWidth": "10%"}, 
     {"sClass": "text-center", "sWidth": "10%"}, 
     {"sClass": "text-center", "sWidth": "10%", "bSortable": false}, 
     {"sClass": "text-center", "sWidth": "10%", "bSortable": false}, 
     {"sClass": "text-center", "sWidth": "10%"} 
     ] 
    }); 
    $('.oculta-mostra').click(function(event) { 
     event.preventDefault(); 
     $(this).children().first().toggleClass("label-success"); 
     $(this).children().first().toggleClass("label-danger"); 
     fnShowHide($(this).prop('id')); 
    }); 
    function fnShowHide(iCol) { 
     var bVis = oTable.fnSettings().aoColumns[iCol].bVisible; 
     oTable.fnSetColumnVis(iCol, bVis ? false : true); 
    } 
    }); 

HTML

 <a href="" id="1" class="oculta-mostra" style="text-decoration: none"> 
      <span class="label label-success">J</span> 
     </a> 
     <a href="" id="2" class="oculta-mostra" style="text-decoration: none"> 
      <span class="label label-success">V</span> 
     </a> 
     <a href="" id="3" class="oculta-mostra" style="text-decoration: none"> 
      <span class="label label-success">E</span> 
     </a> 
     <a href="" id="4" class="oculta-mostra" style="text-decoration: none"> 
      <span class="label label-success">D</span> 
     </a> 
    <table id="x" class="table table-bordered table-striped table-hover" cellspacing="0" width="100%"> 
    <thead> 
     <tr> 
      <th>nome</th> 
      <th>J</th> 
      <th>V</th> 
      <th>E</th> 
      <th>D</th> 
      <th>P</th> 
     </tr> 
    </thead> 
    <tbody> 
     @foreach($x as $u) 
     <tr> 
      <td>{{ $u->nome }}</td> 
      <td>{{ $u->peladas }}</td> 
      <td>{{ $u->vitorias }}</td> 
      <td>{{ $u->empates }}</td> 
      <td>{{ $u->derrotas }}</td> 
      <td>{{ $u->pontuacao }}</td> 
     @endforeach 
     </tr> 
    </tbody> 

Answer 1

你的函數來顯示和隱藏列，應返回當前頁面：

首先，獲取當前頁面的數量：

var iPage = Math.ceil(oTable.fnSettings()._iDisplayStart/oTable.fnSettings()._iDisplayLength) 

二，將頁面設置爲表格：

oTable.fnPageChange(iPage); 

功能齊全

function fnShowHide(iCol) { 
    var bVis = oTable.fnSettings().aoColumns[iCol].bVisible; 
    var iPage = Math.ceil(oTable.fnSettings()._iDisplayStart/oTable.fnSettings()._iDisplayLength) 
    oTable.fnSetColumnVis(iCol, bVis ? false : true); 
    oTable.fnPageChange(iPage); 
} 

結果：http://jsfiddle.net/cmedina/7kfmyw6x/104/