{{ enablePlugins('datatables,prettify') }} {% set title = "Data Tables" %} {% extends "layouts/application.html" %} {% block content %} {% include "shared/page-title.html" %}
Con uses jQuery DataTables. See detailed documentation on http://www.datatables.net/

Base

Name Position Office Start date Salary
Tiger Nixon System Architect Edinburgh 2011/04/25 $320,800
Garrett Winters Accountant Tokyo 2011/07/25 $170,750
Ashton Cox Junior Technical Author San Francisco 2009/01/12 $86,000
Cedric Kelly Senior Javascript Developer Edinburgh 2012/03/29 $433,060
Airi Satou Accountant Tokyo 2008/11/28 $162,700
Brielle Williamson Integration Specialist New York 2012/12/02 $372,000
Herrod Chandler Sales Assistant San Francisco 2012/08/06 $137,500
Rhona Davidson Integration Specialist Tokyo 2010/10/14 $327,900
Colleen Hurst Javascript Developer San Francisco 2009/09/15 $205,500
Sonya Frost Software Engineer Edinburgh 2008/12/13 $103,600
Jena Gaines Office Manager London 2008/12/19 $90,560
Quinn Flynn Support Lead Edinburgh 2013/03/03 $342,000
Charde Marshall Regional Director San Francisco 2008/10/16 $470,600 
<table id="table1" class="display table table-bordered table-striped table-hover">
  <thead>
    <tr>
      <th>Name</th>
      <th>Position</th>
      <th>Office</th>
      <th>Age</th>
      <th>Start date</th>
      <th>Salary</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Tiger Nixon</td>
      <td>System Architect</td>
      <td>Edinburgh</td>
      <td>61</td>
      <td>2011/04/25</td>
      <td>$320,800</td>
    </tr>
    <tr>
      <td>Garrett Winters</td>
      <td>Accountant</td>
      <td>Tokyo</td>
      <td>63</td>
      <td>2011/07/25</td>
      <td>$170,750</td>
    </tr>
    ...
  </tbody>
</table>

<script type="text/javascript" src="assets/dataTables/js/jquery.dataTables.min.js"></script>
<script>
  $('#table1').DataTable({
    "bLengthChange": false,
    "iDisplayLength": 5,
    "filter": false
  });
</script>

With Search

Name Position Office Start date Salary
Tiger Nixon System Architect Edinburgh 2011/04/25 $320,800
Garrett Winters Accountant Tokyo 2011/07/25 $170,750
Ashton Cox Junior Technical Author San Francisco 2009/01/12 $86,000
Cedric Kelly Senior Javascript Developer Edinburgh 2012/03/29 $433,060
Airi Satou Accountant Tokyo 2008/11/28 $162,700
Brielle Williamson Integration Specialist New York 2012/12/02 $372,000
Herrod Chandler Sales Assistant San Francisco 2012/08/06 $137,500
Rhona Davidson Integration Specialist Tokyo 2010/10/14 $327,900
Colleen Hurst Javascript Developer San Francisco 2009/09/15 $205,500
Sonya Frost Software Engineer Edinburgh 2008/12/13 $103,600
Jena Gaines Office Manager London 2008/12/19 $90,560
Quinn Flynn Support Lead Edinburgh 2013/03/03 $342,000
Charde Marshall Regional Director San Francisco 2008/10/16 $470,600 
<table id="table2" class="display table table-bordered table-striped table-hover">
  <thead>
    <tr>
      <th>Name</th>
      <th>Position</th>
      <th>Office</th>
      <th>Age</th>
      <th>Start date</th>
      <th>Salary</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Tiger Nixon</td>
      <td>System Architect</td>
      <td>Edinburgh</td>
      <td>61</td>
      <td>2011/04/25</td>
      <td>$320,800</td>
    </tr>
    <tr>
      <td>Garrett Winters</td>
      <td>Accountant</td>
      <td>Tokyo</td>
      <td>63</td>
      <td>2011/07/25</td>
      <td>$170,750</td>
    </tr>
    ...
  </tbody>
</table>

<script type="text/javascript" src="assets/dataTables/js/jquery.dataTables.min.js"></script>
<script>
  $('#table2').DataTable({
    "iDisplayLength": 5,
    "aLengthMenu": [
      [5, 10, 25, 50, -1],
      [5, 10, 25, 50, "all"]
    ]
  });
</script>

With Vertical Scroll

