You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
160 lines
3.7 KiB
160 lines
3.7 KiB
3 years ago
|
# jQuery.fancyTable
|
||
|
|
||
|
A jQuery plugin for making html tables searchable and sortable with pagination.
|
||
|
|
||
|
[![Build Status](https://travis-ci.com/myspace-nu/jquery.fancyTable.svg?branch=master)](https://travis-ci.com/myspace-nu/jquery.fancyTable)
|
||
|
[![GitHub](https://img.shields.io/github/license/mashape/apistatus.svg)](https://github.com/myspace-nu/jquery.fancyTable/blob/master/LICENSE)
|
||
|
|
||
|
## Live demo
|
||
|
|
||
|
See a live demo on [CodePen](https://codepen.io/myspace-nu/full/ZVEKyR)
|
||
|
|
||
|
## 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 <th> 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 <th> 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 <td> 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](https://github.com/myspace-nu)
|
||
|
|
||
|
### This library has been modified/used to meet the needs of Brookens Library
|