Tables

Yes, this page may have taken a little bit to load. It has 6+ fairly complicated data tables on it for examples. Don't put 6 fairly complicated datatables on one page and you should be fine :)

	Link	Text	Date	Checkbox
Select row	Hernandez, Pete	Carter	22 Jul 1939	Select	Delete
Select row	Lewis, Darren	Griffin	06 Jan 1970	Select	Delete
Select row	Sanders, Dallin	Lee	08 Jan 1957	Select	Delete
Select row	Collins, Spencer	Edwards	09 Dec 1714	Select	Delete
Select row	Anderson, Clifton	Gonzalez	27 Jun 1794	Select	Delete

	Link	Text	Date	Checkbox
Select row	Baker, Pete	Bryant	12 Apr 1853	Select	Delete
Select row	Hill, Alfonzo	Wood	04 Apr 1913	Select	Delete
Select row	Smith, Darren	King	09 Oct 1983	Select	Delete
Select row	Roberts, Alfonzo	Washington	18 Nov 1982	Select	Delete
Select row	Wilson, Clifton	Bell	11 Dec 1705	Select	Delete

	Link	Text	Date	Checkbox
Select row	Sanchez, Peter	White	13 Dec 1969	Select	Delete
Select row	Jenkins, Pete	Mitchell	23 Apr 1797	Select	Delete
Select row	Butler, Rob	Nelson	07 Jan 1752	Select	Delete
Select row	James, Alfonzo	Bennett	29 Mar 1801	Select	Delete
Select row	Long, Rick	Nelson	28 Jun 1987	Select	Delete

	Link	Text	Date	Checkbox
Select row	Edwards, Daniel	Lee	22 May 1892	Select	Delete
Select row	Robinson, Matthew	Jones	10 Nov 1866	Select	Delete
Select row	Thompson, Clifton	Watson	18 Apr 1716	Select	Delete
Select row	Carter, Spencer	Jones	18 Aug 1957	Select	Delete
Select row	Long, Spencer	Patterson	12 Apr 1862	Select	Delete
Select row	Morris, Spencer	Washington	22 Dec 1940	Select	Delete
Select row	Griffin, Rick	Brown	29 Jun 1869	Select	Delete
Select row	Roberts, Rick	Johnson	12 Mar 1777	Select	Delete
Select row	Evans, Peter	Butler	22 Apr 1945	Select	Delete
Select row	Powell, Matthew	Ramirez	11 Apr 1898	Select	Delete

	Link	Text	Date	Checkbox
Select row	Hughes, Alfonzo	Perry	21 Nov 1903	Select	Delete
Select row	Lopez, Pete	Coleman	15 Aug 1956	Select	Delete
Select row	Jones, Clifton	Bell	21 Mar 1892	Select	Delete
Select row	Williams, Thomas	Barnes	18 May 1702	Select	Delete
Select row	Morris, Thomas	Cooper	29 Mar 1789	Select	Delete
Select row	Jenkins, Pete	Hernandez	16 Nov 1966	Select	Delete
Select row	Howard, Rick	Patterson	01 Jan 1973	Select	Delete
Select row	Clark, Dallin	Nelson	11 Mar 2012	Select	Delete
Select row	Cook, Rob	Garcia	06 Aug 1964	Select	Delete
Select row	Cook, Clifton	Torres	16 Oct 1951	Select	Delete
Select row	Howard, Daniel	James	29 Oct 1920	Select	Delete
Select row	Mitchell, Rob	Cook	08 May 1823	Select	Delete
Select row	James, Todd	Diaz	19 Oct 1752	Select	Delete
Select row	Thomas, Dallin	Cooper	27 Nov 1757	Select	Delete
Select row	Cooper, Aaron	Patterson	09 Nov 1953	Select	Delete

	Link	Text	Date	Checkbox
