@@include('./parts/head.html', { "plugin_fa_icons": true, "plugin_mdi_icons": true, "plugin_ion_icons": true, "plugin_wi_icons": true, "plugin_rickshaw": false, "plugin_nvd3": false, "plugin_flot": false, "plugin_sparkline": false, "plugin_markitup": false, "plugin_ckeditor": false, "plugin_select2": false, "plugin_dropzone": false, "plugin_tagsinput": false, "plugin_clockpicker": false, "plugin_pikaday": false, "plugin_spectrum": false, "plugin_inputmask": false, "plugin_parsley": false, "plugin_gmaps": false, "plugin_jvectormap": false, "plugin_datatables": true, "plugin_fullcalendar": false, "plugin_simpleweather": false, "plugin_prettify": true }) @@include('./parts/top-navbar.html') @@include('./parts/sidebar.html', { "page": "ui-datatables", "classes": "yay-shrink yay-hide-to-small yay-gestures" })
@@include('./parts/title.html', { "title": "Data Tables", "crumbs": "
  • Dashboard
  • Tables
  • Data Tables
    • " })
    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": "assets/dataTables/extensions/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/dataTables/myData.txt",
    "scrollY": "200px",
    "dom": "frtiS",
    "deferRender": true
  });
</script>
    @@include('./parts/search-bar.html') @@include('./parts/chat.html') @@include('./parts/foot.html', { "copyright": true })