jQuery Datatables responsive example

by ryadav

HTML

<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<link rel="stylesheet" href="//cdn.datatables.net/1.10.1/css/jquery.dataTables.css">
<script src="//cdn.datatables.net/1.10.1/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="//cdn.datatables.net/responsive/1.0.0/css/dataTables.responsive.css">
<script src="//cdn.datatables.net/responsive/1.0.0/js/dataTables.responsive.js"></script>
<table id="tblReport1" border="0">
  <thead></thead>
  <tbody></tbody>
</table>

JavaScript

$(document).ready(function() {

  var dd = [{
    "name": "Tiger Nixon",
    "position": "System Architect",
    "salary": "$3,120",
    "start_date": "2011/04/25",
    "office": "Edinburgh",
    "extn": 5421
  }];
  var table11 = $('#tblReport1').dataTable({
    "data": dd,
    "columns": [{
        "data": "name"
      },
      {
        "data": "position"
      },
      {
        "data": "salary"
      },
      {
        "data": "start_date"
      },
      {
        "data": "office"
      },
      {
        "data": "extn"
      }
    ]
  });
  alert(table11.page.info());
});