Select row	Johnson, Todd	Scott	17 Mar 1797	Select	Delete
Select row	Morris, Todd	Rogers	13 Oct 1829	Select	Delete
Select row	Jenkins, Peter	Ward	27 Jun 1906	Select	Delete
Select row	Walker, Rob	Torres	14 Feb 1804	Select	Delete
Select row	Edwards, Todd	Turner	22 Jan 1746	Select	Delete
Select row	Lee, Alfonzo	Washington	24 Mar 1852	Select	Delete
Select row	Wilson, Rob	Powell	15 Mar 1759	Select	Delete
Select row	Morris, Darren	Jackson	15 Jul 1957	Select	Delete
Select row	Ramirez, Robert	Coleman	06 Oct 1925	Select	Delete
Select row	Harris, Matthew	Adams	15 Jul 1749	Select	Delete
Select row	Johnson, Pete	Garcia	22 Apr 1883	Select	Delete
Select row	Johnson, Alfonzo	Jackson	28 Oct 1760	Select	Delete
Select row	Richardson, Darren	Simmons	01 Sep 1885	Select	Delete
Select row	Watson, Aaron	Scott	20 Aug 1991	Select	Delete
Select row	Sanchez, Thomas	Alexander	26 Dec 1734	Select	Delete
Select row	Lewis, Spencer	Parker	14 Jun 1920	Select	Delete
Select row	King, Matthew	Bailey	10 Feb 1995	Select	Delete
Select row	Smith, Spencer	Sanders	24 Apr 1887	Select	Delete
Select row	Rogers, Dallin	Gonzalez	03 Jul 1940	Select	Delete
Select row	Wood, Clifton	Lewis	13 Jun 1698	Select	Delete
Select row	King, Peter	Sanchez	23 Dec 1708	Select	Delete
Select row	Carter, Spencer	Roberts	14 Nov 1993	Select	Delete
Select row	Watson, Clifton	Ward	13 Oct 1811	Select	Delete
Select row	Watson, Todd	Thomas	28 Mar 1873	Select	Delete
Select row	Sanchez, Darren	Martinez	06 Jun 1871	Select	Delete
Select row	Perez, Peter	Rivera	30 Sep 1761	Select	Delete
Select row	Bailey, Robert	Roberts	07 Apr 1954	Select	Delete
Select row	Gonzalez, Thomas	Ward	23 Jul 1896	Select	Delete
Select row	Watson, Thomas	Morris	21 Aug 1745	Select	Delete
Select row	Martin, Rob	Martin	12 Sep 1839	Select	Delete
Select row	Bailey, Dallin	Rogers	16 Jan 1796	Select	Delete
Select row	Diaz, Wade	Adams	02 Nov 1744	Select	Delete
Select row	Harris, Clifton	Barnes	14 Sep 1919	Select	Delete
Select row	Russell, Darren	Ross	15 Nov 1773	Select	Delete
Select row	Thompson, Todd	Young	19 Feb 1789	Select	Delete
Select row	Jackson, Daniel	Ross	09 Jul 1974	Select	Delete
Select row	Scott, Daniel	Butler	02 Jun 1804	Select	Delete
Select row	Bailey, Daniel	Long	04 Jan 1871	Select	Delete
Select row	Ramirez, Rob	Richardson	15 Dec 1804	Select	Delete
Select row	Simmons, Spencer	Bailey	29 Sep 1992	Select	Delete
Select row	Adams, Daniel	Carter	16 Feb 1835	Select	Delete
Select row	Taylor, Dallin	Mitchell	14 Jul 2003	Select	Delete
Select row	Morris, Wade	Washington	08 Sep 1981	Select	Delete
Select row	Cook, Aaron	Alexander	21 Nov 1706	Select	Delete
Select row	Mitchell, Rob	Davis	22 May 1825	Select	Delete
Select row	James, Darren	Jones	05 Jul 1803	Select	Delete
Select row	Taylor, Peter	Rogers	25 Apr 1922	Select	Delete
Select row	Taylor, Matthew	Jones	15 Mar 1863	Select	Delete
Select row	Miller, Aaron	Ramirez	28 Apr 1872	Select	Delete
Select row	Barnes, Thomas	Parker	17 Dec 1718	Select	Delete

Takes an existing <table> and adds functionality for searching and sorting the data. If the data is too large for an inline table, you can also have get data via Ajax.

There are two aspects to datatables. The style, and the functionality. You get the style of the table by adding a class of ixf-table to the <table> element. You get the basic functionality by adding a class of ixf-table-default.

The structure of any table within the IxF should follow correct semantics. Use <thead> with <th> elements inside it, as well as a <tbody> element for the content.

Functionality

This uses the DataTables plugin. You can read up on the full documentation at the DataTables plugin homepage. While certain aspects of the plugin are exposed via the IxF API below, the full plugin is still included and so you can skip adding the ixf-table-default class and call the plugin yourself to get the full functionality.

