├── .eslintrc.js
├── .gitattributes
├── .github
├── dependabot.yml
└── workflows
│ └── ci.yml
├── .gitignore
├── Gruntfile.js
├── LICENSE
├── README.md
├── dist
└── fancyTable.min.js
├── example
└── index.html
├── package.json
└── src
└── fancyTable.js
/.eslintrc.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | "env": {
3 | "browser": true,
4 | "es2021": true,
5 | "jquery": true
6 | },
7 | "extends": "eslint:recommended",
8 | "parserOptions": {
9 | "ecmaVersion": 13
10 | }
11 | };
--------------------------------------------------------------------------------
/.gitattributes:
--------------------------------------------------------------------------------
1 | # Auto detect text files and perform LF normalization
2 | * text=auto
3 |
--------------------------------------------------------------------------------
/.github/dependabot.yml:
--------------------------------------------------------------------------------
1 | version: 2
2 | updates:
3 | - package-ecosystem: github-actions
4 | directory: "/"
5 | schedule:
6 | interval: daily
7 | open-pull-requests-limit: 99
8 |
9 | - package-ecosystem: npm
10 | directory: "/"
11 | schedule:
12 | interval: weekly
13 | open-pull-requests-limit: 99
14 |
--------------------------------------------------------------------------------
/.github/workflows/ci.yml:
--------------------------------------------------------------------------------
1 | name: CI
2 |
3 | on:
4 | push:
5 | branches-ignore:
6 | - "dependabot/**"
7 | pull_request:
8 |
9 | jobs:
10 | run:
11 | runs-on: ubuntu-latest
12 |
13 | steps:
14 | - name: Clone repository
15 | uses: actions/checkout@v4
16 |
17 | - name: Set up Node.js
18 | uses: actions/setup-node@v4
19 | with:
20 | node-version: lts/*
21 |
22 | - name: Install npm dependencies
23 | run: npm install
24 |
25 | - name: Run tests
26 | run: npm test
27 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules/
2 |
--------------------------------------------------------------------------------
/Gruntfile.js:
--------------------------------------------------------------------------------
1 | module.exports = function(grunt) {
2 | grunt.initConfig({
3 | pkg: grunt.file.readJSON('package.json'),
4 | uglify: {
5 | options: {
6 | banner: '/*!\n'+
7 | ' * jQuery fancyTable plugin v<%= pkg.version %>\n'+
8 | ' * https://github.com/myspace-nu\n'+
9 | ' *\n'+
10 | ' * Copyright 2018 Johan Johansson\n'+
11 | ' * Released under the MIT license\n'+
12 | ' */\n'
13 | },
14 | build: {
15 | src: 'src/fancyTable.js',
16 | dest: 'dist/fancyTable.min.js'
17 | }
18 | },
19 | eslint: {
20 | target: ['src/fancyTable.js']
21 | }
22 | });
23 | grunt.loadNpmTasks('grunt-contrib-uglify');
24 | grunt.loadNpmTasks('grunt-eslint');
25 | grunt.registerTask('default', ['eslint', 'uglify']);
26 | };
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2018 Johan Johansson
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # jQuery.fancyTable
2 |
3 | A jQuery plugin for making html tables searchable and sortable with pagination.
4 |
5 | [](https://github.com/myspace-nu/jquery.fancyTable/blob/master/LICENSE)
6 | [](https://github.com/myspace-nu/jquery.fancyTable)
7 | [](https://github.com/myspace-nu/jquery.fancyTable/issues)
8 |
9 | ## Live demo
10 |
11 | See a live demo on [CodePen](https://codepen.io/myspace-nu/full/ZVEKyR)
12 |
13 | ## Installation
14 |
15 | Using npm
16 |
17 | npm install jquery.fancytable --save
18 |
19 | Using CDN
20 |
21 |
22 |
23 | Or manually by including the script *after* the jQuery library
24 |
25 |
26 |
27 | ## Usage
28 |
29 |
39 |
40 | ## Options
41 |
42 | **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.
43 |
44 | exactMatch: true
45 |
46 | *Default: false*
47 |
48 | **globalSearch** - Use global search for all columns
49 |
50 | globalSearch: false
51 |
52 | *Default: false*
53 |
54 | **globalSearchExcludeColumns** - Defines a number of columns to exclude from the global search.
55 |
56 | globalSearchExcludeColumns: [2,5] // Exclude 2nd and 5th column.
57 |
58 | *Default: undefined*
59 |
60 | **inputPlaceholder** - Placeholder to use for <input>
61 |
62 | inputPlaceholder: 'Sök...'
63 |
64 | *Default: 'Search...'*
65 |
66 | **inputStyle** - Style attributes to use for <input>
67 |
68 | inputStyle: 'color:black;'
69 |
70 | *Default: ''*
71 |
72 | **localeCompare** - Use [localeCompare](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/localeCompare) when sorting
73 |
74 | localeCompare: true
75 |
76 | *Default: false*
77 |
78 | **matchCase** - Use case sensitive search
79 |
80 | matchCase: true
81 |
82 | *Default: false*
83 |
84 | **onInit** - Function called after initialization
85 |
86 | onInit:function(){
87 | console.log({ element:this });
88 | }
89 |
90 | **onUpdate** - Function called after each update (sort and search)
91 |
92 | onUpdate:function(){
93 | console.log({ element:this });
94 | }
95 |
96 | **beforeUpdate** - Function called before each update (sort and search)
97 |
98 | beforeUpdate:function(){
99 | console.log({ element:this });
100 | }
101 |
102 | **pagination** - Use pagination or not
103 |
104 | pagination: true
105 |
106 | *Default: false*
107 |
108 | **paginationClass** - CSS class to use for pagination buttons
109 |
110 | paginationClass: 'btn btn-primary'
111 |
112 | *Default: 'btn btn-light'*
113 |
114 | **paginationClassActive** - CSS class to use for active pagination buttons
115 |
116 | paginationClassActive: 'someClass'
117 |
118 | *Default: 'active'*
119 |
120 | **paginationElement** - Selector for element to place pagination controls in.
121 |
122 | paginationElement: '#someElement'
123 |
124 | *Default: undefined* - Undefined will create a (remove any existing) table footer to place controls in.
125 |
126 | **pagClosest** - Create pagination buttons for tbe n closest pages
127 |
128 | pagClosest: 5
129 |
130 | *Default: 3*
131 |
132 | **perPage** - Rows per page when using pagination
133 |
134 | perPage: 5
135 |
136 | *Default: 10*
137 |
138 | **searchable** - Should the table be searchable or not
139 |
140 | searchable: false
141 |
142 | *Default: true*
143 |
144 | **sortable** - Should the table be sortable or not
145 |
146 | sortable: false
147 |
148 | *Default: true*
149 |
150 | **sortColumn** - Column number for initial sorting
151 |
152 | sortColumn: 5
153 |
154 | *Default: undefined*
155 |
156 | **sortFunction** - Function for custom sorting
157 |
158 | sortFunction: function(a, b, fancyTableObject, rowA, rowB){
159 | if(a==b && rowA && rowB){
160 | return(fancyTableObject.rowSortOrder[$(rowA).data("rowid")] > fancyTableObject.rowSortOrder[$(rowB).data("rowid")]);
161 | }
162 | if(fancyTableObject.sortAs[fancyTableObject.sortColumn] == 'numeric'){
163 | return(
164 | (fancyTableObject.sortOrder>0) ? (parseFloat(a)||0)-(parseFloat(b)||0) : (parseFloat(b)||0)-(parseFloat(a)||0)
165 | );
166 | }
167 | if (fancyTableObject.sortAs[fancyTableObject.sortColumn] == 'datetime') {
168 | return (fancyTableObject.sortOrder > 0) ? (Date.parse(a) - Date.parse(b)) : (Date.parse(b) - Date.parse(a));
169 | } else {
170 | return((ab)?fancyTableObject.sortOrder:0);
171 | }
172 | }
173 |
174 | **sortOrder** - Initial sort order
175 |
176 | sortOrder: 'descending' // Valid values are 'desc', 'descending', 'asc', 'ascending', -1 (descending) and 1 (ascending)
177 |
178 | *Default: 'ascending'*
179 |
180 | ## Data attributes
181 |
182 | **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, ...)
183 |
184 |
185 |
186 | **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), ...)
187 |
188 |
189 |
190 | **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, ...)
191 |
192 |
193 |
194 | **data-sortas="none"** - This column should not be sortable
195 |
196 |
197 |
198 | **data-sortvalue="``"** - Used in the table data element
to define an alternate value to be used when sorting
199 |
200 |