Author: | stationer |
---|---|
Views Total: | 27,608 views |
Official Page: | Go to website |
Last Update: | May 21, 2020 |
License: | MIT |
Preview:

Description:
sort-table is a small JavaScript library which applies the sorting functionality to your HTML table.
How to use it:
Import the stylesheet sort-table.min.css
and JavaScript sort-table.min.js
files into the document.
<script src="sort-table.js"></script> <link rel="stylesheet" href="sort-table.css">
The basic table sorting functionality can be added simply by adding CSS class js-sort-table
to all tables within the document.
<table class="js-sort-table" id="demo1"> <caption><table class="js-sort-table"></caption> <thead> <tr> <th class="js-sort-number">Row</th> <th>Strings</th> <th class="js-sort-date">Dates</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>Shoe</td> <td>9/11/2001</td> </tr> <tr> <td>2</td> <td>Twine</td> <td>12/7/1941</td> </tr> <tr> <td>3</td> <td>Thread</td> <td>1/20/2008</td> </tr> <tr> <td>4</td> <td>Rope</td> <td>9/17/1862</td> </tr> <tr> <td>5</td> <td>Yarn</td> <td>8/6/1945</td> </tr> <tr> <td>6</td> <td>Nylon</td> <td>7/4/1776</td> </tr> </tbody> </table>
sort-table.js uses CSS classes to track the sort state. This allows for advanced styling by applying your own styles to the classes as shown below.
- js-sort-asc: ascending sort
- js-sort-desc: descending sort
- js-sort-0: zero-based number of the sorted column
- js-sort-string: sort by string
- js-sort-date: sort by date
- js-sort-number: sort by number
- js-sort-last: sort by the last word
- js-sort-input: sort by the input value
Changelog:
05/21/2020
- Avoid attaching handler for ‘none’ columns
10/11/2019
- Add support for ‘none’ sort type
02/08/2019
- Adjusted Sort Direction Decorative Styles
Thanks this thing works perfectly !!
Hi,
thanks for the very cool, easy to implement script!
I have one question:
Is ist possible, that “js-sort-date” can read a date-format like “14-07-2019″?
At the moment the”js-sort-date” doesnt interprete that as a date (and it doesnt sort the data).
Thanks a lot.
Kind regards, Ecki
I noticed the same thing. It only accepts the American format of MM-DD-YYYY not the international standard YYYY-MM-DD
I may be blind…but I can’t find the css file you mention anywhere. Would love to try it though.
The CSS file is not included in the download. Where do I get it?
Is it operable via keyboard? I can’t tab to the headings
This sort of number seem to be working out for integer values, does this even support floating numbers and -ve numbers.
Rest all sorting, for string, integer is really good. especially multirow header is very useful.
when i append the html table using ajax then its not work.