Data Tables

Con uses jQuery DataTables. See detailed documentation on http://www.datatables.net/

Base

NamePositionOfficeStart dateSalary
Tiger NixonSystem ArchitectEdinburgh2011/04/25$320,800
Garrett WintersAccountantTokyo2011/07/25$170,750
Ashton CoxJunior Technical AuthorSan Francisco2009/01/12$86,000
Cedric KellySenior Javascript DeveloperEdinburgh2012/03/29$433,060
Airi SatouAccountantTokyo2008/11/28$162,700
Brielle WilliamsonIntegration SpecialistNew York2012/12/02$372,000
Herrod ChandlerSales AssistantSan Francisco2012/08/06$137,500
Rhona DavidsonIntegration SpecialistTokyo2010/10/14$327,900
Colleen HurstJavascript DeveloperSan Francisco2009/09/15$205,500
Sonya FrostSoftware EngineerEdinburgh2008/12/13$103,600
Jena GainesOffice ManagerLondon2008/12/19$90,560
Quinn FlynnSupport LeadEdinburgh2013/03/03$342,000
Charde MarshallRegional DirectorSan Francisco2008/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

NamePositionOfficeStart dateSalary
Tiger NixonSystem ArchitectEdinburgh2011/04/25$320,800
Garrett WintersAccountantTokyo2011/07/25$170,750
Ashton CoxJunior Technical AuthorSan Francisco2009/01/12$86,000
Cedric KellySenior Javascript DeveloperEdinburgh2012/03/29$433,060
Airi SatouAccountantTokyo2008/11/28$162,700
Brielle WilliamsonIntegration SpecialistNew York2012/12/02$372,000
Herrod ChandlerSales AssistantSan Francisco2012/08/06$137,500
Rhona DavidsonIntegration SpecialistTokyo2010/10/14$327,900
Colleen HurstJavascript DeveloperSan Francisco2009/09/15$205,500
Sonya FrostSoftware EngineerEdinburgh2008/12/13$103,600
Jena GainesOffice ManagerLondon2008/12/19$90,560
Quinn FlynnSupport LeadEdinburgh2013/03/03$342,000
Charde MarshallRegional DirectorSan Francisco2008/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

NamePositionOfficeStart dateSalary
Tiger NixonSystem ArchitectEdinburgh2011/04/25$320,800
Garrett WintersAccountantTokyo2011/07/25$170,750
Ashton CoxJunior Technical AuthorSan Francisco2009/01/12$86,000
Cedric KellySenior Javascript DeveloperEdinburgh2012/03/29$433,060
Airi SatouAccountantTokyo2008/11/28$162,700
Brielle WilliamsonIntegration SpecialistNew York2012/12/02$372,000
Herrod ChandlerSales AssistantSan Francisco2012/08/06$137,500
Rhona DavidsonIntegration SpecialistTokyo2010/10/14$327,900
Colleen HurstJavascript DeveloperSan Francisco2009/09/15$205,500
Sonya FrostSoftware EngineerEdinburgh2008/12/13$103,600
Jena GainesOffice ManagerLondon2008/12/19$90,560
Quinn FlynnSupport LeadEdinburgh2013/03/03$342,000
Charde MarshallRegional DirectorSan Francisco2008/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

NamePositionOfficeStart dateSalary
Tiger NixonSystem ArchitectEdinburgh2011/04/25$320,800
Garrett WintersAccountantTokyo2011/07/25$170,750
Ashton CoxJunior Technical AuthorSan Francisco2009/01/12$86,000
Cedric KellySenior Javascript DeveloperEdinburgh2012/03/29$433,060
Airi SatouAccountantTokyo2008/11/28$162,700
Brielle WilliamsonIntegration SpecialistNew York2012/12/02$372,000
Herrod ChandlerSales AssistantSan Francisco2012/08/06$137,500
Rhona DavidsonIntegration SpecialistTokyo2010/10/14$327,900
Colleen HurstJavascript DeveloperSan Francisco2009/09/15$205,500
Sonya FrostSoftware EngineerEdinburgh2008/12/13$103,600
Jena GainesOffice ManagerLondon2008/12/19$90,560
Quinn FlynnSupport LeadEdinburgh2013/03/03$342,000
Charde MarshallRegional DirectorSan Francisco2008/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

IDFirst nameLast nameZIP / Post codeCountry
<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>

Users

Felecia Castro
Felecia Castro
Content Manager
Max Brooks
Max Brooks
Programmer
Patsy Griffin
Patsy Griffin
Support
Vernon Garrett
Vernon Garrett
Photographer

Articles

MD
Material Design
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi consequatur debitis veritatis dolorum, enim libero!
Admin Dashboard
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi consequatur debitis veritatis dolorum, enim libero!
RD
Responsive Design
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi consequatur debitis veritatis dolorum, enim libero!
Mobile First
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi consequatur debitis veritatis dolorum, enim libero!

Posts

No results were found ;(
Chat
Online
Felecia Castro
Felecia Castro
Lorem status
Max Brooks
Max Brooks
Lorem status
Patsy Griffin
Patsy Griffin
Lorem status
Chloe Morgan
Chloe Morgan
Lorem status
Vernon Garrett
Vernon Garrett
Lorem status
Greg Mcdonalid
Greg Mcdonalid
Lorem status
Christian Jackson
Christian Jackson
Lorem status
Offline
Willie Kelly
Willie Kelly
Lorem status
Jenny Phillips
Jenny Phillips
Lorem status
Darren Cunningham
Darren Cunningham
Lorem status
Sandra Cole
Sandra Cole
Lorem status
Back
Monday, Feb 23, 8:23 pm
Hi, Felicia.
How are you?
John Doe Hi! I am good!
Glad to see you :)
This long text is intended to show how the chat will display it.
John Doe Also, we will send the longest word to show how it will fit in the chat window: Pneumonoultramicroscopicsilicovolcanoconiosis
Friday, Mar 10, 5:07 pm
Hi again!
John Doe Hi! Glad to see you.
I want to add you in my Facebook.
Can you give me your page?
John Doe I do not use Facebook. But you can follow me in Twitter.
It's good idea!
John Doe You can find me here - https://twitter.com/nkdevv