dataTable serverside example

by AnthraxisBR

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 id="reload">reload table</button>
<button class="toggleCols" data-column="0">First Name</button>
<button class="toggleCols" data-column="0">Last Name</button>
<br>
<br>
<table id="example" class="display" width="100%" cellspacing="0">
    <thead>
        <tr>
            <th>Cod</th>
            <th>Nome</th>
            <th>Valor</th>
            <th>Algo</th>
        </tr>
    </thead>
</table>

JavaScript

$(document).ready(function () {

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

  var table = $('#example').DataTable({
    'processing': true,
    'serverSide': true,
    'ajax': {
      type: 'POST',
      'url': url,
      'data': function (d) {
        console.log(d.order);
        return JSON.stringify( d );
      }
    },
                "createdRow": function (row, data, dataIndex) {
                var prevRowspan = $(row).find('td:last').prev('td').prop('rowspan');
        
                    var valor = $(row).find('td:last').prev('td').html();
                    var cellIndex = $(row).index();
                    var nextValor = $(row).next().children().eq(cellIndex).html();
                    console.log(nextValor);
                    if (valor === nextValor)
                    {
                        var newRowspan = parseInt(prevRowspan) + parseInt(1);
                        $(row).find('td:last').prev('td').prop('rowspan', newRowspan);
                    }
                },

  });
  //
  //
  $('#reload').click(function (e) {
    table.ajax.reload();
  });
  //
  $('.toggleCols').click(function (e) {
      e.preventDefault();
      var column = table.column( $(this).attr('data-column') );
       column.visible( ! column.visible() );
  });    
  //    
});