dataTable serverside example

columns hide dynamically

by Ganesh

HTML

<link rel="stylesheet" href="http://cdn.datatables.net/1.10.4/css/jquery.dataTables.css">
<script src="http://cdn.datatables.net/1.10.4/js/jquery.dataTables.min.js"></script>
<button class="toggleCols" data-column="0" id="firstName" style="display:none;">First Name</button>
<button class="toggleCols" data-column="1" id="secondName" style="display:none;">Last Name</button>
<br>
<br>

<h3>
Save View - Table Grid
</h3>

<input type="hidden" name="visibleIds" id="visibleIds" value="#firstName,#secondName">
<table id="example" class="display" width="100%" cellspacing="0">
    <thead>
        <tr>
            <th class="testth" id='firstName'>First name</th>
            <th id='secondName' class="testth">Last name</th>
            <th class="testth">Position</th>
            <th class="testth">Office</th>
            <th class="testth">Start date</th>
            <th class="testth">Salary</th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <th>First name</th>
            <th>Last name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Start date</th>
            <th>Salary</th>
        </tr>
    </tfoot>
</table>

JavaScript

$(document).ready(function () {

  var url = 'http://www.json-generator.com/api/json/get/cbEfqLwFaq?indent=2';

  var table = $('#example').DataTable({
    'processing': true,
    'serverSide': true,
    "pageLength": 5,
                       "paging" : true,
                    "sDom" : 'Rlfrtlip',
                    "lengthMenu": [ [5,10, 20, 30, -1], [5,10, 20,30, "All"] ],

    'ajax': {
      type: 'POST',
      'url': url,
      'data': function (d) {
        console.log(d.order);
        return JSON.stringify( d );
      }
    }

  });
  //
  //
  var visibleIds=$("#visibleIds").val();
  table.columns(['.testth']).visible(false);
  table.columns([visibleIds]).visible(true);
  //
  $('.toggleCols').click(function (e) {
      e.preventDefault();
      var column = table.column( $(this).attr('data-column') );
       column.visible( ! column.visible() );
  });    
  //    
    //$("#firstName,#secondName").click();

    //$("#secondName").click();
 $('#example').on( 'page.dt', function () {
 alert(visibleIds);
 table.columns(['.testth']).visible(false);
               table.columns([visibleIds]).visible(true );
              });

 
 
});