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

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: ''

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 });
}

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

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="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-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

This library has been modified/used to meet the needs of Brookens Library