jQuery.fancyTable

A jQuery plugin for making html tables searchable and sortable with pagination.

Live demo

See a live demo on CodePen

Installation

Using npm

npm install jquery.fancytable --save

Using CDN

<script src="https://cdn.jsdelivr.net/npm/jquery.fancytable/dist/fancyTable.min.js"></script>

Or manually by including the script after the jQuery library

<script src="/path/to/fancyTable.min.js"></script>

Usage

<script type="text/javascript">
	$(document).ready(function() {
		$(".sampleTable").fancyTable({
			sortColumn:0,
			pagination: true,
			perPage:10,
			globalSearch:true
		});		
	});
</script>

Options

exactMatch - Use exact match. If set to true, search will not match substrings such as "cat" in "catastrophic". If set to "auto", search will be exact if the search term is enclosed in quotation marks.

exactMatch: true

Default: false

globalSearch - Use global search for all columns

globalSearch: false

Default: false

globalSearchExcludeColumns - Defines a number of columns to exclude from the global search.

globalSearchExcludeColumns: [2,5] // Exclude 2nd and 5th column.

Default: undefined

inputPlaceholder - Placeholder to use for <input>

inputPlaceholder: 'Sök...'

Default: 'Search...'

inputStyle - Style attributes to use for <input>

inputStyle: 'color:black;'

Default: ''

localeCompare - Use localeCompare when sorting

localeCompare: true

Default: false

matchCase - Use case sensitive search

matchCase: true

Default: false

onInit - Function called after initialization

onInit:function(){
	console.log({ element:this });
}

onUpdate - Function called after each update (sort and search)

onUpdate:function(){
	console.log({ element:this });
}

beforeUpdate - Function called before each update (sort and search)

beforeUpdate:function(){
	console.log({ element:this });
}

pagination - Use pagination or not

pagination: true

Default: false

paginationClass - CSS class to use for pagination buttons

pagination: 'btn btn-primary'

Default: 'btn btn-light'

paginationClassActive - CSS class to use for active pagination buttons

pagination: 'someClass'

Default: 'active'

paginationElement - Selector for element to place pagination controls in.

paginationElement: '#someElement'

Default: undefined - Undefined will create a (remove any existing) table footer to place controls in.

pagClosest - Create pagination buttons for tbe n closest pages

pagClosest: 5

Default: 3

perPage - Rows per page when using pagination

perPage: 5

Default: 10

searchable - Should the table be searchable or not

searchable: false

Default: true

sortable - Should the table be sortable or not

sortable: false

Default: true

sortColumn - Column number for initial sorting

sortColumn: 5

Default: undefined

sortFunction - Function for custom sorting

sortFunction: function(a, b, fancyTableObject, rowA, rowB){
	if(a==b && rowA && rowB){
		return(fancyTableObject.rowSortOrder[$(rowA).data("rowid")] > fancyTableObject.rowSortOrder[$(rowB).data("rowid")]);
	}
	if(fancyTableObject.sortAs[fancyTableObject.sortColumn] == 'numeric'){
		return(
			(fancyTableObject.sortOrder>0) ? (parseFloat(a)||0)-(parseFloat(b)||0) : (parseFloat(b)||0)-(parseFloat(a)||0)
		);
	}
	if (fancyTableObject.sortAs[fancyTableObject.sortColumn] == 'datetime') {
		return (fancyTableObject.sortOrder > 0) ? (Date.parse(a) - Date.parse(b)) : (Date.parse(b) - Date.parse(a));
	} else {
		return((a<b)?-fancyTableObject.sortOrder:(a>b)?fancyTableObject.sortOrder:0);
	}
}

sortOrder - Initial sort order

sortOrder: 'descending' // Valid values are 'desc', 'descending', 'asc', 'ascending', -1 (descending) and 1 (ascending)

Default: 'ascending'

Data attributes

data-sortas="numeric" - Used in the table header element to define that values in the column should be sorted in numerical order (..., 8, 9, 10, 10.1, 12, ...)

<th data-sortas="numeric">

data-sortas="datetime" - Used in the table header element to define that values in the column should be sorted in chronological order (..., Jan 1 2023, 2/1/2023, "March 19, 2023 4:15 PM", , 5/5/23 10:00, 5/5/23 18:03:21 -0600 (Mountain Daylight Time), ...)

<th data-sortas="datetime">

data-sortas="case-insensitive" - Used in the table header element to define that values in the column should be sorted case insensitive (a, B, c, D, ...)

<th data-sortas="case-insensitive">

data-sortas="none" - This column should not be sortable

<th data-sortas="none">

data-sortvalue="<value>" - Used in the table data element to define an alternate value to be used when sorting

<td>1</td>
<td data-sortvalue="2">Two</td>
<td>3</td>

<td>Ghost</td>
<td data-sortvalue="Fox and the Hound, The">The Fox and the Hound</td>
<td>I Know What You Did Last Summer</td>

Author: Johan Johansson