If you want to use a "more" link, then give it an ID that is the same as the table plus "-more". So if the table's ID is "details", give the more link an ID of "details-more". The IxF will then make the more link work.

Same concept for the "Showing X of Y Results" text. Give the wrapper of the full string an ID that is "tableID-info". Then wrap the numbers in "dt-showing" and "dt-results" classed elements. This allows the words text (showing, of, results) and order to be controlled by the server for other languages.

Again same concept for a single input filter to be used for filtering the whole table. Use an ID of "tableID-filter" on the input element. This allows you to place it where you want and style it accordingly.

The script will look to see if there is a second TR in the THEAD that has TD's in it (as opposed to the TH's you should use for the column headers). The script will see this additional row as a filter row and automatically set up the inputs contained in each TD to be the filter for that column. If there is a select dropdown it will set that up appropriately as well.

Where's My Pagination?

99% of the time, we are hoping it is gone. The IxF uses the DataTables plugin that brings us many great features such as filtering. We believe that filtering is the new pagination. A powerful search/filter should easily replace the best paginations system. DataTables allows us to instantly filter down the tables list to find just what you are looking for. It can use one field to search all columns as in this example, or one field per column for more specific searches.

This filter works both with content in the table on the page, or by sending a request back to the server for when searching huge data sets. You can default to showing whatever number of rows you want (10, 20, etc). We provide a "more" button for if you want to show more at a time. You can see an example of this on the west pane of this page.

Large Amounts of Data

When you have large amounts of data (2-300+ rows) you may want to consider moving to an ajax solution. The datatables plugin supports requesting data from the server and still supports the filtering and sorting as well. It provides the server the data it needs (although maybe not in a way you would expect), and expects the data to come back in a specific JSON format.

For details on how to implement the server side version please see the plugin documentation.

Fixed Table Headers

Gone are the scrolling tables of the past. Now we have new functionality that just fixes the table header when you get to the top of the screen. When the table content needs to go off the screen, the table header goes with it. Just add a class of "ixf-fixed" to your table element and the ixf takes care of the rest.

You can set a limited number of the plugins options via data- attributes as listed below. If you need functionality beyond what these provide, do not use the ixf-table-default method for initialization and configure the plugin yourself for each instance you need. All IxF API options are optional for basic functionality (column sorting, more button, global filter). They will go on either the table or th elements as defined in the description. Usage would be along the lines of:
<th data-dt-sort-type="date">

The following data- attributes can be used to quickly setup timepicker fields.

Name	Type	Default	Description
data-dt-rows	number	1000	(table) This will limit the displayed rows
data-dt-rows-more	number	10	(table) How many rows that will be added when you click more (defaults to dt-rows value or 10 if not set)
data-dt-sort	string		(th) The column with this assigned will be sorted by default, in the direction you identify. Or if "no", will not be sortable.
data-dt-hide	boolean	false	(th) Hide the column. Must be done via script, not a simple display:none
data-dt-ajax-url	string		(table) URL of where data for the table should be requested. Data is sent to the server and required to be returned in a very specific format
data-dt-sort-type	string		(th) For specifying a sort type if the auto sort type detection isn't working as desired. Or for referencing a custom sort type
data-dt-show-filter	boolean		(table) Should the script provide the one column filter, to be placed directly before the table
data-dt-ajax-post	boolean	false	(table) If you need the ajax to be sent via POST, this will do it
data-dt-options	string		(table) You can pass any additional options you want to set custom for a table via this. Must be formated with single quotes wrapping the value and double quotes used inside (ex: dt-options='{"iDisplayRow":"15"}')
data-dt-id-col	boolean	false	(th) should go on a single column that you want to be used for row IDs (for use with masterDetail). The column will automatically be hidden and any content within the TDs will be used as the row ID
data-dt-id-prefix	string		(th) prefix that should be placed before the value of a given row's ID. You can provide the prefix as part of the TD string if you prefer. Regardless, there must be a prefix as IDs can not be just numbers.

Options Column = The script only recognizes these values

Tables

Default Styling

Default Functionality

Column Sorting

Column Filtering

Limiting displayed rows

Populate via Ajax

Fixed Header

Functionality

Where's My Pagination?

Large Amounts of Data

Fixed Table Headers