Data Table

Create a table with pagination, searching, and the ability to hide or show columns.


Usage

To create the Data Table component, add the datatable class and the data-datatable attribute to a table element. Add the datatable-actionable class to each th element that contains a link or button that triggers the table to resort, and apply the data-datatable-sort attribute to the link or button within that th.

To instatiate the paging function, add the data-datatable-previous and data-datatable-next attributes to the appropriate buttons with your tables selector as the value of the table option in your JSON string. For more complex pagination, add the datatable-pagination class to a wrapping container.

Example

Client # Client Name City State Phone Last Updated Notes
847168 Anthony Manning Masontown KS 1-766-555-7392 09/03/2009 Mattis urna, a posuere lacus odio eleifend dol...
553928 Piers Gray Enders OH 1-696-555-9117 09/27/2012 Mattis urna, a posuere lacus odio eleifend dol...
934465 Jessica Gray Kasilof CT 1-441-555-2710 04/16/2006 Mattis urna, a posuere lacus odio eleifend dol...
123164 Richard Ogden Richwood IN 1-855-555-9344 10/29/2010 Mattis urna, a posuere lacus odio eleifend dol...
186862 Sally Ferguson Riddle TX 1-126-555-8308 10/19/2014 Mattis urna, a posuere lacus odio eleifend dol...
659293 Ruth Kerr Kerrtown LA 1-761-555-2112 11/04/2009 Mattis urna, a posuere lacus odio eleifend dol...
209788 Grace Ferguson Shelter Island AL 1-192-555-6871 09/24/2014 Mattis urna, a posuere lacus odio eleifend dol...
558536 Harry Vance Shelter Island SC 1-886-555-3304 03/30/2010 Mattis urna, a posuere lacus odio eleifend dol...
983756 Christian Carr Media TX 1-188-555-5231 02/17/2015 Mattis urna, a posuere lacus odio eleifend dol...
877978 Christian Edmunds Richwood AK 1-767-555-8900 07/21/2013 Mattis urna, a posuere lacus odio eleifend dol...
491683 Piers McDonald Princeton Meadows WA 1-269-555-6852 02/24/2006 Mattis urna, a posuere lacus odio eleifend dol...
899467 James Edmunds Bosworth MA 1-179-555-8305 07/29/2006 Mattis urna, a posuere lacus odio eleifend dol...
324328 Connor Bower Media AL 1-511-555-1490 02/07/2012 Mattis urna, a posuere lacus odio eleifend dol...
488324 Amanda Allan Palos Hills IN 1-507-555-8217 06/10/2011 Mattis urna, a posuere lacus odio eleifend dol...
666433 Anthony Edmunds Mountain Lodge Park IL 1-419-555-3451 02/04/2015 Mattis urna, a posuere lacus odio eleifend dol...
832817 Isaac Coleman Bosworth ND 1-613-555-2492 09/20/2005 Mattis urna, a posuere lacus odio eleifend dol...
126420 Harry Mitchell Burgoon NM 1-403-555-1415 08/10/2011 Mattis urna, a posuere lacus odio eleifend dol...
311296 Grace Peake Rehoboth Beach DC 1-711-555-9707 11/10/2012 Mattis urna, a posuere lacus odio eleifend dol...
903405 Liam Parsons Savannah KY 1-609-555-6005 05/20/2010 Mattis urna, a posuere lacus odio eleifend dol...
924651 Abigail McDonald Palos Hills WY 1-336-555-9251 11/09/2012 Mattis urna, a posuere lacus odio eleifend dol...
508266 Jessica Pullman Red Feather Lakes NC 1-483-555-3228 05/31/2010 Mattis urna, a posuere lacus odio eleifend dol...
911315 Kylie Carr Media WY 1-171-555-7328 03/18/2010 Mattis urna, a posuere lacus odio eleifend dol...
116310 Simon Jackson Princeton Meadows NC 1-397-555-6520 02/23/2013 Mattis urna, a posuere lacus odio eleifend dol...
362241 Matt Lee Jenner OK 1-185-555-2285 05/06/2010 Mattis urna, a posuere lacus odio eleifend dol...
322551 Jessica Vance Media MI 1-456-555-2216 07/21/2011 Mattis urna, a posuere lacus odio eleifend dol...
371435 Jessica Bower Burgoon NJ 1-326-555-9698 11/18/2006 Mattis urna, a posuere lacus odio eleifend dol...
106541 Thomas Lee Savannah TN 1-368-555-2648 10/10/2012 Mattis urna, a posuere lacus odio eleifend dol...
563175 Kevin Cornish Orme NH 1-423-555-9107 01/25/2006 Mattis urna, a posuere lacus odio eleifend dol...
638130 Piers McDonald Kerrtown NH 1-385-555-1500 04/07/2008 Mattis urna, a posuere lacus odio eleifend dol...
118015 Steven Coleman Rehoboth Beach MO 1-588-555-7940 03/02/2012 Mattis urna, a posuere lacus odio eleifend dol...
271786 Matt Scott Winder KY 1-760-555-8258 02/24/2012 Mattis urna, a posuere lacus odio eleifend dol...
231831 Simon Young Snyderville CO 1-647-555-7027 06/02/2008 Mattis urna, a posuere lacus odio eleifend dol...
669351 Connor Jackson Rehoboth Beach RI 1-489-555-2311 06/28/2007 Mattis urna, a posuere lacus odio eleifend dol...
626748 Maria Manning Snyderville OR 1-713-555-7200 06/10/2014 Mattis urna, a posuere lacus odio eleifend dol...
653451 Nathan McDonald Lake Havasu City RI 1-204-555-3866 06/28/2011 Mattis urna, a posuere lacus odio eleifend dol...
544780 Isaac Bower Chicopee UT 1-527-555-4111 12/01/2012 Mattis urna, a posuere lacus odio eleifend dol...
784692 Alan Knox Mountain Lodge Park AK 1-840-555-1074 11/04/2010 Mattis urna, a posuere lacus odio eleifend dol...
753494 Gordon Abraham Jenner UT 1-796-555-5291 11/24/2008 Mattis urna, a posuere lacus odio eleifend dol...
474446 Christopher Hamilton Shelter Island CO 1-562-555-9646 09/09/2010 Mattis urna, a posuere lacus odio eleifend dol...
512542 Alan Allan Kerrtown DC 1-306-555-4071 05/15/2014 Mattis urna, a posuere lacus odio eleifend dol...
961306 Piers Butler Biwabik OR 1-245-555-6888 09/12/2014 Mattis urna, a posuere lacus odio eleifend dol...
872171 Simon Hamilton Rockford NC 1-580-555-1400 11/16/2006 Mattis urna, a posuere lacus odio eleifend dol...
141356 Sally Knox Savannah FL 1-399-555-8294 12/27/2012 Mattis urna, a posuere lacus odio eleifend dol...
924404 Donna Cornish Ilchester UT 1-747-555-6305 08/12/2007 Mattis urna, a posuere lacus odio eleifend dol...
788039 Brandon Kelly Maunaloa NM 1-196-555-2157 03/16/2009 Mattis urna, a posuere lacus odio eleifend dol...
270729 Luke Lee Snyderville OR 1-148-555-8236 04/15/2008 Mattis urna, a posuere lacus odio eleifend dol...
302202 Christopher Jackson Ilchester GA 1-477-555-1861 05/01/2011 Mattis urna, a posuere lacus odio eleifend dol...
368179 Blake Scott Berne CO 1-661-555-2090 08/02/2013 Mattis urna, a posuere lacus odio eleifend dol...
289141 Isaac Gibson Kasota AL 1-877-555-1968 05/30/2006 Mattis urna, a posuere lacus odio eleifend dol...
676789 Liam Carr Kasilof OK 1-521-555-2385 09/25/2005 Mattis urna, a posuere lacus odio eleifend dol...
324703 Sally Bower Morris IN 1-530-555-1022 01/09/2014 Mattis urna, a posuere lacus odio eleifend dol...
613638 Megan Ellison Savannah MN 1-605-555-1022 01/27/2012 Mattis urna, a posuere lacus odio eleifend dol...
1.0.31 Richard Jackson Riddle GA 1-830-555-2586 12/28/2008 Mattis urna, a posuere lacus odio eleifend dol...
728316 Liam Scott San Juan Bautista WV 1-135-555-9579 04/05/2015 Mattis urna, a posuere lacus odio eleifend dol...
753319 Maria Mitchell Boykin AZ 1-883-555-9820 11/06/2009 Mattis urna, a posuere lacus odio eleifend dol...
929772 Isaac Parsons Varnamtown AZ 1-394-555-3726 02/28/2014 Mattis urna, a posuere lacus odio eleifend dol...
649118 Neil Quinn Ilchester IL 1-417-555-5191 10/24/2012 Mattis urna, a posuere lacus odio eleifend dol...
473339 James Lyman Dumas UT 1-753-555-1864 12/12/2005 Mattis urna, a posuere lacus odio eleifend dol...

