DataTables

DataTables Examples

by tuantm10

HTML

<link rel="stylesheet" href="http://cdn.datatables.net/1.10.5/css/jquery.dataTables.css">
<script src="http://cdn.datatables.net/1.10.5/js/jquery.dataTables.js"></script>
<script src="http://www.bacubacu.com/colresizable/js/colResizable-1.5.min.js"></script>
<table id="example">
  <thead>
    <tr>
      <th>Rendering engine</th>
      <th>Browser</th>
      <th>Platform(s)</th>
      <th>Engine version</th>
      <th>CSS grade</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Trident</td>
      <td>Internet Explorer 4.0</td>
      <td>Win 95+</td>
      <td> 4</td>
      <td>X</td>
    </tr>
    <tr>
      <td>Trident</td>
      <td>Internet Explorer 5.0</td>
      <td>Win 95+</td>
      <td>5</td>
      <td>C</td>
    </tr>
    <tr>
      <td>Trident</td>
      <td>Internet Explorer 5.5</td>
      <td>Win 95+</td>
      <td>5.5</td>
      <td>A</td>
    </tr>
    <tr>
      <td>Trident</td>
      <td>Internet Explorer 6</td>
      <td>Win 98+</td>
      <td>6</td>
      <td>A</td>
    </tr>
    <tr>
      <td>Trident</td>
      <td>Internet Explorer 7</td>
      <td>Win XP SP2+</td>
      <td>7</td>
      <td>A</td>
    </tr>
    <tr>
      <td>Trident</td>
      <td>AOL browser (AOL desktop)</td>
      <td>Win XP</td>
      <td>6</td>
      <td>A</td>
    </tr>
    <tr>
      <td>Gecko</td>
      <td>Firefox 1.0</td>
      <td>Win 98+ / OSX.2+</td>
      <td>1.7</td>
      <td>A</td>
    </tr>
    <tr>
      <td>Gecko</td>
      <td>Firefox 1.5</td>
      <td>Win 98+ / OSX.2+</td>
      <td>1.8</td>
      <td>A</td>
    </tr>
    <tr>
      <td>Gecko</td>
      <td>Firefox 2.0</td>
      <td>Win 98+ / OSX.2+</td>
      <td>1.8</td>
      <td>A</td>
    </tr>
    <tr>
      <td>Gecko</td>
      <td>Firefox 3.0</td>
      <td>Win 2k+ / OSX.3+</td>
      <td>1.9</td>
      <td>A</td>
    </tr>
    <tr>
      <td>Gecko</td>
      <td>Camino 1.0</td>
      <td>OSX.2+</td>
      <td>1.8</td>
      <td>A</td>
    </tr>
    <tr>
      <td>Gecko</td>
     ...

JavaScript

var init;

$('#example').DataTable({
  customProp: 'Hello World',
  scrollX: true,
  initComplete: function(settings) {
    $('#example').colResizable({
      liveDrag: true
    });
  }
});