Name Position Office Start date Salary
Tiger Nixon System Architect Edinburgh 2011/04/25 $320,800
Garrett Winters Accountant Tokyo 2011/07/25 $170,750
Ashton Cox Junior Technical Author San Francisco 2009/01/12 $86,000
Cedric Kelly Senior Javascript Developer Edinburgh 2012/03/29 $433,060
Airi Satou Accountant Tokyo 2008/11/28 $162,700
Brielle Williamson Integration Specialist New York 2012/12/02 $372,000
Herrod Chandler Sales Assistant San Francisco 2012/08/06 $137,500
Rhona Davidson Integration Specialist Tokyo 2010/10/14 $327,900
Colleen Hurst Javascript Developer San Francisco 2009/09/15 $205,500
Sonya Frost Software Engineer Edinburgh 2008/12/13 $103,600
Jena Gaines Office Manager London 2008/12/19 $90,560
Quinn Flynn Support Lead Edinburgh 2013/03/03 $342,000
Charde Marshall Regional Director San Francisco 2008/10/16 $470,600 
<table id="table3" class="display table table-bordered table-striped table-hover">
  <thead>
    <tr>
      <th>Name</th>
      <th>Position</th>
      <th>Office</th>
      <th>Age</th>
      <th>Start date</th>
      <th>Salary</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Tiger Nixon</td>
      <td>System Architect</td>
      <td>Edinburgh</td>
      <td>61</td>
      <td>2011/04/25</td>
      <td>$320,800</td>
    </tr>
    <tr>
      <td>Garrett Winters</td>
      <td>Accountant</td>
      <td>Tokyo</td>
      <td>63</td>
      <td>2011/07/25</td>
      <td>$170,750</td>
    </tr>
    ...
  </tbody>
</table>

<script type="text/javascript" src="assets/dataTables/js/jquery.dataTables.min.js"></script>
<script>
  $('#table3').DataTable({
    "scrollY": "200px",
    "scrollCollapse": true,
    "paging": false
  });
</script>

With Export Options

Name Position Office Start date Salary
Tiger Nixon System Architect Edinburgh 2011/04/25 $320,800
Garrett Winters Accountant Tokyo 2011/07/25 $170,750
Ashton Cox Junior Technical Author San Francisco 2009/01/12 $86,000
Cedric Kelly Senior Javascript Developer Edinburgh 2012/03/29 $433,060
Airi Satou Accountant Tokyo 2008/11/28 $162,700
Brielle Williamson Integration Specialist New York 2012/12/02 $372,000
Herrod Chandler Sales Assistant San Francisco 2012/08/06 $137,500
Rhona Davidson Integration Specialist Tokyo 2010/10/14 $327,900
Colleen Hurst Javascript Developer San Francisco 2009/09/15 $205,500
Sonya Frost Software Engineer Edinburgh 2008/12/13 $103,600
Jena Gaines Office Manager London 2008/12/19 $90,560
Quinn Flynn Support Lead Edinburgh 2013/03/03 $342,000
Charde Marshall Regional Director San Francisco 2008/10/16 $470,600 
<table id="table4" class="display table table-bordered table-striped table-hover">
  <thead>
    <tr>
      <th>Name</th>
      <th>Position</th>
      <th>Office</th>
      <th>Age</th>
      <th>Start date</th>
      <th>Salary</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Tiger Nixon</td>
      <td>System Architect</td>
      <td>Edinburgh</td>
      <td>61</td>
      <td>2011/04/25</td>
      <td>$320,800</td>
    </tr>
    <tr>
      <td>Garrett Winters</td>
      <td>Accountant</td>
      <td>Tokyo</td>
      <td>63</td>
      <td>2011/07/25</td>
      <td>$170,750</td>
    </tr>
    ...
  </tbody>
</table>

<script type="text/javascript" src="assets/dataTables/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="assets/dataTables/extensions/TableTools/js/dataTables.tableTools.min.js"></script>
<script>
  $('#table4').DataTable({
    "iDisplayLength": 5,
    "bLengthChange": false,
    "filter": false,
    "dom": 'Tlfrtip',
    "tableTools": {
      "sSwfPath": "bower_components/datatables-tabletools/swf/copy_csv_xls_pdf.swf"
    }
  });
</script>

Big Data + AJAX

ID First name Last name ZIP / Post code Country 
<table id="table5" class="display table table-bordered table-striped table-hover">
  <thead>
    <tr>
      <th>ID</th>
      <th>First name</th>
      <th>Last name</th>
      <th>ZIP / Post code</th>
      <th>Country</th>
    </tr>
  </thead>
</table>

<script type="text/javascript" src="assets/dataTables/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="assets/dataTables/extensions/Scroller/js/dataTables.scroller.min.js"></script>
<script>
  $('#table5').DataTable({
    "ajax": "assets/_con/dataTables/myData.txt",
    "scrollY": "200px",
    "dom": "frtiS",
    "deferRender": true
  });
</script>
{% endblock %} {% block javascript %} {% endblock %}