Markup

<table class="datatable" id="table1" data-datatable>
	<thead>
		<!-- For column sorting -->
		<tr class="text-nowrap">
			<th>Table Heading <a href="#" class="datatable-sort"></a></th>
			<th>Table Heading <a href="#" class="datatable-sort"></a></th>
			<th>Table Heading <a href="#" class="datatable-sort"></a></th>
		</tr>
	</thead>
	<tbody>
		...
	</tbody>
</table>

<!-- To display table/page info -->
<div data-datatable-info></div>

<!-- Previous page button -->
<a href="#" data-datatable-previous="{table:'#table1'}">Previous</a>

<!-- Pagination -->
<div class="datatable-pagination"></div>

<!-- Next page button -->
<a href="#" data-datatable-next="{table:'#table1'}">Next</a>

JavaScript

Options

Option Possible value Default Description
paginationWrapper selector (string) '.datatable-pagination' Selector to identify the pagination wrapper element
perPage int 10 Number of rows to display per page
infoWrapper selector (string) '.datatable-info' Selector to identify the table information display wrapper
infoString string 'Showing items #{start} through #{end} of #{length}' Template to display the table's information. Possible replace-values are:
  • #{current}: Indicates the current page
  • #{start}: Index of the first row of the current page
  • #{end}: Index of the last of the current page
  • #{length}: Total number of rows
sortColumn int 0 The column to initially sort data by
sortOrder string 'asc' The initial sort order. Can be 'asc' to sort in ascending order, or 'desc' to sort in descending order.

Initialization

Data Attribute

<table class="datatable" data-datatable="{<!-- Options... -->}">...</table>

Clique.UI API

var datatable = Clique.datatable('.my-datatable', {
    // Options...
});

jQuery API

var datatable = $('.my-datatable').clique('datatable', {
    // Options...
});

Events

Name Parameters Description
showpage.datatable.clique event, pageIndex The bound event listener to show a page at a given index.
didshowpage.datatable.clique event, currentPage, startingIndex, endingIndex, tableLength Triggered after a new page has been displayed
next.datatable.clique event, active, toggle, content Bound event listener to trigger the method to show the next page
previous.datatable.clique event, active, toggle, content Bound event listener to trigger the method to show the previous page
sort.datatable.clique event, columnIndex, sortOrder Bound event listener to sort the table rows by columnIndex and sortOrder