隐藏列时，DataTable重新加载到第一页

Question

I am using the jquery dataTable plug-in and I am trying to allow users to hide a column.

The code is working, but when I go to a page that is not the first page, and I hide a column, It goes back to the first page with the column hidden.

What I would like is that it stays on the page that the user is on and hides the column.

    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

Your function to show and hide column, should return the current page:

First, get the number of current page:

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

Second, set the page to table:

oTable.fnPageChange(iPage);

Complete Function

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

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