DataTable auf die erste Seite neu laden, wenn Spalte

Question

Ich verwende das jquery dataTable-Plugin und ich versuche, Benutzern zu erlauben, eine Spalte auszublenden.

Der Code funktioniert, aber wenn ich auf eine Seite gehe, die nicht die erste Seite ist, und ich eine Spalte ausblenden, Es geht zurück auf die erste Seite mit der Spalte ausgeblendet.

Was ich möchte ist, dass es auf der Seite bleibt, auf der der Benutzer ist und die Spalte versteckt.

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

Ihre Funktion Spalte ein- und auszublenden, sollte die aktuelle Seite zurück:

Zuerst die Anzahl der aktuellen Seite erhalten:

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

Zweite , stellen Sie die Seite auf Tabelle:

oTable.fnPageChange(iPage); 

komplette Funktion

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

Ergebnis:http://jsfiddle.net/cmedina/7kfmyw6x/104/