Change the directory of Tablesorter from '_assets' to static 'assets'.
This commit is contained in:
vonavi
159
assets/vendor/tablesorter/docs/assets/City0.json
vendored
Normal file
159
assets/vendor/tablesorter/docs/assets/City0.json
vendored
Normal file
@@ -0,0 +1,159 @@
|
||||
{
|
||||
"total_rows": 80,
|
||||
|
||||
"headers" : [
|
||||
"ID", "Name", "Country Code", "District", "Population"
|
||||
],
|
||||
|
||||
"rows" : [{
|
||||
"ID": 1,
|
||||
"Name": "Kabul",
|
||||
"CountryCode": "AFG",
|
||||
"District": "Kabol",
|
||||
"Population": 1780000
|
||||
}, {
|
||||
"ID": 2,
|
||||
"Name": "Qandahar",
|
||||
"CountryCode": "AFG",
|
||||
"District": "Qandahar",
|
||||
"Population": 237500
|
||||
}, {
|
||||
"ID": 3,
|
||||
"Name": "Herat",
|
||||
"CountryCode": "AFG",
|
||||
"District": "Herat",
|
||||
"Population": 186800
|
||||
}, {
|
||||
"ID": 4,
|
||||
"Name": "Mazar-e-Sharif",
|
||||
"CountryCode": "AFG",
|
||||
"District": "Balkh",
|
||||
"Population": 127800
|
||||
}, {
|
||||
"ID": 5,
|
||||
"Name": "Amsterdam",
|
||||
"CountryCode": "NLD",
|
||||
"District": "Noord-Holland",
|
||||
"Population": 731200
|
||||
}, {
|
||||
"ID": 6,
|
||||
"Name": "Rotterdam",
|
||||
"CountryCode": "NLD",
|
||||
"District": "Zuid-Holland",
|
||||
"Population": 593321
|
||||
}, {
|
||||
"ID": 7,
|
||||
"Name": "Haag",
|
||||
"CountryCode": "NLD",
|
||||
"District": "Zuid-Holland",
|
||||
"Population": 440900
|
||||
}, {
|
||||
"ID": 8,
|
||||
"Name": "Utrecht",
|
||||
"CountryCode": "NLD",
|
||||
"District": "Utrecht",
|
||||
"Population": 234323
|
||||
}, {
|
||||
"ID": 9,
|
||||
"Name": "Eindhoven",
|
||||
"CountryCode": "NLD",
|
||||
"District": "Noord-Brabant",
|
||||
"Population": 201843
|
||||
}, {
|
||||
"ID": 10,
|
||||
"Name": "Tilburg",
|
||||
"CountryCode": "NLD",
|
||||
"District": "Noord-Brabant",
|
||||
"Population": 193238
|
||||
}, {
|
||||
"ID": 11,
|
||||
"Name": "Groningen",
|
||||
"CountryCode": "NLD",
|
||||
"District": "Groningen",
|
||||
"Population": 172701
|
||||
}, {
|
||||
"ID": 12,
|
||||
"Name": "Breda",
|
||||
"CountryCode": "NLD",
|
||||
"District": "Noord-Brabant",
|
||||
"Population": 160398
|
||||
}, {
|
||||
"ID": 13,
|
||||
"Name": "Apeldoorn",
|
||||
"CountryCode": "NLD",
|
||||
"District": "Gelderland",
|
||||
"Population": 153491
|
||||
}, {
|
||||
"ID": 14,
|
||||
"Name": "Nijmegen",
|
||||
"CountryCode": "NLD",
|
||||
"District": "Gelderland",
|
||||
"Population": 152463
|
||||
}, {
|
||||
"ID": 15,
|
||||
"Name": "Enschede",
|
||||
"CountryCode": "NLD",
|
||||
"District": "Overijssel",
|
||||
"Population": 149544
|
||||
}, {
|
||||
"ID": 16,
|
||||
"Name": "Haarlem",
|
||||
"CountryCode": "NLD",
|
||||
"District": "Noord-Holland",
|
||||
"Population": 148772
|
||||
}, {
|
||||
"ID": 17,
|
||||
"Name": "Almere",
|
||||
"CountryCode": "NLD",
|
||||
"District": "Flevoland",
|
||||
"Population": 142465
|
||||
}, {
|
||||
"ID": 18,
|
||||
"Name": "Arnhem",
|
||||
"CountryCode": "NLD",
|
||||
"District": "Gelderland",
|
||||
"Population": 138020
|
||||
}, {
|
||||
"ID": 19,
|
||||
"Name": "Zaanstad",
|
||||
"CountryCode": "NLD",
|
||||
"District": "Noord-Holland",
|
||||
"Population": 135621
|
||||
}, {
|
||||
"ID": 20,
|
||||
"Name": "´s-Hertogenbosch",
|
||||
"CountryCode": "NLD",
|
||||
"District": "Noord-Brabant",
|
||||
"Population": 129170
|
||||
}, {
|
||||
"ID": 21,
|
||||
"Name": "Amersfoort",
|
||||
"CountryCode": "NLD",
|
||||
"District": "Utrecht",
|
||||
"Population": 126270
|
||||
}, {
|
||||
"ID": 22,
|
||||
"Name": "Maastricht",
|
||||
"CountryCode": "NLD",
|
||||
"District": "Limburg",
|
||||
"Population": 122087
|
||||
}, {
|
||||
"ID": 23,
|
||||
"Name": "Dordrecht",
|
||||
"CountryCode": "NLD",
|
||||
"District": "Zuid-Holland",
|
||||
"Population": 119811
|
||||
}, {
|
||||
"ID": 24,
|
||||
"Name": "Leiden",
|
||||
"CountryCode": "NLD",
|
||||
"District": "Zuid-Holland",
|
||||
"Population": 117196
|
||||
}, {
|
||||
"ID": 25,
|
||||
"Name": "Haarlemmermeer",
|
||||
"CountryCode": "NLD",
|
||||
"District": "Noord-Holland",
|
||||
"Population": 110722
|
||||
}]
|
||||
}
|
||||
159
assets/vendor/tablesorter/docs/assets/City1.json
vendored
Normal file
159
assets/vendor/tablesorter/docs/assets/City1.json
vendored
Normal file
@@ -0,0 +1,159 @@
|
||||
{
|
||||
"total_rows": 80,
|
||||
|
||||
"headers" : [
|
||||
"ID", "Name", "Country Code", "District", "Population"
|
||||
],
|
||||
|
||||
"rows" : [{
|
||||
"ID": 26,
|
||||
"Name": "Zoetermeer",
|
||||
"CountryCode": "NLD",
|
||||
"District": "Zuid-Holland",
|
||||
"Population": 110214
|
||||
}, {
|
||||
"ID": 27,
|
||||
"Name": "Emmen",
|
||||
"CountryCode": "NLD",
|
||||
"District": "Drenthe",
|
||||
"Population": 105853
|
||||
}, {
|
||||
"ID": 28,
|
||||
"Name": "Zwolle",
|
||||
"CountryCode": "NLD",
|
||||
"District": "Overijssel",
|
||||
"Population": 105819
|
||||
}, {
|
||||
"ID": 29,
|
||||
"Name": "Ede",
|
||||
"CountryCode": "NLD",
|
||||
"District": "Gelderland",
|
||||
"Population": 101574
|
||||
}, {
|
||||
"ID": 30,
|
||||
"Name": "Delft",
|
||||
"CountryCode": "NLD",
|
||||
"District": "Zuid-Holland",
|
||||
"Population": 95268
|
||||
}, {
|
||||
"ID": 31,
|
||||
"Name": "Heerlen",
|
||||
"CountryCode": "NLD",
|
||||
"District": "Limburg",
|
||||
"Population": 95052
|
||||
}, {
|
||||
"ID": 32,
|
||||
"Name": "Alkmaar",
|
||||
"CountryCode": "NLD",
|
||||
"District": "Noord-Holland",
|
||||
"Population": 92713
|
||||
}, {
|
||||
"ID": 33,
|
||||
"Name": "Willemstad",
|
||||
"CountryCode": "ANT",
|
||||
"District": "Curaçao",
|
||||
"Population": 2345
|
||||
}, {
|
||||
"ID": 34,
|
||||
"Name": "Tirana",
|
||||
"CountryCode": "ALB",
|
||||
"District": "Tirana",
|
||||
"Population": 270000
|
||||
}, {
|
||||
"ID": 35,
|
||||
"Name": "Alger",
|
||||
"CountryCode": "DZA",
|
||||
"District": "Alger",
|
||||
"Population": 2168000
|
||||
}, {
|
||||
"ID": 36,
|
||||
"Name": "Oran",
|
||||
"CountryCode": "DZA",
|
||||
"District": "Oran",
|
||||
"Population": 609823
|
||||
}, {
|
||||
"ID": 37,
|
||||
"Name": "Constantine",
|
||||
"CountryCode": "DZA",
|
||||
"District": "Constantine",
|
||||
"Population": 443727
|
||||
}, {
|
||||
"ID": 38,
|
||||
"Name": "Annaba",
|
||||
"CountryCode": "DZA",
|
||||
"District": "Annaba",
|
||||
"Population": 222518
|
||||
}, {
|
||||
"ID": 39,
|
||||
"Name": "Batna",
|
||||
"CountryCode": "DZA",
|
||||
"District": "Batna",
|
||||
"Population": 183377
|
||||
}, {
|
||||
"ID": 40,
|
||||
"Name": "Sétif",
|
||||
"CountryCode": "DZA",
|
||||
"District": "Sétif",
|
||||
"Population": 179055
|
||||
}, {
|
||||
"ID": 41,
|
||||
"Name": "Sidi Bel Abbès",
|
||||
"CountryCode": "DZA",
|
||||
"District": "Sidi Bel Abbès",
|
||||
"Population": 153106
|
||||
}, {
|
||||
"ID": 42,
|
||||
"Name": "Skikda",
|
||||
"CountryCode": "DZA",
|
||||
"District": "Skikda",
|
||||
"Population": 128747
|
||||
}, {
|
||||
"ID": 43,
|
||||
"Name": "Biskra",
|
||||
"CountryCode": "DZA",
|
||||
"District": "Biskra",
|
||||
"Population": 128281
|
||||
}, {
|
||||
"ID": 44,
|
||||
"Name": "Blida (el-Boulaida)",
|
||||
"CountryCode": "DZA",
|
||||
"District": "Blida",
|
||||
"Population": 127284
|
||||
}, {
|
||||
"ID": 45,
|
||||
"Name": "Béjaïa",
|
||||
"CountryCode": "DZA",
|
||||
"District": "Béjaïa",
|
||||
"Population": 117162
|
||||
}, {
|
||||
"ID": 46,
|
||||
"Name": "Mostaganem",
|
||||
"CountryCode": "DZA",
|
||||
"District": "Mostaganem",
|
||||
"Population": 115212
|
||||
}, {
|
||||
"ID": 47,
|
||||
"Name": "Tébessa",
|
||||
"CountryCode": "DZA",
|
||||
"District": "Tébessa",
|
||||
"Population": 112007
|
||||
}, {
|
||||
"ID": 48,
|
||||
"Name": "Tlemcen (Tilimsen)",
|
||||
"CountryCode": "DZA",
|
||||
"District": "Tlemcen",
|
||||
"Population": 110242
|
||||
}, {
|
||||
"ID": 49,
|
||||
"Name": "Béchar",
|
||||
"CountryCode": "DZA",
|
||||
"District": "Béchar",
|
||||
"Population": 107311
|
||||
}, {
|
||||
"ID": 50,
|
||||
"Name": "Tiaret",
|
||||
"CountryCode": "DZA",
|
||||
"District": "Tiaret",
|
||||
"Population": 100118
|
||||
}]
|
||||
}
|
||||
159
assets/vendor/tablesorter/docs/assets/City2.json
vendored
Normal file
159
assets/vendor/tablesorter/docs/assets/City2.json
vendored
Normal file
@@ -0,0 +1,159 @@
|
||||
{
|
||||
"total_rows": 80,
|
||||
|
||||
"headers" : [
|
||||
"ID", "Name", "Country Code", "District", "Population"
|
||||
],
|
||||
|
||||
"rows" : [{
|
||||
"ID": 51,
|
||||
"Name": "Ech-Chleff (el-Asnam)",
|
||||
"CountryCode": "DZA",
|
||||
"District": "Chlef",
|
||||
"Population": 96794
|
||||
}, {
|
||||
"ID": 52,
|
||||
"Name": "Ghardaïa",
|
||||
"CountryCode": "DZA",
|
||||
"District": "Ghardaïa",
|
||||
"Population": 89415
|
||||
}, {
|
||||
"ID": 53,
|
||||
"Name": "Tafuna",
|
||||
"CountryCode": "ASM",
|
||||
"District": "Tutuila",
|
||||
"Population": 5200
|
||||
}, {
|
||||
"ID": 54,
|
||||
"Name": "Fagatogo",
|
||||
"CountryCode": "ASM",
|
||||
"District": "Tutuila",
|
||||
"Population": 2323
|
||||
}, {
|
||||
"ID": 55,
|
||||
"Name": "Andorra la Vella",
|
||||
"CountryCode": "AND",
|
||||
"District": "Andorra la Vella",
|
||||
"Population": 21189
|
||||
}, {
|
||||
"ID": 56,
|
||||
"Name": "Luanda",
|
||||
"CountryCode": "AGO",
|
||||
"District": "Luanda",
|
||||
"Population": 2022000
|
||||
}, {
|
||||
"ID": 57,
|
||||
"Name": "Huambo",
|
||||
"CountryCode": "AGO",
|
||||
"District": "Huambo",
|
||||
"Population": 163100
|
||||
}, {
|
||||
"ID": 58,
|
||||
"Name": "Lobito",
|
||||
"CountryCode": "AGO",
|
||||
"District": "Benguela",
|
||||
"Population": 130000
|
||||
}, {
|
||||
"ID": 59,
|
||||
"Name": "Benguela",
|
||||
"CountryCode": "AGO",
|
||||
"District": "Benguela",
|
||||
"Population": 128300
|
||||
}, {
|
||||
"ID": 60,
|
||||
"Name": "Namibe",
|
||||
"CountryCode": "AGO",
|
||||
"District": "Namibe",
|
||||
"Population": 118200
|
||||
}, {
|
||||
"ID": 61,
|
||||
"Name": "South Hill",
|
||||
"CountryCode": "AIA",
|
||||
"District": "–",
|
||||
"Population": 961
|
||||
}, {
|
||||
"ID": 62,
|
||||
"Name": "The Valley",
|
||||
"CountryCode": "AIA",
|
||||
"District": "–",
|
||||
"Population": 595
|
||||
}, {
|
||||
"ID": 63,
|
||||
"Name": "Saint John´s",
|
||||
"CountryCode": "ATG",
|
||||
"District": "St John",
|
||||
"Population": 24000
|
||||
}, {
|
||||
"ID": 64,
|
||||
"Name": "Dubai",
|
||||
"CountryCode": "ARE",
|
||||
"District": "Dubai",
|
||||
"Population": 669181
|
||||
}, {
|
||||
"ID": 65,
|
||||
"Name": "Abu Dhabi",
|
||||
"CountryCode": "ARE",
|
||||
"District": "Abu Dhabi",
|
||||
"Population": 398695
|
||||
}, {
|
||||
"ID": 66,
|
||||
"Name": "Sharja",
|
||||
"CountryCode": "ARE",
|
||||
"District": "Sharja",
|
||||
"Population": 320095
|
||||
}, {
|
||||
"ID": 67,
|
||||
"Name": "al-Ayn",
|
||||
"CountryCode": "ARE",
|
||||
"District": "Abu Dhabi",
|
||||
"Population": 225970
|
||||
}, {
|
||||
"ID": 68,
|
||||
"Name": "Ajman",
|
||||
"CountryCode": "ARE",
|
||||
"District": "Ajman",
|
||||
"Population": 114395
|
||||
}, {
|
||||
"ID": 69,
|
||||
"Name": "Buenos Aires",
|
||||
"CountryCode": "ARG",
|
||||
"District": "Distrito Federal",
|
||||
"Population": 2982146
|
||||
}, {
|
||||
"ID": 70,
|
||||
"Name": "La Matanza",
|
||||
"CountryCode": "ARG",
|
||||
"District": "Buenos Aires",
|
||||
"Population": 1266461
|
||||
}, {
|
||||
"ID": 71,
|
||||
"Name": "Córdoba",
|
||||
"CountryCode": "ARG",
|
||||
"District": "Córdoba",
|
||||
"Population": 1157507
|
||||
}, {
|
||||
"ID": 72,
|
||||
"Name": "Rosario",
|
||||
"CountryCode": "ARG",
|
||||
"District": "Santa Fé",
|
||||
"Population": 907718
|
||||
}, {
|
||||
"ID": 73,
|
||||
"Name": "Lomas de Zamora",
|
||||
"CountryCode": "ARG",
|
||||
"District": "Buenos Aires",
|
||||
"Population": 622013
|
||||
}, {
|
||||
"ID": 74,
|
||||
"Name": "Quilmes",
|
||||
"CountryCode": "ARG",
|
||||
"District": "Buenos Aires",
|
||||
"Population": 559249
|
||||
}, {
|
||||
"ID": 75,
|
||||
"Name": "Almirante Brown",
|
||||
"CountryCode": "ARG",
|
||||
"District": "Buenos Aires",
|
||||
"Population": 538918
|
||||
}]
|
||||
}
|
||||
39
assets/vendor/tablesorter/docs/assets/City3.json
vendored
Normal file
39
assets/vendor/tablesorter/docs/assets/City3.json
vendored
Normal file
@@ -0,0 +1,39 @@
|
||||
{
|
||||
"total_rows": 80,
|
||||
|
||||
"headers" : [
|
||||
"ID", "Name", "Country Code", "District", "Population"
|
||||
],
|
||||
|
||||
"rows" : [{
|
||||
"ID": 76,
|
||||
"Name": "La Plata",
|
||||
"CountryCode": "ARG",
|
||||
"District": "Buenos Aires",
|
||||
"Population": 521936
|
||||
}, {
|
||||
"ID": 77,
|
||||
"Name": "Mar del Plata",
|
||||
"CountryCode": "ARG",
|
||||
"District": "Buenos Aires",
|
||||
"Population": 512880
|
||||
}, {
|
||||
"ID": 78,
|
||||
"Name": "San Miguel de Tucumán",
|
||||
"CountryCode": "ARG",
|
||||
"District": "Tucumán",
|
||||
"Population": 470809
|
||||
}, {
|
||||
"ID": 79,
|
||||
"Name": "Lanús",
|
||||
"CountryCode": "ARG",
|
||||
"District": "Buenos Aires",
|
||||
"Population": 469735
|
||||
}, {
|
||||
"ID": 80,
|
||||
"Name": "Merlo",
|
||||
"CountryCode": "ARG",
|
||||
"District": "Buenos Aires",
|
||||
"Population": 463846
|
||||
}]
|
||||
}
|
||||
40
assets/vendor/tablesorter/docs/assets/ajax-content.html
vendored
Normal file
40
assets/vendor/tablesorter/docs/assets/ajax-content.html
vendored
Normal file
@@ -0,0 +1,40 @@
|
||||
<tr>
|
||||
<td>Peter</td>
|
||||
<td>Parker</td>
|
||||
<td>28</td>
|
||||
<td>$9.99</td>
|
||||
<td>20%</td>
|
||||
<td>Jul 6, 2006 8:14 AM</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>John</td>
|
||||
<td>Hood</td>
|
||||
<td>33</td>
|
||||
<td>$19.99</td>
|
||||
<td>25%</td>
|
||||
<td>Dec 10, 2002 5:14 AM</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Clark</td>
|
||||
<td>Kent</td>
|
||||
<td>18</td>
|
||||
<td>$15.89</td>
|
||||
<td>44%</td>
|
||||
<td>Jan 12, 2003 11:14 AM</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Bruce</td>
|
||||
<td>Almighty</td>
|
||||
<td>45</td>
|
||||
<td>$153.19</td>
|
||||
<td>44%</td>
|
||||
<td>Jan 18, 2001 9:12 AM</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Bruce</td>
|
||||
<td>Evans</td>
|
||||
<td>22</td>
|
||||
<td>$13.19</td>
|
||||
<td>11%</td>
|
||||
<td>Jan 18, 2007 9:12 AM</td>
|
||||
</tr>
|
||||
37
assets/vendor/tablesorter/docs/assets/build.json
vendored
Normal file
37
assets/vendor/tablesorter/docs/assets/build.json
vendored
Normal file
@@ -0,0 +1,37 @@
|
||||
{
|
||||
"headers": [
|
||||
[
|
||||
{ "text": "First Name", "class": "fname", "width": "20%" },
|
||||
"Last Name",
|
||||
{ "text": "Age", "class": "age", "data-sorter": false },
|
||||
"Total",
|
||||
{ "text": "Discount", "class": "sorter-false" },
|
||||
{ "text": "Date", "class": "date", "width": "20%" }
|
||||
]
|
||||
],
|
||||
"footers": "clone",
|
||||
"rows": [
|
||||
[ "Peter", "Parker", 28, "$9.99", "20%", "Jul 6, 2006 8:14 AM" ],
|
||||
[ "John", "Hood", 33, "$19.99", "25%", "Dec 10, 2002 5:14 AM" ],
|
||||
[ "Clark", "Kent", 18, "$15.89", "44%", "Jan 12, 2003 11:14 AM" ],
|
||||
|
||||
{ "newTbody": true, "class": "tablesorter-infoOnly" },
|
||||
{ "cells": [ { "html": "<strong>JSON Info Row</strong>", "colspan": 6 } ] },
|
||||
|
||||
{ "newTbody": true },
|
||||
[ "Bruce", "Evans", 22, "$13.19", "11%", "Jan 18, 2007 9:12 AM" ],
|
||||
[ "Brice", "Almighty", 45, "$153.19", "44%", "Jan 18, 2001 9:12 AM" ],
|
||||
|
||||
{ "class": "specialRow",
|
||||
"cells": [
|
||||
{ "text": "Fred", "class": "fname" },
|
||||
{ "text": "Smith", "class": "lname" },
|
||||
{ "text": 18, "class": "age", "data-info": "fake ID!, he's only 16" },
|
||||
{ "text": "$22.44", "class": "total" },
|
||||
"8%",
|
||||
{ "text": "Aug 20, 2012 10:15 AM", "class": "date" }
|
||||
],
|
||||
"data-info": "This row likes turtles"
|
||||
}
|
||||
]
|
||||
}
|
||||
9
assets/vendor/tablesorter/docs/assets/build.txt
vendored
Normal file
9
assets/vendor/tablesorter/docs/assets/build.txt
vendored
Normal file
@@ -0,0 +1,9 @@
|
||||
Album,Artist,Price ($)
|
||||
Lateralus,Tool,$13.00
|
||||
Aenima,Tool,$12.00
|
||||
"10,000 days",Tool,$14.00
|
||||
Down In It,Nine Inch Nails,$3.00
|
||||
Broken,Nine Inch Nails,$6.00
|
||||
Muse,Black Holes and Revelations,$7.00
|
||||
Anon,"fake album, with comma", $1.00
|
||||
Album,Artist,Price ($)
|
||||
321
assets/vendor/tablesorter/docs/assets/theme_switcher.json
vendored
Normal file
321
assets/vendor/tablesorter/docs/assets/theme_switcher.json
vendored
Normal file
@@ -0,0 +1,321 @@
|
||||
[
|
||||
{
|
||||
"theme_name": "base",
|
||||
"theme_url": "http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css",
|
||||
"group": "Official",
|
||||
"active": "yes",
|
||||
"author": "jQuery Project",
|
||||
"license": "http://jquery.org/license"
|
||||
},
|
||||
{
|
||||
"theme_name": "black-tie",
|
||||
"theme_url": "http://code.jquery.com/ui/1.10.0/themes/black-tie/jquery-ui.css",
|
||||
"group": "Official",
|
||||
"active": "yes",
|
||||
"author": "jQuery Project",
|
||||
"license": "http://jquery.org/license"
|
||||
},
|
||||
{
|
||||
"theme_name": "blitzer",
|
||||
"theme_url": "http://code.jquery.com/ui/1.10.0/themes/blitzer/jquery-ui.css",
|
||||
"group": "Official",
|
||||
"active": "yes",
|
||||
"author": "jQuery Project",
|
||||
"license": "http://jquery.org/license"
|
||||
},
|
||||
{
|
||||
"theme_name": "cupertino",
|
||||
"theme_url": "http://code.jquery.com/ui/1.10.0/themes/cupertino/jquery-ui.css",
|
||||
"group": "Official",
|
||||
"active": "yes",
|
||||
"author": "jQuery Project",
|
||||
"license": "http://jquery.org/license"
|
||||
},
|
||||
{
|
||||
"theme_name": "dark-hive",
|
||||
"theme_url": "http://code.jquery.com/ui/1.10.0/themes/dark-hive/jquery-ui.css",
|
||||
"group": "Official",
|
||||
"active": "yes",
|
||||
"author": "jQuery Project",
|
||||
"license": "http://jquery.org/license"
|
||||
},
|
||||
{
|
||||
"theme_name": "dot-luv",
|
||||
"theme_url": "http://code.jquery.com/ui/1.10.0/themes/dot-luv/jquery-ui.css",
|
||||
"group": "Official",
|
||||
"active": "yes",
|
||||
"author": "jQuery Project",
|
||||
"license": "http://jquery.org/license"
|
||||
},
|
||||
{
|
||||
"theme_name": "eggplant",
|
||||
"theme_url": "http://code.jquery.com/ui/1.10.0/themes/eggplant/jquery-ui.css",
|
||||
"group": "Official",
|
||||
"active": "yes",
|
||||
"author": "jQuery Project",
|
||||
"license": "http://jquery.org/license"
|
||||
},
|
||||
{
|
||||
"theme_name": "excite-bike",
|
||||
"theme_url": "http://code.jquery.com/ui/1.10.0/themes/excite-bike/jquery-ui.css",
|
||||
"group": "Official",
|
||||
"active": "yes",
|
||||
"author": "jQuery Project",
|
||||
"license": "http://jquery.org/license"
|
||||
},
|
||||
{
|
||||
"theme_name": "flick",
|
||||
"theme_url": "http://code.jquery.com/ui/1.10.0/themes/flick/jquery-ui.css",
|
||||
"group": "Official",
|
||||
"active": "yes",
|
||||
"author": "jQuery Project",
|
||||
"license": "http://jquery.org/license"
|
||||
},
|
||||
{
|
||||
"theme_name": "hot-sneaks",
|
||||
"theme_url": "http://code.jquery.com/ui/1.10.0/themes/hot-sneaks/jquery-ui.css",
|
||||
"group": "Official",
|
||||
"active": "yes",
|
||||
"author": "jQuery Project",
|
||||
"license": "http://jquery.org/license"
|
||||
},
|
||||
{
|
||||
"theme_name": "humanity",
|
||||
"theme_url": "http://code.jquery.com/ui/1.10.0/themes/humanity/jquery-ui.css",
|
||||
"group": "Official",
|
||||
"active": "yes",
|
||||
"author": "jQuery Project",
|
||||
"license": "http://jquery.org/license"
|
||||
},
|
||||
{
|
||||
"theme_name": "le-frog",
|
||||
"theme_url": "http://code.jquery.com/ui/1.10.0/themes/le-frog/jquery-ui.css",
|
||||
"group": "Official",
|
||||
"active": "yes",
|
||||
"author": "jQuery Project",
|
||||
"license": "http://jquery.org/license"
|
||||
},
|
||||
{
|
||||
"theme_name": "mint-choc",
|
||||
"theme_url": "http://code.jquery.com/ui/1.10.0/themes/mint-choc/jquery-ui.css",
|
||||
"group": "Official",
|
||||
"active": "yes",
|
||||
"author": "jQuery Project",
|
||||
"license": "http://jquery.org/license"
|
||||
},
|
||||
{
|
||||
"theme_name": "overcast",
|
||||
"theme_url": "http://code.jquery.com/ui/1.10.0/themes/overcast/jquery-ui.css",
|
||||
"group": "Official",
|
||||
"active": "yes",
|
||||
"author": "jQuery Project",
|
||||
"license": "http://jquery.org/license"
|
||||
},
|
||||
{
|
||||
"theme_name": "pepper-grinder",
|
||||
"theme_url": "http://code.jquery.com/ui/1.10.0/themes/pepper-grinder/jquery-ui.css",
|
||||
"group": "Official",
|
||||
"active": "yes",
|
||||
"author": "jQuery Project",
|
||||
"license": "http://jquery.org/license"
|
||||
},
|
||||
{
|
||||
"theme_name": "redmond",
|
||||
"theme_url": "http://code.jquery.com/ui/1.10.0/themes/redmond/jquery-ui.css",
|
||||
"group": "Official",
|
||||
"active": "yes",
|
||||
"author": "jQuery Project",
|
||||
"license": "http://jquery.org/license"
|
||||
},
|
||||
{
|
||||
"theme_name": "smoothness",
|
||||
"theme_url": "http://code.jquery.com/ui/1.10.0/themes/smoothness/jquery-ui.css",
|
||||
"group": "Official",
|
||||
"active": "yes",
|
||||
"author": "jQuery Project",
|
||||
"license": "http://jquery.org/license"
|
||||
},
|
||||
{
|
||||
"theme_name": "south-street",
|
||||
"theme_url": "http://code.jquery.com/ui/1.10.0/themes/south-street/jquery-ui.css",
|
||||
"group": "Official",
|
||||
"active": "yes",
|
||||
"author": "jQuery Project",
|
||||
"license": "http://jquery.org/license"
|
||||
},
|
||||
{
|
||||
"theme_name": "start",
|
||||
"theme_url": "http://code.jquery.com/ui/1.10.0/themes/start/jquery-ui.css",
|
||||
"group": "Official",
|
||||
"active": "yes",
|
||||
"author": "jQuery Project",
|
||||
"license": "http://jquery.org/license"
|
||||
},
|
||||
{
|
||||
"theme_name": "sunny",
|
||||
"theme_url": "http://code.jquery.com/ui/1.10.0/themes/sunny/jquery-ui.css",
|
||||
"group": "Official",
|
||||
"active": "yes",
|
||||
"author": "jQuery Project",
|
||||
"license": "http://jquery.org/license"
|
||||
},
|
||||
{
|
||||
"theme_name": "swanky-purse",
|
||||
"theme_url": "http://code.jquery.com/ui/1.10.0/themes/swanky-purse/jquery-ui.css",
|
||||
"group": "Official",
|
||||
"active": "yes",
|
||||
"author": "jQuery Project",
|
||||
"license": "http://jquery.org/license"
|
||||
},
|
||||
{
|
||||
"theme_name": "trontastic",
|
||||
"theme_url": "http://code.jquery.com/ui/1.10.0/themes/trontastic/jquery-ui.css",
|
||||
"group": "Official",
|
||||
"active": "yes",
|
||||
"author": "jQuery Project",
|
||||
"license": "http://jquery.org/license"
|
||||
},
|
||||
{
|
||||
"theme_name": "ui-darkness",
|
||||
"theme_url": "http://code.jquery.com/ui/1.10.0/themes/ui-darkness/jquery-ui.css",
|
||||
"group": "Official",
|
||||
"active": "yes",
|
||||
"author": "jQuery Project",
|
||||
"license": "http://jquery.org/license"
|
||||
},
|
||||
{
|
||||
"theme_name": "ui-lightness",
|
||||
"theme_url": "http://code.jquery.com/ui/1.10.0/themes/ui-lightness/jquery-ui.css",
|
||||
"group": "Official",
|
||||
"active": "yes",
|
||||
"author": "jQuery Project",
|
||||
"license": "http://jquery.org/license"
|
||||
},
|
||||
{
|
||||
"theme_name": "vader",
|
||||
"theme_url": "http://code.jquery.com/ui/1.10.0/themes/vader/jquery-ui.css",
|
||||
"group": "Official",
|
||||
"active": "yes",
|
||||
"author": "jQuery Project",
|
||||
"license": "http://jquery.org/license"
|
||||
},
|
||||
|
||||
|
||||
{
|
||||
"theme_name": "aristo",
|
||||
"theme_url": "http://taitems.github.com/Aristo-jQuery-UI-Theme/css/Aristo/Aristo.css",
|
||||
"group": "3rd-party",
|
||||
"active": "yes",
|
||||
"author": "https://github.com/taitems/Aristo-jQuery-UI-Theme",
|
||||
"license": "MIT"
|
||||
},
|
||||
{
|
||||
"theme_name": "jquery-ui-bootstrap",
|
||||
"theme_url": "http://addyosmani.github.com/jquery-ui-bootstrap/css/custom-theme/jquery-ui-1.8.16.custom.css",
|
||||
"group": "3rd-party",
|
||||
"active": "yes",
|
||||
"author": "http://addyosmani.github.com/jquery-ui-bootstrap",
|
||||
"license": "Copyright 2012, Addy Osmani - Dual licensed under the MIT or GPL Version 2 licenses"
|
||||
},
|
||||
{
|
||||
"theme_name": "Absolution",
|
||||
"hosted_locally": "yes",
|
||||
"theme_url": "/lib/jquery-ui-1.10.0.custom/css/3rd-party/Absolution/absolution.css",
|
||||
"group": "3rd-party",
|
||||
"active": "yes",
|
||||
"author": "http://www.michaelvanderheeren.be/archives/382",
|
||||
"license": "https://github.com/michaelvanderheeren/Absolution/blob/master/README.md",
|
||||
"notes": "You are free to redistribute or change the theme. You can change the theme, but you should keep the references to contributors!"
|
||||
},
|
||||
{
|
||||
"theme_name": "Selene",
|
||||
"theme_url": "http://gravityonmars.github.com/Selene/css/ui-selene/jquery-ui-1.8.17.custom.css",
|
||||
"group": "3rd-party",
|
||||
"active": "yes",
|
||||
"author": "https://github.com/gravityonmars/Selene",
|
||||
"license": "MIT"
|
||||
},
|
||||
{
|
||||
"theme_name": "kiandra-delta",
|
||||
"theme_url": "http://kiandra.github.com/Delta-jQuery-UI-Theme/theme/jquery-ui.css",
|
||||
"group": "3rd-party",
|
||||
"active": "yes",
|
||||
"author": "https://github.com/kiandra/Delta-jQuery-UI-Theme",
|
||||
"license": "Dual licensed under the MIT or GPL Version 2 licenses."
|
||||
},
|
||||
|
||||
|
||||
{
|
||||
"theme_name": "arctic",
|
||||
"theme_url": "http://cdn.wijmo.com/themes/arctic/jquery-wijmo.css",
|
||||
"group": "Wijmo",
|
||||
"active": "yes",
|
||||
"author": "http://wijmo.com",
|
||||
"license": "http://wijmo.com/license"
|
||||
},
|
||||
{
|
||||
"theme_name": "midnight",
|
||||
"theme_url": "http://cdn.wijmo.com/themes/midnight/jquery-wijmo.css",
|
||||
"group": "Wijmo",
|
||||
"active": "yes",
|
||||
"author": "http://wijmo.com",
|
||||
"license": "http://wijmo.com/license"
|
||||
},
|
||||
{
|
||||
"theme_name": "rocket",
|
||||
"theme_url": "http://cdn.wijmo.com/themes/rocket/jquery-wijmo.css",
|
||||
"group": "Wijmo",
|
||||
"active": "yes",
|
||||
"author": "http://wijmo.com",
|
||||
"license": "http://wijmo.com/license"
|
||||
},
|
||||
{
|
||||
"theme_name": "cobalt",
|
||||
"theme_url": "http://cdn.wijmo.com/themes/cobalt/jquery-wijmo.css",
|
||||
"group": "Wijmo",
|
||||
"active": "yes",
|
||||
"author": "http://wijmo.com",
|
||||
"license": "http://wijmo.com/license"
|
||||
},
|
||||
{
|
||||
"theme_name": "sterling",
|
||||
"theme_url": "http://cdn.wijmo.com/themes/sterling/jquery-wijmo.css",
|
||||
"group": "Wijmo",
|
||||
"active": "yes",
|
||||
"author": "http://wijmo.com",
|
||||
"license": "http://wijmo.com/license"
|
||||
},
|
||||
{
|
||||
"theme_name": "metro",
|
||||
"theme_url": "http://cdn.wijmo.com/themes/metro/jquery-wijmo.css",
|
||||
"group": "Wijmo",
|
||||
"active": "yes",
|
||||
"author": "http://wijmo.com",
|
||||
"license": "http://wijmo.com/license"
|
||||
},
|
||||
{
|
||||
"theme_name": "metro-dark",
|
||||
"theme_url": "http://cdn.wijmo.com/themes/metro-dark/jquery-wijmo.css",
|
||||
"group": "Wijmo",
|
||||
"active": "yes",
|
||||
"author": "http://wijmo.com",
|
||||
"license": "http://wijmo.com/license"
|
||||
},
|
||||
{
|
||||
"theme_name": "bootstrap-wijmo",
|
||||
"theme_url": "http://cdn.wijmo.com/themes/bootstrap/jquery-ui.css",
|
||||
"group": "Wijmo",
|
||||
"active": "yes",
|
||||
"author": "http://addyosmani.github.com/jquery-ui-bootstrap",
|
||||
"license": "Copyright 2012, Addy Osmani - Dual licensed under the MIT or GPL Version 2 licenses"
|
||||
},
|
||||
{
|
||||
"theme_name": "aristo-wijmo",
|
||||
"theme_url": "http://cdn.wijmo.com/themes/aristo/jquery-wijmo.css",
|
||||
"group": "Wijmo",
|
||||
"active": "yes",
|
||||
"author": "http://wijmo.com",
|
||||
"license": "http://wijmo.com/license",
|
||||
"notes": "Based on the Aristo theme concept created by 280 North and Pinvoke (https://github.com/280north/aristo)"
|
||||
}
|
||||
]
|
||||
873
assets/vendor/tablesorter/docs/css/bootstrap.min.css
vendored
Normal file
873
assets/vendor/tablesorter/docs/css/bootstrap.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
96
assets/vendor/tablesorter/docs/css/jq.css
vendored
Normal file
96
assets/vendor/tablesorter/docs/css/jq.css
vendored
Normal file
@@ -0,0 +1,96 @@
|
||||
body,div,h1 {font-family:'trebuchet ms', verdana, arial;margin:0;padding:0;}
|
||||
body {background-color:#fff;color:#333;margin:0;padding:0;}
|
||||
h1,h2 {font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;margin:0;}
|
||||
h1 {font-size:large;font-weight:400;}
|
||||
h2 {color:#333;font-size:small;font-weight:400;}
|
||||
h3 {color:#444;}
|
||||
kbd {margin:0px 0.1em; padding:0.1em 0.6em;border-radius: 3px;border: 1px solid rgb(204, 204, 204);color: rgb(51, 51, 51);line-height: 1.4;font-family: Arial,Helvetica,sans-serif;font-size: 10px;display: inline-block;box-shadow: 0px 1px 0px rgba(0,0,0,0.2), inset 0px 0px 0px 2px #ffffff;background-color: rgb(247, 247, 247);-moz-box-shadow: 0 1px 0px rgba(0, 0, 0, 0.2), 0 0 0 2px #ffffff inset;-webkit-box-shadow: 0 1px 0px rgba(0, 0, 0, 0.2), 0 0 0 2px #ffffff inset;-moz-border-radius: 3px;-webkit-border-radius: 3px;text-shadow: 0 1px 0 #fff;}
|
||||
.demo {width:600px;margin:20px auto;}
|
||||
.demo h1,.demo h1 a {font-size:120%;text-align:center;text-decoration:none;color:#000;}
|
||||
.demo p,.center {text-align:center;}
|
||||
.demo table.tablesorter {font-size:14px;}
|
||||
table th {vertical-align:top;}
|
||||
#config th {text-shadow:none;}
|
||||
table td.info { background: #eee; }
|
||||
table.info {border:#000 1px solid;border-collapse:collapse;margin:10px 0 0 10px;}
|
||||
table.tablesorter table.info tbody th,table.tablesorter table.info td {border:#000 1px solid;}
|
||||
table.tablesorter table.info tbody th {background:#eee;}
|
||||
table.options {width:100%;}
|
||||
table.options pre {width:95%;}
|
||||
table.options .property, .setWidth {width:115px;}
|
||||
table.options .type {width:80px; }
|
||||
table.options .defaults {width:160px;}
|
||||
table.options .examples {width:60px;}
|
||||
table.compatibility { width: 50%; float: right; font-size: .8em; margin-left: 20px; }
|
||||
table.compatibility th,table.compatibility td { text-align: center; padding: 2px; }
|
||||
pre,#display {overflow-x:auto;padding:15px;border:1px solid #ddd;border-left-width:5px;}
|
||||
pre.lang-js, pre.lang-javascript {border-left-color: #f1bf26;}
|
||||
pre.lang-html {border-left-color: #ef6328;}
|
||||
pre.lang-css {border-left-color: #27aae2;}
|
||||
pre,#display {background-color:#eee;font-size:small;list-style:none;}
|
||||
pre.prettyprint {padding:5px;}
|
||||
code {background-color: #e6e6e6; padding: 1px 5px;}
|
||||
a code {text-decoration:underline;}
|
||||
pre.normal {background-color:transparent;border:none;border-left-width:0;overflow-x:auto;}
|
||||
#logo {background:url(images/jq.png);display:block;float:right;height:31px;margin-right:10px;margin-top:10px;width:110px;}
|
||||
#main {margin:0 20px 20px;padding:0 15px 15px 0;clear:both;}
|
||||
#content {padding:20px;}
|
||||
#busy {background-color:#e95555;border:1px ridge #ccc;color:#eee;display:none;padding:3px;position:absolute;right:7px;top:7px;}
|
||||
#start,#case,.bright {color:#007baa;}
|
||||
#demo strong {color:#a00;}
|
||||
hr {height:1px;}
|
||||
ul {list-style:square;padding-left:20px;}
|
||||
#banner {margin:20px 20px 5px 20px;padding:0;text-align:left;}
|
||||
#banner *,.demo h1,.demo h1 em {color:#232121;font-family:Georgia, Palatino, Times New Roman;font-size:30px;font-style:normal;font-weight:400;margin:0;padding:0;}
|
||||
#banner h1 {display:block;float:left;}
|
||||
#banner h1 em,.demo h1 em {color:#6cf;}
|
||||
#banner h2 {float:right;font-size:26px;margin:10px 10px -10px -10px;}
|
||||
#root #banner h2 { margin-right: 100px; }
|
||||
#banner h3 {clear:both;display:block;font-size:12px;margin-top:-20px;border-bottom:1px solid #888;}
|
||||
#banner a {display:block;font-size:14px;margin:5px 0 0;padding:10px 0 0;float:right;}
|
||||
.github-btn {border:0;overflow:hidden;vertical-align: middle;}
|
||||
a.external {background-image:url(../img/external.png);background-position:center right;background-repeat:no-repeat;padding-right:12px;}
|
||||
a.link {background-image:url(../img/link.png);background-position:center right;background-repeat:no-repeat;padding-right:12px;}
|
||||
form {font-size:10pt;margin-bottom:20px;width:auto;}
|
||||
form fieldset {padding:10px;text-align:left;width:140px;}
|
||||
div#main h1 {border-bottom:1px solid #cdcdcd;display:block;padding:4px 0 2px;}
|
||||
table#tablesorter-demo {margin: 10px 0 0 0;}
|
||||
table, p.small,.smallcode code {font-size:small;}
|
||||
p.small {padding-left: 25px;}
|
||||
.xsmall {font-size:11px;}
|
||||
p.tip em, div.tip em,.label-info {padding: 2px; background-color: #5bc0de; color: #fff; border-radius: .25em;}
|
||||
.label { padding: 0.1em 0.6em 0.1em; font-size: 75%; color: #fff; border-radius: .25em; }
|
||||
span.tip em, .label-success { background-color: #5cb85c; }
|
||||
span.tip.old em, .label-default { background-color: #999; }
|
||||
span.warn em, .label.alert { background-color: #d9534f; }
|
||||
.label.warning { background-color: #f0ad4e; }
|
||||
tr td.lookhere, span.lookhere { background-color: rgba(230,191,153,0.5); }
|
||||
div.ui-slider .ui-slider-handle { width: 0.8em; height: 0.8em; }
|
||||
div.digg {float: right;}
|
||||
.next-up { padding-top: 10px; font-size: 90%; }
|
||||
.narrow-block { width: 50%; margin: 50px auto; }
|
||||
.spacer { height: 800px; }
|
||||
.right { text-align:right; }
|
||||
#pager-demo th.remove { width: 20px; } /* pager demo */
|
||||
#pager-demo button.remove { width: 20px; height: 20px; font-size: 10px; color: #800; }
|
||||
.box { width: 48%; min-width: 300px; float: left; padding: 0 1%; }
|
||||
a.alert { color: #a00; padding: 0; }
|
||||
span.alert { padding: 1px 3px; }
|
||||
.hidden { display: none; }
|
||||
.results { color: red; }
|
||||
.clear { clear: both; }
|
||||
.bootstrap_buttons button { margin: 5px 0 0 0; }
|
||||
#main .ui-accordion-header a { font-size: 14px; }
|
||||
#main .ui-accordion-content { font-size: 14px; }
|
||||
.accordion { position: relative; }
|
||||
.accordion .accordion-link { position: absolute; right: 1%; margin-top: 16px; z-index: 1; width: 12px; height: 12px;}
|
||||
.accordion .accordion .accordion-link { margin-top: 12px; } /* nested accordion */
|
||||
.remark, .error { font-weight: bold; color: red; font-size: 18px; }
|
||||
table th.nobold { font-weight: normal; }
|
||||
table th a { text-decoration: underline; color: #000; }
|
||||
#group .ui-slider,#align .ui-slider { width: 100px; height: 3px; font-size: 0.8em; display: inline-block; margin-left: 10px; }
|
||||
#group .demo-label,#align .demo-label { display: inline-block; min-width: 120px; }
|
||||
#align .demo-label { display: inline-block; min-width: 150px; }
|
||||
@media all and (max-width: 650px) {
|
||||
table.compatibility { float: none; }
|
||||
}
|
||||
72
assets/vendor/tablesorter/docs/css/menu.css
vendored
Normal file
72
assets/vendor/tablesorter/docs/css/menu.css
vendored
Normal file
@@ -0,0 +1,72 @@
|
||||
/* top menu - http://codepen.io/jetpacmonkey/pen/ktIJz */
|
||||
*{box-sizing:border-box;}
|
||||
html,body{min-height:100%;}
|
||||
a{text-decoration:none;}
|
||||
#main{transition:margin .3s ease;}
|
||||
.main-nav{position:fixed;top:0;width:0;height:100%;background:#3B3B3B;color:#fff;overflow:hidden;transition:width .3s ease;}
|
||||
.main-nav h2{color:#fff;font-size:20px;margin:0 0 15px 30px;}
|
||||
.main-nav em{color:#6cf;font-style:normal;}
|
||||
.main-nav .page-links a{display:block;background:linear-gradient(#3e3e3e,#383838);border-top:1px solid #484848;border-bottom:1px solid #2E2E2E;color:#FFF;white-space:nowrap;text-overflow:ellipsis;padding:10px;}
|
||||
.main-nav a:hover,.main-nav a:focus{background:linear-gradient(#484848,#383838);color:#FFF;text-decoration:none;}
|
||||
#main-nav-check:checked + #main-nav{width:250px;}
|
||||
#main-nav-check:checked ~ #main{margin-left:250px;overflow:hidden;}
|
||||
#main-nav-check:checked ~ #main .main-header{opacity:1;}
|
||||
#root #main-nav-check:checked ~ #main #banner h1{padding-left:0;}
|
||||
#root p{margin:1em 0;}
|
||||
#root #banner{margin:0;}
|
||||
#root #banner h1{padding-left:30px;border:0;}
|
||||
#root #banner h2{margin-right:100px;}
|
||||
#root div#main h1,#root div#main h3{line-height:normal;margin:0;}
|
||||
#root #main{margin:0;padding:0 15px 15px;}
|
||||
.page-search{padding:10px;}
|
||||
.search-prev,.search-next,.search-clear{font-size:11px;padding:6px 3px;}
|
||||
.input-group-btn{width:auto;}
|
||||
.input-group input.search.form-control{width:100%;font-size:14px;border-radius:4px 0 0 4px!important;-webkit-border-radius:4px 0 0 4px!important;background-clip:padding-box;}
|
||||
.status{position:absolute;right:60px;top:1em;background:#FFF;color:#555;font-size:9px;}
|
||||
.status.busy{width:20px;height:20px;margin-top:-4px;background:no-repeat center center;background-color:#fff!important;background-image:url(../../addons/pager/icons/loading.gif);text-indent:100%;white-space:nowrap;overflow:hidden;}
|
||||
.status.label-danger{color:#FFF;background-color:#d9534f;cursor:pointer;}
|
||||
.highlight{background:#FF0;color:#000;cursor:pointer;padding:0 3px;}
|
||||
.highlight.selected{background:orange;}
|
||||
.message{margin:2px auto;}
|
||||
/* http://codepen.io/pedrocampos/pen/gufrx */
|
||||
.main-header{background:#3B3B3B;color:#fff;text-align:center;vertical-align:middle;text-shadow:#222 0 -1px 1px;position:fixed;width:25px;height:25px;top:10px;left:10px;transition:all .3s ease;border-radius:5px;-webkit-border-radius:5px;background-clip:padding-box;z-index:10;cursor:pointer;opacity:.5;filter:alpha(opacity=50);padding:5px;}
|
||||
.main-header:hover{opacity:1;filter:alpha(opacity=100);}
|
||||
.main-header span{position:relative;top:7px;-webkit-transition-duration:0;-moz-transition-duration:0;-o-transition-duration:0;transition-duration:0;-webkit-transition-delay:.2s;-moz-transition-delay:.2s;-o-transition-delay:.2s;transition-delay:.2s;margin:0 auto;}
|
||||
.main-header span:before,.main-header span:after{position:absolute;content:'';}
|
||||
.main-header span,.main-header span:before,.main-header span:after{width:15px;height:2px;background-color:#fff;display:block;}
|
||||
.main-header span:before{margin-top:-5px;-webkit-transition-property:margin, 0;-moz-transition-property:margin, 0;-o-transition-property:margin, 0;transition-property:margin, transform;-webkit-transition-duration:.2s;-moz-transition-duration:.2s;-o-transition-duration:.2s;transition-duration:.2s;-webkit-transition-delay:.2s, 0;-moz-transition-delay:.2s, 0;-o-transition-delay:.2s, 0;transition-delay:.2s, 0;}
|
||||
.main-header span:after{margin-top:5px;-webkit-transition-property:margin, 0;-webkit-transition-duration:.2s;-moz-transition-duration:.2s;-o-transition-duration:.2s;transition-duration:.2s;-webkit-transition-delay:.2s, 0;-moz-transition-delay:.2s, 0;-o-transition-delay:.2s, 0;transition-delay:.2s, 0;}
|
||||
#main-nav-check:checked ~ #main .main-header span{background-color:rgba(0,0,0,0.0);-webkit-transition-delay:.2s;-moz-transition-delay:.2s;-o-transition-delay:.2s;transition-delay:.2s;}
|
||||
#main-nav-check:checked ~ #main .main-header span:before{margin-top:0;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);-o-transform:rotate(45deg);transform:rotate(45deg);-webkit-transition-delay:0 .2s;-moz-transition-delay:0 .2s;-o-transition-delay:0 .2s;transition-delay:0 .2s;}
|
||||
#main-nav-check:checked ~ #main .main-header span:after{margin-top:0;-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-ms-transform:rotate(-45deg);-o-transform:rotate(-45deg);transform:rotate(-45deg);-webkit-transition-delay:0 .2s;-moz-transition-delay:0 .2s;-o-transition-delay:0 .2s;transition-delay:0 .2s;}
|
||||
/* http://www.cssflow.com/snippets/toggle-switches */
|
||||
.search-options{padding-left:6px;}
|
||||
.switch{position:relative;display:inline-block;height:26px;width:100px;margin-top:5px;background:rgba(0,0,0,0.25);border-radius:3px;-webkit-border-radius:3px;background-clip:padding-box;-webkit-box-shadow:inset 0 1px 3px rgba(0,0,0,0.3), 0 1px rgba(255,255,255,0.1);box-shadow:inset 0 1px 3px rgba(0,0,0,0.3), 0 1px rgba(255,255,255,0.1);}
|
||||
.switch-label{position:relative;z-index:2;float:left;width:48px;line-height:26px;font-size:11px;color:rgba(255,255,255,0.35);text-align:center;text-shadow:0 1px 1px rgba(0,0,0,0.45);cursor:pointer;}
|
||||
.switch-label:active{font-weight:700;}
|
||||
.switch-label-off{padding-left:2px;}
|
||||
.switch-label-on{padding-right:2px;}
|
||||
.switch-input:checked + .switch-label{font-weight:700;color:#ddd;text-shadow:0 1px rgba(128,128,128,0.25);-webkit-transition:.15s ease-out;-moz-transition:.15s ease-out;-o-transition:.15s ease-out;transition:.15s ease-out;}
|
||||
.switch-selection{display:block;position:absolute;z-index:1;top:2px;left:2px;width:48px;height:22px;border-radius:3px;-webkit-border-radius:3px;background-clip:padding-box;-webkit-transition:left .15s ease-out;-moz-transition:left .15s ease-out;-o-transition:left .15s ease-out;transition:left .15s ease-out;}
|
||||
.main-nav-check,.switch-input{display:none;}
|
||||
.switch-selection-right{left:50px;} /* separated from next line or IE ignores it */
|
||||
.switch-input:checked + .switch-label-on ~ .switch-selection{left:50px;}
|
||||
.glyphicon-question-sign{top:-6px;}
|
||||
.glyphicon-question-sign:before{color: #666;text-shadow:#222 0 -1px 1px;}
|
||||
.glyphicon-question-sign:before:hover{color: #357ebd;}
|
||||
/* tipsy */
|
||||
.tipsy{font-size:12px;position:absolute;z-index:100000;padding:5px;}
|
||||
.tipsy-inner{background-color:#000;color:#FFF;max-width:250px;text-align:center;border-radius:3px;-moz-border-radius:3px;-webkit-border-radius:3px;padding:5px 8px 4px;}
|
||||
.tipsy-arrow{position:absolute;width:0;height:0;line-height:0;border:5px dashed #000;}
|
||||
.tipsy-arrow-n{border-bottom-color:#000;}
|
||||
.tipsy-arrow-s{border-top-color:#000;}
|
||||
.tipsy-arrow-e{border-left-color:#000;}
|
||||
.tipsy-arrow-w{border-right-color:#000;}
|
||||
.tipsy-n .tipsy-arrow{top:0;left:50%;margin-left:-5px;border-bottom-style:solid;border-top:none;border-left-color:transparent;border-right-color:transparent;}
|
||||
.tipsy-nw .tipsy-arrow{top:0;left:10px;border-bottom-style:solid;border-top:none;border-left-color:transparent;border-right-color:transparent;}
|
||||
.tipsy-ne .tipsy-arrow{top:0;right:10px;border-bottom-style:solid;border-top:none;border-left-color:transparent;border-right-color:transparent;}
|
||||
.tipsy-s .tipsy-arrow{bottom:0;left:50%;margin-left:-5px;border-top-style:solid;border-bottom:none;border-left-color:transparent;border-right-color:transparent;}
|
||||
.tipsy-sw .tipsy-arrow{bottom:0;left:10px;border-top-style:solid;border-bottom:none;border-left-color:transparent;border-right-color:transparent;}
|
||||
.tipsy-se .tipsy-arrow{bottom:0;right:10px;border-top-style:solid;border-bottom:none;border-left-color:transparent;border-right-color:transparent;}
|
||||
.tipsy-e .tipsy-arrow{right:0;top:50%;margin-top:-5px;border-left-style:solid;border-right:none;border-top-color:transparent;border-bottom-color:transparent;}
|
||||
.tipsy-w .tipsy-arrow{left:0;top:50%;margin-top:-5px;border-right-style:solid;border-left:none;border-top-color:transparent;border-bottom-color:transparent;}
|
||||
55
assets/vendor/tablesorter/docs/css/prettify.css
vendored
Normal file
55
assets/vendor/tablesorter/docs/css/prettify.css
vendored
Normal file
@@ -0,0 +1,55 @@
|
||||
/* Hemisu Light */
|
||||
/* Original theme - http://noahfrederick.com/vim-color-scheme-hemisu/ */
|
||||
/* Pretty printing styles. Used with prettify.js. */
|
||||
/* SPAN elements with the classes below are added by prettyprint. */
|
||||
/* plain text */
|
||||
.pln { color: #111111; }
|
||||
|
||||
@media screen {
|
||||
.str { color: #739200; } /* string content */
|
||||
.kwd { color: #739200; } /* a keyword */
|
||||
.com { color: #888888; } /* a comment */
|
||||
.typ { color: #ff0055; } /* a type name */
|
||||
.lit { color: #538192; } /* a literal value */
|
||||
.pun { color: #111111; } /* punctuation */
|
||||
.opn { color: #111111; } /* lisp open bracket */
|
||||
.clo { color: #111111; } /* lisp close bracket */
|
||||
.tag { color: #111111; } /* a markup tag name */
|
||||
.atn { color: #739200; } /* a markup attribute name */
|
||||
.atv { color: #ff0055; } /* a markup attribute value */
|
||||
.dec { color: #111111; } /* a declaration */
|
||||
.var { color: #111111; } /* a variable name */
|
||||
.fun { color: #538192; } /* a function name */
|
||||
}
|
||||
/* Use higher contrast and text-weight for printable form. */
|
||||
@media print, projection {
|
||||
.str { color: #060; }
|
||||
.kwd { color: #006; font-weight: bold; }
|
||||
.com { color: #600; font-style: italic; }
|
||||
.typ { color: #404; font-weight: bold; }
|
||||
.lit { color: #044; }
|
||||
.pun, .opn, .clo { color: #440; }
|
||||
.tag { color: #006; font-weight: bold; }
|
||||
.atn { color: #404; }
|
||||
.atv { color: #060; }
|
||||
}
|
||||
/* Style */
|
||||
pre.prettyprint {
|
||||
font-family: Menlo, Monaco, Consolas, monospace;
|
||||
font-size: 12px;
|
||||
line-height: 1.5;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
/* Specify class=linenums on a pre to get line numbering */
|
||||
ol.linenums { margin-top: 0; margin-bottom: 0; }
|
||||
|
||||
/* IE indents via margin-left */
|
||||
li.L0, li.L1, li.L2, li.L3, li.L4, li.L5, li.L6, li.L7, li.L8, li.L9 {
|
||||
/* */
|
||||
}
|
||||
|
||||
/* Alternate shading for lines */
|
||||
li.L1, li.L3, li.L5, li.L7, li.L9 {
|
||||
/* */
|
||||
}
|
||||
16
assets/vendor/tablesorter/docs/css/tipsy.css
vendored
Normal file
16
assets/vendor/tablesorter/docs/css/tipsy.css
vendored
Normal file
@@ -0,0 +1,16 @@
|
||||
/* tipsy */
|
||||
.tipsy{font-size:12px;position:absolute;z-index:100000;padding:5px;}
|
||||
.tipsy-inner{background-color:#000;color:#FFF;max-width:250px;text-align:center;border-radius:3px;-moz-border-radius:3px;-webkit-border-radius:3px;padding:5px 8px 4px;}
|
||||
.tipsy-arrow{position:absolute;width:0;height:0;line-height:0;border:5px dashed #000;}
|
||||
.tipsy-arrow-n{border-bottom-color:#000;}
|
||||
.tipsy-arrow-s{border-top-color:#000;}
|
||||
.tipsy-arrow-e{border-left-color:#000;}
|
||||
.tipsy-arrow-w{border-right-color:#000;}
|
||||
.tipsy-n .tipsy-arrow{top:0;left:50%;margin-left:-5px;border-bottom-style:solid;border-top:none;border-left-color:transparent;border-right-color:transparent;}
|
||||
.tipsy-nw .tipsy-arrow{top:0;left:10px;border-bottom-style:solid;border-top:none;border-left-color:transparent;border-right-color:transparent;}
|
||||
.tipsy-ne .tipsy-arrow{top:0;right:10px;border-bottom-style:solid;border-top:none;border-left-color:transparent;border-right-color:transparent;}
|
||||
.tipsy-s .tipsy-arrow{bottom:0;left:50%;margin-left:-5px;border-top-style:solid;border-bottom:none;border-left-color:transparent;border-right-color:transparent;}
|
||||
.tipsy-sw .tipsy-arrow{bottom:0;left:10px;border-top-style:solid;border-bottom:none;border-left-color:transparent;border-right-color:transparent;}
|
||||
.tipsy-se .tipsy-arrow{bottom:0;right:10px;border-top-style:solid;border-bottom:none;border-left-color:transparent;border-right-color:transparent;}
|
||||
.tipsy-e .tipsy-arrow{right:0;top:50%;margin-top:-5px;border-left-style:solid;border-right:none;border-top-color:transparent;border-bottom-color:transparent;}
|
||||
.tipsy-w .tipsy-arrow{left:0;top:50%;margin-top:-5px;border-right-style:solid;border-left:none;border-top-color:transparent;border-bottom-color:transparent;}
|
||||
144
assets/vendor/tablesorter/docs/example-add-rows.html
vendored
Normal file
144
assets/vendor/tablesorter/docs/example-add-rows.html
vendored
Normal file
@@ -0,0 +1,144 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery plugin: Tablesorter 2.0 - Adding a table row</title>
|
||||
|
||||
<!-- jQuery -->
|
||||
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
|
||||
|
||||
<!-- Demo stuff -->
|
||||
<link rel="stylesheet" href="css/jq.css">
|
||||
<link href="css/prettify.css" rel="stylesheet">
|
||||
<script src="js/prettify.js"></script>
|
||||
<script src="js/docs.js"></script>
|
||||
|
||||
<!-- Tablesorter: required -->
|
||||
<link rel="stylesheet" href="../css/theme.blue.css">
|
||||
<script src="../js/jquery.tablesorter.js"></script>
|
||||
|
||||
<style>
|
||||
.discount { cursor: pointer; }
|
||||
</style>
|
||||
|
||||
<script id="js">$(function() {
|
||||
|
||||
$("table").tablesorter({ theme : 'blue', sortList: [[3,1],[0,0]] });
|
||||
|
||||
// Add two new rows using the "addRows" method
|
||||
// the "update" method doesn't work here because not all
|
||||
// rows are present in the table when the pager is applied
|
||||
$('button').click(function(){
|
||||
// add two rows
|
||||
var row = '<tr><td>Frank</td><td>Smith</td><td>53</td><td>$39.95</td><td>22%</td><td>Mar 22, 2011 9:33 AM</td></tr>' +
|
||||
'<tr><td>Inigo</td><td>Montoya</td><td>34</td><td>$19.99</td><td>15%</td><td>Sep 25, 1987 12:00PM</td></tr>',
|
||||
$row = $(row),
|
||||
// resort table using the current sort; set to false to prevent resort, otherwise
|
||||
// any other value in resort will automatically trigger the table resort.
|
||||
resort = true;
|
||||
$('table')
|
||||
.find('tbody').append($row)
|
||||
.trigger('addRows', [$row, resort]);
|
||||
return false;
|
||||
});
|
||||
|
||||
});</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="banner">
|
||||
<h1>table<em>sorter</em></h1>
|
||||
<h2>Adding table rows</h2>
|
||||
<h3>Flexible client-side table sorting</h3>
|
||||
<a href="index.html">Back to documentation</a>
|
||||
</div>
|
||||
|
||||
<div id="main">
|
||||
|
||||
<p class="tip">
|
||||
<em>NOTE!</em>
|
||||
<ul>
|
||||
<li>Click on the [ Add Rows ] button to add two new rows.</li>
|
||||
<li>The "addRows" method was added in version 2.0.16, and is not part of the original plugin.</li>
|
||||
<li>This example could have used the "update" method to add rows, but to remove rows only the "update" method works.</li>
|
||||
<li>This method is better used for the <a href="example-pager.html">pager plugin</a> when not all of the rows are displayed.</li>
|
||||
</ul>
|
||||
</p>
|
||||
|
||||
<h1>Demo</h1>
|
||||
<br>
|
||||
<button type="button">Add Rows</button>
|
||||
<br>
|
||||
<div id="demo"><table class="tablesorter">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>First Name</th>
|
||||
<th>Last Name</th>
|
||||
<th>Age</th>
|
||||
<th>Total</th>
|
||||
<th>Discount</th>
|
||||
<th>Date</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Peter</td>
|
||||
<td>Parker</td>
|
||||
<td>28</td>
|
||||
<td class="discount">$9.99</td>
|
||||
<td>20%</td>
|
||||
<td>Jul 6, 2006 8:14 AM</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>John</td>
|
||||
<td>Hood</td>
|
||||
<td>33</td>
|
||||
<td class="discount">$19.99</td>
|
||||
<td>25%</td>
|
||||
<td>Dec 10, 2002 5:14 AM</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Clark</td>
|
||||
<td>Kent</td>
|
||||
<td>18</td>
|
||||
<td class="discount">$15.89</td>
|
||||
<td>44%</td>
|
||||
<td>Jan 12, 2003 11:14 AM</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Bruce</td>
|
||||
<td>Almighty</td>
|
||||
<td>45</td>
|
||||
<td class="discount">$153.19</td>
|
||||
<td>44%</td>
|
||||
<td>Jan 18, 2001 9:12 AM</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Bruce</td>
|
||||
<td>Evans</td>
|
||||
<td>22</td>
|
||||
<td class="discount">$13.19</td>
|
||||
<td>11%</td>
|
||||
<td>Jan 18, 2007 9:12 AM</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table></div>
|
||||
|
||||
<h1>Javascript</h1>
|
||||
<div id="javascript">
|
||||
<pre class="prettyprint lang-javascript"></pre>
|
||||
</div>
|
||||
<h1>HTML</h1>
|
||||
<div id="html">
|
||||
<pre class="prettyprint lang-html"></pre>
|
||||
</div>
|
||||
|
||||
<div class="next-up">
|
||||
<hr />
|
||||
Next up: <a href="example-update-all.html">Update an entire table column (thead and tbody) ››</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
138
assets/vendor/tablesorter/docs/example-ajax.html
vendored
Normal file
138
assets/vendor/tablesorter/docs/example-ajax.html
vendored
Normal file
@@ -0,0 +1,138 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery plugin: Tablesorter 2.0 - Appending table data with ajax</title>
|
||||
|
||||
<!-- jQuery -->
|
||||
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
|
||||
|
||||
<!-- Demo stuff -->
|
||||
<link rel="stylesheet" href="css/jq.css">
|
||||
<link href="css/prettify.css" rel="stylesheet">
|
||||
<script src="js/prettify.js"></script>
|
||||
<script src="js/docs.js"></script>
|
||||
|
||||
<!-- Tablesorter: required -->
|
||||
<link rel="stylesheet" href="../css/theme.blue.css">
|
||||
<script src="../js/jquery.tablesorter.js"></script>
|
||||
|
||||
<script id="js">$(function() {
|
||||
|
||||
$("table").tablesorter({ theme : 'blue' });
|
||||
|
||||
$("#ajax-append").click(function() {
|
||||
|
||||
$.get("assets/ajax-content.html", function(html) {
|
||||
|
||||
// append the "ajax'd" data to the table body
|
||||
$("table tbody").append(html);
|
||||
|
||||
// let the plugin know that we made a update
|
||||
// the resort flag set to anything BUT false (no quotes) will trigger an automatic
|
||||
// table resort using the current sort
|
||||
var resort = true;
|
||||
$("table").trigger("update", [resort]);
|
||||
|
||||
// triggering the "update" function will resort the table using the current sort; since version 2.0.14
|
||||
// use the following code to change the sort; set sorting column and direction, this will sort on the first and third column
|
||||
// var sorting = [[2,1],[0,0]];
|
||||
// $("table").trigger("sorton", [sorting]);
|
||||
});
|
||||
|
||||
return false;
|
||||
});
|
||||
|
||||
});</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="banner">
|
||||
<h1>table<em>sorter</em></h1>
|
||||
<h2>Appending table data with ajax</h2>
|
||||
<h3>Flexible client-side table sorting</h3>
|
||||
<a href="index.html">Back to documentation</a>
|
||||
</div>
|
||||
|
||||
<div id="main">
|
||||
|
||||
<h1>Demo</h1>
|
||||
<div id="demo"><table class="tablesorter">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>First Name</th>
|
||||
<th>Last Name</th>
|
||||
<th>Age</th>
|
||||
<th>Total</th>
|
||||
<th>Discount</th>
|
||||
<th>Date</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Peter</td>
|
||||
<td>Parker</td>
|
||||
<td>28</td>
|
||||
<td>$9.99</td>
|
||||
<td>20%</td>
|
||||
<td>Jul 6, 2006 8:14 AM</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>John</td>
|
||||
<td>Hood</td>
|
||||
<td>33</td>
|
||||
<td>$19.99</td>
|
||||
<td>25%</td>
|
||||
<td>Dec 10, 2002 5:14 AM</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Clark</td>
|
||||
<td>Kent</td>
|
||||
<td>18</td>
|
||||
<td>$15.89</td>
|
||||
<td>44%</td>
|
||||
<td>Jan 12, 2003 11:14 AM</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Bruce</td>
|
||||
<td>Almighty</td>
|
||||
<td>45</td>
|
||||
<td>$153.19</td>
|
||||
<td>44%</td>
|
||||
<td>Jan 18, 2001 9:12 AM</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Bruce</td>
|
||||
<td>Evans</td>
|
||||
<td>22</td>
|
||||
<td>$13.19</td>
|
||||
<td>11%</td>
|
||||
<td>Jan 18, 2007 9:12 AM</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<a href="#" id="ajax-append">Append new table data</a></div>
|
||||
|
||||
<p class="tip">
|
||||
<em>NOTE!</em> With the latest version of jQuery, this demo will only work when the ajax page is hosted online.
|
||||
</p>
|
||||
|
||||
<h1>Javascript</h1>
|
||||
<div id="javascript">
|
||||
<pre class="prettyprint lang-javascript"></pre>
|
||||
</div>
|
||||
<h1>HTML</h1>
|
||||
<div id="html">
|
||||
<pre class="prettyprint lang-html"></pre>
|
||||
</div>
|
||||
|
||||
<div class="next-up">
|
||||
<hr />
|
||||
Next up: <a href="example-add-rows.html">Adding a table row ››</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
131
assets/vendor/tablesorter/docs/example-apply-widget.html
vendored
Normal file
131
assets/vendor/tablesorter/docs/example-apply-widget.html
vendored
Normal file
@@ -0,0 +1,131 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery plugin: Tablesorter 2.0 - applyWidgetId vs. applyWidgets</title>
|
||||
|
||||
<!-- jQuery -->
|
||||
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
|
||||
|
||||
<!-- Demo stuff -->
|
||||
<link rel="stylesheet" href="css/jq.css">
|
||||
<link href="css/prettify.css" rel="stylesheet">
|
||||
<script src="js/prettify.js"></script>
|
||||
<script src="js/docs.js"></script>
|
||||
|
||||
<!-- Tablesorter: required -->
|
||||
<link rel="stylesheet" href="../css/theme.blue.css">
|
||||
<script src="../js/jquery.tablesorter.js"></script>
|
||||
|
||||
<script id="js">$(function() {
|
||||
|
||||
// call the tablesorter plugin
|
||||
$("table").tablesorter({ theme : 'blue' });
|
||||
|
||||
$("button.applyid").click(function(){
|
||||
// This method needs to be applied after each sort
|
||||
$('table').trigger('applyWidgetId', ['zebra']);
|
||||
return false;
|
||||
});
|
||||
|
||||
$("button.apply").click(function(){
|
||||
// Update the list of widgets to apply to the table (add or remove)
|
||||
$("table").data("tablesorter").widgets = ["zebra"];
|
||||
// This method applies the widget - no need to keep updating
|
||||
$('table').trigger('applyWidgets');
|
||||
return false;
|
||||
});
|
||||
|
||||
});</script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="banner">
|
||||
<h1>table<em>sorter</em></h1>
|
||||
<h2>applyWidgetId versus applyWidgets</h2>
|
||||
<h3>Flexible client-side table sorting</h3>
|
||||
<a href="index.html">Back to documentation</a>
|
||||
</div>
|
||||
<div id="main">
|
||||
|
||||
<p class="tip">
|
||||
<em>NOTE!</em> Click on [ Apply Widget Id ], then sort the table a few times... then click on [ Apply Widgets ] and sort again (these methods <strong>are</strong> part of the original plugin).
|
||||
</p>
|
||||
|
||||
<h1>Demo</h1>
|
||||
<br>
|
||||
<div id="demo"><button type="button" class="applyid">Apply Widget Id</button> <button type="button" class="apply">Apply Widgets</button>
|
||||
|
||||
<table class="tablesorter">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>First Name</th>
|
||||
<th>Last Name</th>
|
||||
<th>Age</th>
|
||||
<th>Total</th>
|
||||
<th>Discount</th>
|
||||
<th>Date</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Peter</td>
|
||||
<td>Parker</td>
|
||||
<td>28</td>
|
||||
<td>$9.99</td>
|
||||
<td>20%</td>
|
||||
<td>Jul 6, 2006 8:14 AM</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>John</td>
|
||||
<td>Hood</td>
|
||||
<td>33</td>
|
||||
<td>$19.99</td>
|
||||
<td>25%</td>
|
||||
<td>Dec 10, 2002 5:14 AM</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Clark</td>
|
||||
<td>Kent</td>
|
||||
<td>18</td>
|
||||
<td>$15.89</td>
|
||||
<td>44%</td>
|
||||
<td>Jan 12, 2003 11:14 AM</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Bruce</td>
|
||||
<td>Almighty</td>
|
||||
<td>45</td>
|
||||
<td>$153.19</td>
|
||||
<td>44%</td>
|
||||
<td>Jan 18, 2001 9:12 AM</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Bruce</td>
|
||||
<td>Evans</td>
|
||||
<td>22</td>
|
||||
<td>$13.19</td>
|
||||
<td>11%</td>
|
||||
<td>Jan 18, 2007 9:12 AM</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table></div>
|
||||
|
||||
<h1>Javascript</h1>
|
||||
<div id="javascript">
|
||||
<pre class="prettyprint lang-javascript"></pre>
|
||||
</div>
|
||||
<h1>HTML</h1>
|
||||
<div id="html">
|
||||
<pre class="prettyprint lang-html"></pre>
|
||||
</div>
|
||||
|
||||
<div class="next-up">
|
||||
<hr />
|
||||
Next up: <a href="example-widget-columns.html">Columns widget ››</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
442
assets/vendor/tablesorter/docs/example-child-rows-filtered.html
vendored
Normal file
442
assets/vendor/tablesorter/docs/example-child-rows-filtered.html
vendored
Normal file
@@ -0,0 +1,442 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery plugin: Tablesorter 2.0 - Child Rows with Filter Widget</title>
|
||||
|
||||
<!-- jQuery -->
|
||||
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
|
||||
|
||||
<!-- Demo stuff -->
|
||||
<link rel="stylesheet" href="css/jq.css">
|
||||
<link href="css/prettify.css" rel="stylesheet">
|
||||
<script src="js/prettify.js"></script>
|
||||
<script src="js/docs.js"></script>
|
||||
|
||||
<!-- Tablesorter: required -->
|
||||
<link rel="stylesheet" href="../css/theme.blue.css">
|
||||
<script src="../js/jquery.tablesorter.js"></script>
|
||||
<script src="../js/jquery.tablesorter.widgets.js"></script>
|
||||
|
||||
<script id="js">$(function() {
|
||||
|
||||
$(".tablesorter")
|
||||
.tablesorter({
|
||||
theme : 'blue',
|
||||
// this is the default setting
|
||||
cssChildRow: "tablesorter-childRow",
|
||||
|
||||
// initialize zebra and filter widgets
|
||||
widgets: ["zebra", "filter"],
|
||||
|
||||
widgetOptions: {
|
||||
// include child row content while filtering, if true
|
||||
filter_childRows : true,
|
||||
// class name applied to filter row and each input
|
||||
filter_cssFilter : 'tablesorter-filter',
|
||||
// search from beginning
|
||||
filter_startsWith : false,
|
||||
// Set this option to false to make the searches case sensitive
|
||||
filter_ignoreCase : true
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
// hide child rows
|
||||
$('.tablesorter-childRow td').hide();
|
||||
|
||||
// Toggle child row content (td), not hiding the row since we are using rowspan
|
||||
// Using delegate because the pager plugin rebuilds the table after each page change
|
||||
// "delegate" works in jQuery 1.4.2+; use "live" back to v1.3; for older jQuery - SOL
|
||||
$('.tablesorter').delegate('.toggle', 'click' ,function(){
|
||||
|
||||
// use "nextUntil" to toggle multiple child rows
|
||||
// toggle table cells instead of the row
|
||||
$(this).closest('tr').nextUntil('tr:not(.tablesorter-childRow)').find('td').toggle();
|
||||
|
||||
return false;
|
||||
});
|
||||
|
||||
// Toggle widgetFilterChildRows option
|
||||
$('button.toggle-option').click(function(){
|
||||
var c = $('.tablesorter')[0].config.widgetOptions,
|
||||
o = !c.filter_childRows;
|
||||
c.filter_childRows = o;
|
||||
$('.state').html(o.toString());
|
||||
// update filter; include false parameter to force a new search
|
||||
$('table').trigger('search', false);
|
||||
return false;
|
||||
});
|
||||
|
||||
});</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="banner">
|
||||
<h1>table<em>sorter</em></h1>
|
||||
<h2>Child Rows with Filter Widget</h2>
|
||||
<h3>Flexible client-side table sorting</h3>
|
||||
<a href="index.html">Back to documentation</a>
|
||||
</div>
|
||||
|
||||
<div id="main">
|
||||
|
||||
<p class="tip">
|
||||
<em>NOTE!</em>
|
||||
<ul>
|
||||
<li>Click the link in the Order # column to reveal the hidden child row cells (<a href="http://www.pengoworks.com/workshop/jquery/tablesorter/tablesorter.htm">original demo</a>). This option is available in the original plugin.</li>
|
||||
<li>The filter widget will work with the original tablesorter plugin, just include the jquery.tablesorter.widget.js file and initialize the widget as seen below.</li>
|
||||
<li>Combining the filter widget and pager plugin will not work as expected.</li>
|
||||
</ul>
|
||||
</p>
|
||||
|
||||
<h1>Demo</h1>
|
||||
<br>
|
||||
<div id="demo"><button type="button" class="toggle-option">Toggle Child Row Content</button> : <span class="state">true</span>
|
||||
|
||||
<ul>
|
||||
<li>If true, the child row content is included in ALL filters. Enter "cal" (california) in any column filter and the same rows show up.</li>
|
||||
<li>When false, child row content is ignored. Enter "cal" and no rows will be found.</li>
|
||||
</ul>
|
||||
|
||||
<table class="tablesorter">
|
||||
<colgroup>
|
||||
<col width="85" />
|
||||
<col width="250" />
|
||||
<col width="100" />
|
||||
<col width="90" />
|
||||
<col width="70" />
|
||||
</colgroup>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Order #</th>
|
||||
<th>Customer</th>
|
||||
<th>PO</th>
|
||||
<th>Date</th>
|
||||
<th>Total</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<!-- First row expanded to reveal the layout -->
|
||||
<tr>
|
||||
<td rowspan="2"> <!-- rowspan="2" makes the table look nicer -->
|
||||
<a href="#" class="toggle">SO71774</a> <!-- link to toggle view of the child row -->
|
||||
</td>
|
||||
<td>Good Toys</td>
|
||||
<td>PO348186287</td>
|
||||
<td>Jul 20, 2007</td>
|
||||
<td>$972.78</td>
|
||||
</tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>99700 Bell Road<br>Auburn, California 95603</div></td></tr>
|
||||
<tr><td rowspan="2"><a href="#" class="toggle">SO71775</a></td><td>Cycle Clearance</td><td>PO58159451</td><td>May 6, 2007</td><td>$2,313.13</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>2255 254th Avenue Se<br>Albany, Oregon 97321</div></td></tr>
|
||||
<tr><td rowspan="2"><a href="#" class="toggle">SO71776</a></td><td>West Side Mart</td><td>PO19952192051</td><td>May 12, 2007</td><td>$87.09</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>251 The Metro Center<br>Wokingham, England RG41 1QW</div></td></tr>
|
||||
<tr><td rowspan="3"><a href="#" class="toggle">SO71777</a></td><td>Demand Distributors</td><td>PO20097113391</td><td>Apr 26, 2007</td><td>$1,267.82</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Comment</div><div>Please send ATTN: Judy</div></td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>25102 Springwater<br>Wenatchee, Washington 98801</div></td></tr>
|
||||
<tr><td rowspan="2"><a href="#" class="toggle">SO71778</a></td><td>Purchase Mart</td><td>PO19894146890</td><td>Apr 18, 2007</td><td>$1,503.98</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>Wrentham Village<br>Wrentham, Massachusetts 02093</div></td></tr>
|
||||
<tr><td rowspan="2"><a href="#" class="toggle">SO71779</a></td><td>Initial Bike Company</td><td>PO19633118218</td><td>Dec 20, 2007</td><td>$48,425.55</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>789 West Alameda<br>Westminster, Colorado 80030</div></td></tr>
|
||||
<tr><td rowspan="2"><a href="#" class="toggle">SO71780</a></td><td>Nearby Cycle Shop</td><td>PO19604173239</td><td>Aug 29, 2007</td><td>$42,452.65</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>Burgess Hill<br>Edward Way<br>West Sussex, England RH15 9UD</div></td></tr>
|
||||
<tr><td rowspan="3"><a href="#" class="toggle">SO71781</a></td><td>Sundry Sporting Goods</td><td>PO19401117806</td><td>Mar 9, 2008</td><td>$29,262.41</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Comment</div><div>Please send ATTN: Rudolph</div></td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>595 Burning Street<br>Vancouver, British Columbia V7L 4J4</div></td></tr>
|
||||
<tr><td rowspan="2"><a href="#" class="toggle">SO71782</a></td><td>Professional Sales and Service</td><td>PO19372114749</td><td>Jul 27, 2007</td><td>$43,962.79</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>57251 Serene Blvd<br>Van Nuys, California 91411</div></td></tr>
|
||||
<tr><td rowspan="2"><a href="#" class="toggle">SO71783</a></td><td>Eastside Department Store</td><td>PO19343113609</td><td>May 15, 2007</td><td>$92,663.56</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>9992 Whipple Rd<br>Union City, California 94587</div></td></tr>
|
||||
<tr><td rowspan="2"><a href="#" class="toggle">SO71784</a></td><td>Action Bicycle Specialists</td><td>PO19285135919</td><td>Nov 30, 2007</td><td>$119,960.82</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>Warrington Ldc Unit 25/2<br>Woolston, England WA1 4SY</div></td></tr>
|
||||
<tr><td rowspan="3"><a href="#" class="toggle">SO71785</a></td><td>Metro Cycle Shop</td><td>PO19169115427</td><td>Feb 1, 2008</td><td>$39,805.12</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Comment</div><div>Please send ATTN: Henry</div></td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>2507 Pacific Ave S<br>Tacoma, Washington 98403</div></td></tr>
|
||||
<tr><td rowspan="2"><a href="#" class="toggle">SO71786</a></td><td>Greater Bike Store</td><td>PO17690128583</td><td>Dec 7, 2007</td><td>$4,657.19</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>55 Lakeshore Blvd East<br>Toronto, Ontario M4B 1V6</div></td></tr>
|
||||
<tr><td rowspan="2"><a href="#" class="toggle">SO71787</a></td><td>Fun Toys and Bikes</td><td>PO18038111279</td><td>Jun 1, 2007</td><td>$38,211.11</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>6500 East Grant Road<br>Tucson, Arizona 85701</div></td></tr>
|
||||
<tr><td rowspan="2"><a href="#" class="toggle">SO71788</a></td><td>Reliable Retail Center</td><td>PO17951176595</td><td>Jul 10, 2007</td><td>$1,806.12</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>609 Evans Avenue<br>Toronto, Ontario M4B 1V4</div></td></tr>
|
||||
<tr><td rowspan="3"><a href="#" class="toggle">SO71789</a></td><td>Eastside Parts Shop</td><td>PO17516128941</td><td>May 22, 2007</td><td>$143.50</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Comment</div><div>Please send ATTN: Andrew</div></td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>7000 Victoria Park Avenue<br>Toronto, Ontario M4B 1V4</div></td></tr>
|
||||
<tr><td rowspan="2"><a href="#" class="toggle">SO71790</a></td><td>Successful Sales Company</td><td>PO17487184338</td><td>Apr 15, 2007</td><td>$5,306.48</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>7009 Sw Hall Blvd.<br>Tigard, Oregon 97223</div></td></tr>
|
||||
<tr><td rowspan="2"><a href="#" class="toggle">SO71791</a></td><td>Convenient Sales and Service</td><td>PO17139191080</td><td>Nov 14, 2007</td><td>$26,692.85</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>950 Gateway Street<br>Springfield, Oregon 97477</div></td></tr>
|
||||
<tr><td rowspan="2"><a href="#" class="toggle">SO71792</a></td><td>Corner Bicycle Supply</td><td>PO17545115036</td><td>Mar 17, 2008</td><td>$67,683.32</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>2511 Baker Road<br>Toronto, Ontario M4B 1V7</div></td></tr>
|
||||
<tr><td rowspan="3"><a href="#" class="toggle">SO71793</a></td><td>Mountain Toy Store</td><td>PO17226152414</td><td>Sep 5, 2007</td><td>$1,943.93</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Comment</div><div>Please send ATTN: Marvin</div></td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>First Colony Mall<br>Sugar Land, Texas 77478</div></td></tr>
|
||||
<tr><td rowspan="2"><a href="#" class="toggle">SO71794</a></td><td>Vigorous Exercise Company</td><td>PO17574111985</td><td>Dec 14, 2007</td><td>$87,770.74</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>9950 Ferrand Drive, 9th Floor<br>Toronto, Ontario M4B 1V4</div></td></tr>
|
||||
<tr><td rowspan="2"><a href="#" class="toggle">SO71795</a></td><td>Bike Part Wholesalers</td><td>PO17371184627</td><td>Feb 6, 2008</td><td>$41,224.10</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>254a Baker Street<br>Botany<br>Sydney, New South Wales 1002</div></td></tr>
|
||||
<tr><td rowspan="2"><a href="#" class="toggle">SO71796</a></td><td>Extreme Riding Supplies</td><td>PO17052159664</td><td>Jul 13, 2007</td><td>$63,686.27</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>Riverside<br>Sherman Oaks, California 91403</div></td></tr>
|
||||
<tr><td rowspan="3"><a href="#" class="toggle">SO71797</a></td><td>Riding Cycles</td><td>PO16501134889</td><td>Dec 2, 2007</td><td>$86,222.81</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Comment</div><div>Please send ATTN: Jon</div></td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>Galashiels<br>Liverpool, England L4 4HB</div></td></tr>
|
||||
<tr><td rowspan="2"><a href="#" class="toggle">SO71798</a></td><td>Work and Play Association</td><td>PO16994135863</td><td>Jan 20, 2008</td><td>$40,048.63</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>2533 Eureka Rd.<br>Southgate, Michigan 48195</div></td></tr>
|
||||
<tr><td rowspan="2"><a href="#" class="toggle">SO71799</a></td><td>Metro Sports Equipment</td><td>PO15486196616</td><td>Oct 18, 2007</td><td>$23,080.67</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>6, rue des Pyrenees<br>Saint Ouen, Loir et Cher 41100</div></td></tr>
|
||||
<tr><td rowspan="2"><a href="#" class="toggle">SO71800</a></td><td>Quick Parts and Service</td><td>PO15544127760</td><td>Feb 19, 2008</td><td>$37,253.44</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>99954 Boul. Laurier, Local 060, Place<br>Sainte-Foy, Quebec G1W</div></td></tr>
|
||||
<tr><td rowspan="3"><a href="#" class="toggle">SO71801</a></td><td>Getaway Inn</td><td>PO15515173664</td><td>Mar 6, 2008</td><td>$47,720.54</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Comment</div><div>Please send ATTN: Min</div></td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>54, avenue des Ternes<br>Saint Ouen, Loir et Cher 41100</div></td></tr>
|
||||
<tr><td rowspan="2"><a href="#" class="toggle">SO71802</a></td><td>Blue-Ribbon Bike Company</td><td>PO15457184141</td><td>Sep 22, 2007</td><td>$42,013.42</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>790 Shelbyville Road<br>Saint Matthews, Kentucky 40207</div></td></tr>
|
||||
<tr><td rowspan="2"><a href="#" class="toggle">SO71803</a></td><td>World of Bikes</td><td>PO15341174104</td><td>Mar 1, 2008</td><td>$43,964.97</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>660 Lindbergh<br>Saint Louis, Missouri 63103</div></td></tr>
|
||||
<tr><td rowspan="2"><a href="#" class="toggle">SO71804</a></td><td>Bikes for Two</td><td>PO14906114459</td><td>Aug 18, 2007</td><td>$2,431.21</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>63 West Beaver Creek<br>Richmond Hill, Ontario L4E 3M5</div></td></tr>
|
||||
<tr><td rowspan="3"><a href="#" class="toggle">SO71805</a></td><td>Nationwide Supply</td><td>PO14703194514</td><td>Jun 27, 2007</td><td>$76,535.55</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Comment</div><div>Please send ATTN: Pilar</div></td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>4250 Concord Road<br>Rhodes, New South Wales 2138</div></td></tr>
|
||||
<tr><td rowspan="2"><a href="#" class="toggle">SO71806</a></td><td>Valley Toy Store</td><td>PO14790111844</td><td>Jun 2, 2007</td><td>$20,261.90</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>252851 Rowan Place<br>Richmond, British Columbia V6B 3P7</div></td></tr>
|
||||
<tr><td rowspan="2"><a href="#" class="toggle">SO71807</a></td><td>Courteous Bicycle Specialists</td><td>PO14935135211</td><td>Oct 28, 2007</td><td>$656.84</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>995 Crescent<br>Richmond Hill, Ontario L4E 3M5</div></td></tr>
|
||||
<tr><td rowspan="2"><a href="#" class="toggle">SO71808</a></td><td>Odometers and Accessories Company</td><td>PO14761198562</td><td>Oct 28, 2007</td><td>$42,231.51</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>253711 Mayfield Place, Unit 150<br>Richmond, British Columbia V6B 3P7</div></td></tr>
|
||||
<tr><td rowspan="3"><a href="#" class="toggle">SO71809</a></td><td>Fitness Bike Accessories</td><td>PO14645153239</td><td>Jan 12, 2008</td><td>$3,743.42</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Comment</div><div>Please send ATTN: John</div></td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>Level 7<br>114 Albert Road<br>Rhodes, New South Wales 2138</div></td></tr>
|
||||
<tr><td rowspan="2"><a href="#" class="toggle">SO71810</a></td><td>Two-Seater Bikes</td><td>PO13804148315</td><td>May 27, 2007</td><td>$1,093.53</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>5700 Legacy Dr<br>Plano, Texas 75074</div></td></tr>
|
||||
<tr><td rowspan="2"><a href="#" class="toggle">SO71811</a></td><td>Racing Toys</td><td>PO13717180066</td><td>Feb 26, 2008</td><td>$3,493.04</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>9228 Via Del Sol<br>Phoenix, Arizona 85004</div></td></tr>
|
||||
<tr><td rowspan="2"><a href="#" class="toggle">SO71812</a></td><td>Fashionable Bikes and Accessories</td><td>PO13543115747</td><td>Apr 28, 2007</td><td>$35,146.04</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>Sports Store At Park City<br>Park City, Utah 84098</div></td></tr>
|
||||
<tr><td rowspan="3"><a href="#" class="toggle">SO71813</a></td><td>Liquidation Sales</td><td>PO13630186295</td><td>Jan 17, 2008</td><td>$12,707.47</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Comment</div><div>Please send ATTN: Jenny</div></td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>No. 6<br>Millenium Court<br>Perth, South Australia 6006</div></td></tr>
|
||||
<tr><td rowspan="2"><a href="#" class="toggle">SO71814</a></td><td>Our Sporting Goods Store</td><td>PO12818173864</td><td>May 31, 2007</td><td>$7,517.54</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>6030 Conroy Road<br>Ottawa, Ontario K4B 1S3</div></td></tr>
|
||||
<tr><td rowspan="2"><a href="#" class="toggle">SO71815</a></td><td>Thrifty Parts and Sales</td><td>PO13021155785</td><td>Jan 1, 2008</td><td>$1,261.44</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>Oxnard Outlet<br>Oxnard, California 93030</div></td></tr>
|
||||
<tr><td rowspan="2"><a href="#" class="toggle">SO71816</a></td><td>Engineered Bike Systems</td><td>PO12992180445</td><td>Jul 29, 2007</td><td>$3,754.97</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>123 Camelia Avenue<br>Oxnard, California 93030</div></td></tr>
|
||||
<tr><td rowspan="3"><a href="#" class="toggle">SO71817</a></td><td>Home Town Bike Store</td><td>PO12905185178</td><td>May 21, 2007</td><td>$689.96</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Comment</div><div>Please send ATTN: Danielle</div></td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>955 Green Valley Crescent<br>Ottawa, Ontario K4B 1S1</div></td></tr>
|
||||
<tr><td rowspan="2"><a href="#" class="toggle">SO71818</a></td><td>Utilitarian Sporting Goods</td><td>PO12470139718</td><td>Apr 25, 2007</td><td>$61,356.31</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>4635 S. Harrison Blvd.<br>Ogden, Utah 84401</div></td></tr>
|
||||
<tr><td rowspan="2"><a href="#" class="toggle">SO71819</a></td><td>Fabrikam Inc., West</td><td>PO12354153257</td><td>May 19, 2007</td><td>$41,746.15</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>46460 West Oaks Drive<br>Novi, Michigan 48375</div></td></tr>
|
||||
<tr><td rowspan="2"><a href="#" class="toggle">SO71820</a></td><td>Racing Sales and Service</td><td>PO12673129941</td><td>Apr 26, 2007</td><td>$68,686.02</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>510, avenue de Villiers<br>Orleans, Loiret 45000</div></td></tr>
|
||||
<tr><td rowspan="3"><a href="#" class="toggle">SO71821</a></td><td>Bike Goods </td><td>PO11977190694</td><td>May 25, 2007</td><td>$5,904.88</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Comment</div><div>Please send ATTN: Gary</div></td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>254075 Biscayne Blvd.<br>North Miami Beach, Florida 33162</div></td></tr>
|
||||
<tr><td rowspan="2"><a href="#" class="toggle">SO71822</a></td><td>Popular Bike Lines</td><td>PO11774139099</td><td>Dec 19, 2007</td><td>$31,191.60</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>Level 7<br>80 Arthur Street<br>Newcastle, New South Wales 2300</div></td></tr>
|
||||
<tr><td rowspan="2"><a href="#" class="toggle">SO71823</a></td><td>Enterprise Center</td><td>PO11310159994</td><td>Sep 7, 2007</td><td>$2,818.81</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>Kurfürstenstr 574<br>München, Hessen 80074</div></td></tr>
|
||||
<tr><td rowspan="2"><a href="#" class="toggle">SO71824</a></td><td>Outdoor Equipment Store</td><td>PO11455162600</td><td>Oct 29, 2007</td><td>$115,117.41</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>6 Cotton Road<br>Nashua, New Hampshire 03064</div></td></tr>
|
||||
<tr><td rowspan="3"><a href="#" class="toggle">SO71825</a></td><td>One Bike Company</td><td>PO11165197222</td><td>Dec 28, 2007</td><td>$4,824.62</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Comment</div><div>Please send ATTN: Shanay</div></td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>5 place Ville-Marie<br>Montreal, Quebec H1Y 2H7</div></td></tr>
|
||||
<tr><td rowspan="2"><a href="#" class="toggle">SO71826</a></td><td>Rodeway Bike Store</td><td>PO11397155355</td><td>Oct 29, 2007</td><td>$40,083.06</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>Winterfeldtstr 5557<br>Kreditorenbuchhaltung<br>Münster, Saarland 48001</div></td></tr>
|
||||
<tr><td rowspan="2"><a href="#" class="toggle">SO71827</a></td><td>Metal Processing Company</td><td>PO11107195325</td><td>Aug 22, 2007</td><td>$9,247.52</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>770 Notre Datme Quest Bureau 800<br>Montreal, Quebec H1Y 2H7</div></td></tr>
|
||||
<tr><td rowspan="2"><a href="#" class="toggle">SO71828</a></td><td>Grand Industries</td><td>PO11194153355</td><td>Aug 10, 2007</td><td>$52,553.87</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>6333 Cote Vertu<br>Montreal, Quebec H1Y 2H7</div></td></tr>
|
||||
<tr><td rowspan="3"><a href="#" class="toggle">SO71829</a></td><td>Family Cycle Store</td><td>PO10962123279</td><td>Jul 16, 2007</td><td>$40,095.88</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Comment</div><div>Please send ATTN: James</div></td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>660 Saint-Jacques, Bureau 400<br>Montreal, Quebec H1Y 2H8</div></td></tr>
|
||||
<tr><td rowspan="2"><a href="#" class="toggle">SO71830</a></td><td>Petroleum Products Distributors</td><td>PO10875112195</td><td>Nov 8, 2007</td><td>$55,088.00</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>20225 Lansing Ave<br>Montreal, Quebec H1Y 2H7</div></td></tr>
|
||||
<tr><td rowspan="2"><a href="#" class="toggle">SO71831</a></td><td>Tachometers and Accessories</td><td>PO10295111084</td><td>Aug 8, 2007</td><td>$2,228.06</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>Wymbush<br>Milton Keynes, England MK8 8DF</div></td></tr>
|
||||
<tr><td rowspan="2"><a href="#" class="toggle">SO71832</a></td><td>Closest Bicycle Store</td><td>PO10353140756</td><td>Sep 3, 2007</td><td>$39,531.61</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>Garamonde Drive, Wymbush<br>PO Box 4023<br>Milton Keynes, England MK8 8ZD</div></td></tr>
|
||||
<tr><td rowspan="3"><a href="#" class="toggle">SO71833</a></td><td>Another Bicycle Company</td><td>PO10411123072</td><td>Jan 26, 2008</td><td>$70,377.54</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Comment</div><div>Please send ATTN: Stanley</div></td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>567 Sw Mcloughlin Blvd<br>Milwaukie, Oregon 97222</div></td></tr>
|
||||
<tr><td rowspan="2"><a href="#" class="toggle">SO71834</a></td><td>Rustic Bike Store</td><td>PO377116268</td><td>Feb 22, 2008</td><td>$2,310.51</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>Buergermeister-ulrich-str 3000<br>Buchhaltung<br>Augsburg, Bayern 86150</div></td></tr>
|
||||
<tr><td rowspan="2"><a href="#" class="toggle">SO71835</a></td><td>Running and Cycling Gear</td><td>PO870120974</td><td>Jun 13, 2007</td><td>$71,605.92</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>No. 60 Bellis Fair Parkway<br>Bellingham, Washington 98225</div></td></tr>
|
||||
<tr><td rowspan="2"><a href="#" class="toggle">SO71836</a></td><td>Safe Cycles Shop</td><td>PO841118259</td><td>Sep 13, 2007</td><td>$90,216.85</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>2681 Eagle Peak<br>Bellevue, Washington 98004</div></td></tr>
|
||||
<tr><td rowspan="3"><a href="#" class="toggle">SO71837</a></td><td>Riders Company</td><td>PO1624180133</td><td>Aug 24, 2007</td><td>$39,989.36</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Comment</div><div>Please send ATTN: Kim</div></td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>Tanger Factory<br>Branch, Minnesota 55056</div></td></tr>
|
||||
<tr><td rowspan="2"><a href="#" class="toggle">SO71838</a></td><td>Cycles Sales and Repair</td><td>PO1305123041</td><td>Sep 7, 2007</td><td>$15,165.23</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>3387, rue Marbeuf<br>Bobigny, Seine Saint Denis 93000</div></td></tr>
|
||||
<tr><td rowspan="2"><a href="#" class="toggle">SO71839</a></td><td>Front Runner Bikes</td><td>PO1537119063</td><td>Jan 26, 2008</td><td>$75,173.33</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>DeSouth Square<br>Bradenton, Florida 34205</div></td></tr>
|
||||
<tr><td rowspan="2"><a href="#" class="toggle">SO71840</a></td><td>Community Department Stores</td><td>PO1450191043</td><td>Oct 2, 2007</td><td>$1,234.39</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>3639, rue des Grands Champs<br>Boulogne-sur-Mer, Pas de Calais 62200</div></td></tr>
|
||||
<tr><td rowspan="3"><a href="#" class="toggle">SO71841</a></td><td>Rural Cycle Emporium</td><td>PO1798133189</td><td>Nov 23, 2007</td><td>$112,758.77</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Comment</div><div>Please send ATTN: Kathleen</div></td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>6388 Lake City Way<br>Burnaby, British Columbia V5A 3A6</div></td></tr>
|
||||
<tr><td rowspan="2"><a href="#" class="toggle">SO71842</a></td><td>Price-Cutter Discount Bikes</td><td>PO1740169151</td><td>Nov 22, 2007</td><td>$12.91</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>6700 Boul Taschereau<br>Brossard, Quebec J4Z 1C5</div></td></tr>
|
||||
<tr><td rowspan="2"><a href="#" class="toggle">SO71843</a></td><td>Future Bikes</td><td>PO2001122796</td><td>Jun 24, 2007</td><td>$7,775.72</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>67255 - 8th Street N.E., Suite 350<br>Calgary, Alberta T2P 2G8</div></td></tr>
|
||||
<tr><td rowspan="2"><a href="#" class="toggle">SO71844</a></td><td>Sales and Supply Company</td><td>PO2813198985</td><td>Jun 12, 2007</td><td>$48,077.41</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>Corporate Ofc A/p<br>123 Fourth Ave<br>Chantilly, Virginia 20151</div></td></tr>
|
||||
<tr><td rowspan="3"><a href="#" class="toggle">SO71845</a></td><td>Trailblazing Sports</td><td>PO2697119362</td><td>Mar 4, 2008</td><td>$45,992.37</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Comment</div><div>Please send ATTN: Frank</div></td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>251340 E. South St.<br>Cerritos, California 90703</div></td></tr>
|
||||
<tr><td rowspan="2"><a href="#" class="toggle">SO71846</a></td><td>Sports Store</td><td>PO2378131604</td><td>Jul 2, 2007</td><td>$2,711.41</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>Internet House, 3399 Science Park<br>Cambridge, England CB4 4BZ</div></td></tr>
|
||||
<tr><td rowspan="2"><a href="#" class="toggle">SO71847</a></td><td>Camping and Sports Store</td><td>PO18502143784</td><td>Jul 15, 2007</td><td>$119,981.15</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>400-25155 West Pender St<br>Vancouver, British Columbia V7L 4J4</div></td></tr>
|
||||
<tr><td rowspan="2"><a href="#" class="toggle">SO71848</a></td><td>Locks Company</td><td>PO18763153352</td><td>Nov 9, 2007</td><td>$16,667.88</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>70259 West Sunnyview Ave<br>Visalia, California 93291</div></td></tr>
|
||||
<tr><td rowspan="3"><a href="#" class="toggle">SO71849</a></td><td>Principal Bike Company</td><td>PO18125130930</td><td>Jan 18, 2008</td><td>$25,746.16</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Comment</div><div>Please send ATTN: Alvaro</div></td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>Mountain Square<br>Upland, California 91786</div></td></tr>
|
||||
<tr><td rowspan="2"><a href="#" class="toggle">SO71850</a></td><td>Quitting Business Distributors</td><td>PO18241134627</td><td>Aug 28, 2007</td><td>$10,492.47</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>University Plaza<br>Tampa, Florida 33602</div></td></tr>
|
||||
<tr><td rowspan="2"><a href="#" class="toggle">SO71851</a></td><td>Rapid Bikes</td><td>PO18299133687</td><td>Jun 17, 2007</td><td>$51,104.88</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>992 St Clair Ave East<br>Toronto, Ontario M4B 1V7</div></td></tr>
|
||||
<tr><td rowspan="2"><a href="#" class="toggle">SO71852</a></td><td>Painters Bicycle Specialists</td><td>PO20213171866</td><td>Mar 24, 2008</td><td>$10,406.62</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>9975 Union St.<br>Waterbury, Connecticut 06710</div></td></tr>
|
||||
<tr><td rowspan="3"><a href="#" class="toggle">SO71853</a></td><td>Famous Bike Shop</td><td>PO18531164420</td><td>May 3, 2007</td><td>$4,578.20</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Comment</div><div>Please send ATTN: Jim</div></td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>999 West Georgia St.<br>Vancouver, Ontario V5T 1Y9</div></td></tr>
|
||||
<tr><td rowspan="2"><a href="#" class="toggle">SO71854</a></td><td>Helpful Sales and Repair Service </td><td>PO16385143469</td><td>Nov 11, 2007</td><td>$36,819.69</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>Licensing Account<br>Seaford, Victoria 3198</div></td></tr>
|
||||
<tr><td rowspan="2"><a href="#" class="toggle">SO71855</a></td><td>Self-Contained Cycle Parts Company</td><td>PO18589189353</td><td>Jun 23, 2007</td><td>$429.62</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>12, rue des Grands Champs<br>Verrieres Le Buisson, Essonne 91370</div></td></tr>
|
||||
<tr><td rowspan="2"><a href="#" class="toggle">SO71856</a></td><td>Transport Bikes</td><td>PO16530177647</td><td>Nov 18, 2007</td><td>$665.43</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>25130 South State Street<br>Sandy, Utah 84070</div></td></tr>
|
||||
<tr><td rowspan="3"><a href="#" class="toggle">SO71857</a></td><td>First Cycle Store</td><td>PO16269151631</td><td>Jan 4, 2008</td><td>$37,400.41</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Comment</div><div>Please send ATTN: Mike</div></td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>25250 N 90th St<br>Scottsdale, Arizona 85257</div></td></tr>
|
||||
<tr><td rowspan="2"><a href="#" class="toggle">SO71858</a></td><td>Thrilling Bike Tours</td><td>PO16153112278</td><td>Oct 6, 2007</td><td>$15,275.20</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>4660 Rodeo Road<br>Santa Fe, New Mexico 87501</div></td></tr>
|
||||
<tr><td rowspan="2"><a href="#" class="toggle">SO71859</a></td><td>Bike World</td><td>PO16182112142</td><td>Apr 11, 2007</td><td>$8,654.14</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>60025 Bollinger Canyon Road<br>San Ramon, California 94583</div></td></tr>
|
||||
<tr><td rowspan="2"><a href="#" class="toggle">SO71860</a></td><td>Vinyl and Plastic Goods Corporation</td><td>PO17835163979</td><td>Feb 20, 2008</td><td>$3,651.79</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>No. 25800-130 King Street West<br>Toronto, Ontario M4B 1V5</div></td></tr>
|
||||
<tr><td rowspan="3"><a href="#" class="toggle">SO71861</a></td><td>Two Bike Shops</td><td>PO14152156429</td><td>Nov 30, 2007</td><td>$2,430.32</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Comment</div><div>Please send ATTN: Jim</div></td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>35525-9th Street Sw<br>Puyallup, Washington 98371</div></td></tr>
|
||||
<tr><td rowspan="2"><a href="#" class="toggle">SO71862</a></td><td>Fad Outlet</td><td>PO14065190039</td><td>Feb 19, 2008</td><td>$1,622.62</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>2550 Ne Sandy Blvd<br>Portland, Oregon 97205</div></td></tr>
|
||||
<tr><td rowspan="2"><a href="#" class="toggle">SO71863</a></td><td>Sports Products Store</td><td>PO16124166561</td><td>Apr 30, 2007</td><td>$3,673.32</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>Po Box 252525<br>Santa Ana, California 92701</div></td></tr>
|
||||
<tr><td rowspan="2"><a href="#" class="toggle">SO71864</a></td><td>Good Bike Shop</td><td>PO14268188903</td><td>Oct 9, 2007</td><td>$37,623.76</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>99433 S. Greenbay Rd.<br>Racine, Wisconsin 53182</div></td></tr>
|
||||
<tr><td rowspan="3"><a href="#" class="toggle">SO71865</a></td><td>Neighborhood Bicycle Storehouse</td><td>PO15109136609</td><td>May 30, 2007</td><td>$290.23</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Comment</div><div>Please send ATTN: Cecilia</div></td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>69, boulevard Tremblay<br>Roncq, Nord 59223</div></td></tr>
|
||||
<tr><td rowspan="2"><a href="#" class="toggle">SO71866</a></td><td>Exchange Parts Inc.</td><td>PO14297151936</td><td>Jan 27, 2008</td><td>$43,277.65</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>7700 Green Road<br>Raleigh, North Carolina 27603</div></td></tr>
|
||||
<tr><td rowspan="2"><a href="#" class="toggle">SO71867</a></td><td>Vigorous Sports Store</td><td>PO13050111529</td><td>Jul 29, 2007</td><td>$1,170.54</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>Banbury<br>Oxon, England OX16 8RS</div></td></tr>
|
||||
<tr><td rowspan="2"><a href="#" class="toggle">SO71868</a></td><td>Cycle Merchants</td><td>PO14210134527</td><td>Aug 15, 2007</td><td>$1,932.67</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>575 Rue St Amable<br>Quebec, Quebec G1R</div></td></tr>
|
||||
<tr><td rowspan="3"><a href="#" class="toggle">SO71869</a></td><td>Certified Sports Supply</td><td>PO14877155420</td><td>Feb 21, 2008</td><td>$143.50</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Comment</div><div>Please send ATTN: Gabriele</div></td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>250551 Shellbridge Way<br>Richmond, British Columbia V6B 3P7</div></td></tr>
|
||||
<tr><td rowspan="2"><a href="#" class="toggle">SO71870</a></td><td>Accessories Network</td><td>PO13195134898</td><td>Feb 1, 2008</td><td>$1,903.38</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>699bis, rue des Peupliers<br>Paris, Seine (Paris) 75008</div></td></tr>
|
||||
<tr><td rowspan="2"><a href="#" class="toggle">SO71871</a></td><td>Remote Bicycle Specialists</td><td>PO14239120760</td><td>Aug 10, 2007</td><td>$2,168.53</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>No. 2000-25080 Beaver Hall Hill<br>Quebec, Quebec G1R</div></td></tr>
|
||||
<tr><td rowspan="2"><a href="#" class="toggle">SO71872</a></td><td>First Center</td><td>PO13137112099</td><td>Jan 2, 2008</td><td>$215.91</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>22, rue Lafayette<br>Pantin, Seine Saint Denis 93500</div></td></tr>
|
||||
<tr><td rowspan="3"><a href="#" class="toggle">SO71873</a></td><td>Incomparable Bicycle Store</td><td>PO12325121185</td><td>Jul 5, 2007</td><td>$5,941.29</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Comment</div><div>Please send ATTN: Faith</div></td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>99 Edgewater Drive<br>Norwood, Massachusetts 02062</div></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<h1>Javascript</h1>
|
||||
<div id="javascript">
|
||||
<pre class="prettyprint lang-javascript"></pre>
|
||||
</div>
|
||||
<h1>HTML</h1>
|
||||
<div>
|
||||
<pre class="prettyprint lang-html"><table class="tablesorter">
|
||||
<colgroup>
|
||||
<col width="85" />
|
||||
<col width="250" />
|
||||
<col width="100" />
|
||||
<col width="90" />
|
||||
<col width="70" />
|
||||
</colgroup>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Order #</th>
|
||||
<th>Customer</th>
|
||||
<th>PO</th>
|
||||
<th>Date</th>
|
||||
<th>Total</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td rowspan="2"> <!-- rowspan="2" makes the table look nicer -->
|
||||
<a href="#" class="toggle">SO71774</a> <!-- link to toggle view of the child row -->
|
||||
</td>
|
||||
<td>Good Toys</td>
|
||||
<td>PO348186287</td>
|
||||
<td>Jul 20, 2007</td>
|
||||
<td>$972.78</td>
|
||||
</tr>
|
||||
<tr class="tablesorter-childRow">
|
||||
<td colspan="4">
|
||||
<div class="bold">Shipping Address</div>
|
||||
<div>99700 Bell Road<br>Auburn, California 95603</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td rowspan="2"> <!-- rowspan="2" makes the table look nicer -->
|
||||
<a href="#" class="toggle">SO71775</a> <!-- link to toggle view of the child row -->
|
||||
</td>
|
||||
<td>Cycle Clearance</td>
|
||||
<td>PO58159451</td>
|
||||
<td>May 6, 2007</td>
|
||||
<td>$2,313.13</td>
|
||||
</tr>
|
||||
<tr class="tablesorter-childRow">
|
||||
<td colspan="4">
|
||||
<div class="bold">Shipping Address</div>
|
||||
<div>2255 254th Avenue Se<br>Albany, Oregon 97321</div>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<!-- View page source for complete HTML markup -->
|
||||
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<div id="pager" class="pager">
|
||||
<form>
|
||||
<input type="button" value="&lt;&lt;" class="first" />
|
||||
<input type="button" value="&lt;" class="prev" />
|
||||
<input type="text" class="pagedisplay"/>
|
||||
<input type="button" value="&gt;" class="next" />
|
||||
<input type="button" value="&gt;&gt;" class="last" />
|
||||
<select class="pagesize">
|
||||
<option selected="selected" value="10">10</option>
|
||||
<option value="20">20</option>
|
||||
<option value="30">30</option>
|
||||
<option value="40">40</option>
|
||||
</select>
|
||||
</form>
|
||||
</div></pre>
|
||||
</div>
|
||||
|
||||
<div class="next-up">
|
||||
<hr />
|
||||
Next up: <a href="example-option-sort-order.html">Set an initial sorting order direction ››</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
435
assets/vendor/tablesorter/docs/example-child-rows.html
vendored
Normal file
435
assets/vendor/tablesorter/docs/example-child-rows.html
vendored
Normal file
@@ -0,0 +1,435 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery plugin: Tablesorter 2.0 - Child Rows</title>
|
||||
|
||||
<!-- jQuery -->
|
||||
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
|
||||
|
||||
<!-- Demo stuff -->
|
||||
<link rel="stylesheet" href="css/jq.css">
|
||||
<link href="css/prettify.css" rel="stylesheet">
|
||||
<script src="js/prettify.js"></script>
|
||||
<script src="js/docs.js"></script>
|
||||
|
||||
<!-- Tablesorter: required -->
|
||||
<link rel="stylesheet" href="../css/theme.blue.css">
|
||||
<script src="../js/jquery.tablesorter.js"></script>
|
||||
|
||||
<!-- Tablesorter: optional -->
|
||||
<script src="../addons/pager/jquery.tablesorter.pager.js"></script>
|
||||
|
||||
<script id="js">$(function() {
|
||||
|
||||
// hide child rows
|
||||
$('.tablesorter-childRow td').hide();
|
||||
|
||||
$(".tablesorter")
|
||||
.tablesorter({
|
||||
theme : 'blue',
|
||||
// this is the default setting
|
||||
cssChildRow: "tablesorter-childRow"
|
||||
})
|
||||
.tablesorterPager({
|
||||
container: $("#pager"),
|
||||
positionFixed: false
|
||||
})
|
||||
.bind('pagerChange', function(){
|
||||
// hide child rows after pager update
|
||||
$('.tablesorter-childRow td').hide();
|
||||
});
|
||||
|
||||
// Toggle child row content (td), not hiding the row since we are using rowspan
|
||||
// Using delegate because the pager plugin rebuilds the table after each page change
|
||||
// "delegate" works in jQuery 1.4.2+; use "live" back to v1.3; for older jQuery - SOL
|
||||
$('.tablesorter').delegate('.toggle', 'click' ,function(){
|
||||
|
||||
// use "nextUntil" to toggle multiple child rows
|
||||
// toggle table cells instead of the row
|
||||
$(this).closest('tr').nextUntil('tr:not(.tablesorter-childRow)').find('td').toggle();
|
||||
|
||||
return false;
|
||||
});
|
||||
|
||||
});</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="banner">
|
||||
<h1>table<em>sorter</em></h1>
|
||||
<h2>Working with Child Rows</h2>
|
||||
<h3>Flexible client-side table sorting</h3>
|
||||
<a href="index.html">Back to documentation</a>
|
||||
</div>
|
||||
|
||||
<div id="main">
|
||||
|
||||
<p class="tip">
|
||||
<em>NOTE!</em>
|
||||
<ul>
|
||||
<li>Click the link in the Order # column to reveal the hidden child row cells
|
||||
(<a href="http://www.pengoworks.com/workshop/jquery/tablesorter/tablesorter.htm">original demo</a>).</li>
|
||||
<li>This option is available in the original plugin.</li>
|
||||
<li>This demo had the default child row class name changed from "expand-child" to "tablesorter-childRow" in v2.4.</li>
|
||||
</ul>
|
||||
</p>
|
||||
|
||||
<h1>Demo</h1>
|
||||
<div id="demo"><table class="tablesorter">
|
||||
<colgroup>
|
||||
<col width="85" />
|
||||
<col width="250" />
|
||||
<col width="100" />
|
||||
<col width="90" />
|
||||
<col width="70" />
|
||||
</colgroup>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Order #</th>
|
||||
<th>Customer</th>
|
||||
<th>PO</th>
|
||||
<th>Date</th>
|
||||
<th>Total</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<!-- First row expanded to reveal the layout -->
|
||||
<tr>
|
||||
<td rowspan="2"> <!-- rowspan="2" makes the table look nicer -->
|
||||
<a href="#" class="toggle">SO71774</a> <!-- link to toggle view of the child row -->
|
||||
</td>
|
||||
<td>Good Toys</td>
|
||||
<td>PO348186287</td>
|
||||
<td>Jul 20, 2007</td>
|
||||
<td>$972.78</td>
|
||||
</tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>99700 Bell Road<br>Auburn, California 95603</div></td></tr>
|
||||
<tr><td rowspan="2"><a href="#" class="toggle">SO71775</a></td><td>Cycle Clearance</td><td>PO58159451</td><td>May 6, 2007</td><td>$2,313.13</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>2255 254th Avenue Se<br>Albany, Oregon 97321</div></td></tr>
|
||||
<tr><td rowspan="2"><a href="#" class="toggle">SO71776</a></td><td>West Side Mart</td><td>PO19952192051</td><td>May 12, 2007</td><td>$87.09</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>251 The Metro Center<br>Wokingham, England RG41 1QW</div></td></tr>
|
||||
<tr><td rowspan="3"><a href="#" class="toggle">SO71777</a></td><td>Demand Distributors</td><td>PO20097113391</td><td>Apr 26, 2007</td><td>$1,267.82</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Comment</div><div>Please send ATTN: Judy</div></td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>25102 Springwater<br>Wenatchee, Washington 98801</div></td></tr>
|
||||
<tr><td rowspan="2"><a href="#" class="toggle">SO71778</a></td><td>Purchase Mart</td><td>PO19894146890</td><td>Apr 18, 2007</td><td>$1,503.98</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>Wrentham Village<br>Wrentham, Massachusetts 02093</div></td></tr>
|
||||
<tr><td rowspan="2"><a href="#" class="toggle">SO71779</a></td><td>Initial Bike Company</td><td>PO19633118218</td><td>Dec 20, 2007</td><td>$48,425.55</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>789 West Alameda<br>Westminster, Colorado 80030</div></td></tr>
|
||||
<tr><td rowspan="2"><a href="#" class="toggle">SO71780</a></td><td>Nearby Cycle Shop</td><td>PO19604173239</td><td>Aug 29, 2007</td><td>$42,452.65</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>Burgess Hill<br>Edward Way<br>West Sussex, England RH15 9UD</div></td></tr>
|
||||
<tr><td rowspan="3"><a href="#" class="toggle">SO71781</a></td><td>Sundry Sporting Goods</td><td>PO19401117806</td><td>Mar 9, 2008</td><td>$29,262.41</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Comment</div><div>Please send ATTN: Rudolph</div></td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>595 Burning Street<br>Vancouver, British Columbia V7L 4J4</div></td></tr>
|
||||
<tr><td rowspan="2"><a href="#" class="toggle">SO71782</a></td><td>Professional Sales and Service</td><td>PO19372114749</td><td>Jul 27, 2007</td><td>$43,962.79</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>57251 Serene Blvd<br>Van Nuys, California 91411</div></td></tr>
|
||||
<tr><td rowspan="2"><a href="#" class="toggle">SO71783</a></td><td>Eastside Department Store</td><td>PO19343113609</td><td>May 15, 2007</td><td>$92,663.56</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>9992 Whipple Rd<br>Union City, California 94587</div></td></tr>
|
||||
<tr><td rowspan="2"><a href="#" class="toggle">SO71784</a></td><td>Action Bicycle Specialists</td><td>PO19285135919</td><td>Nov 30, 2007</td><td>$119,960.82</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>Warrington Ldc Unit 25/2<br>Woolston, England WA1 4SY</div></td></tr>
|
||||
<tr><td rowspan="3"><a href="#" class="toggle">SO71785</a></td><td>Metro Cycle Shop</td><td>PO19169115427</td><td>Feb 1, 2008</td><td>$39,805.12</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Comment</div><div>Please send ATTN: Henry</div></td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>2507 Pacific Ave S<br>Tacoma, Washington 98403</div></td></tr>
|
||||
<tr><td rowspan="2"><a href="#" class="toggle">SO71786</a></td><td>Greater Bike Store</td><td>PO17690128583</td><td>Dec 7, 2007</td><td>$4,657.19</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>55 Lakeshore Blvd East<br>Toronto, Ontario M4B 1V6</div></td></tr>
|
||||
<tr><td rowspan="2"><a href="#" class="toggle">SO71787</a></td><td>Fun Toys and Bikes</td><td>PO18038111279</td><td>Jun 1, 2007</td><td>$38,211.11</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>6500 East Grant Road<br>Tucson, Arizona 85701</div></td></tr>
|
||||
<tr><td rowspan="2"><a href="#" class="toggle">SO71788</a></td><td>Reliable Retail Center</td><td>PO17951176595</td><td>Jul 10, 2007</td><td>$1,806.12</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>609 Evans Avenue<br>Toronto, Ontario M4B 1V4</div></td></tr>
|
||||
<tr><td rowspan="3"><a href="#" class="toggle">SO71789</a></td><td>Eastside Parts Shop</td><td>PO17516128941</td><td>May 22, 2007</td><td>$143.50</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Comment</div><div>Please send ATTN: Andrew</div></td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>7000 Victoria Park Avenue<br>Toronto, Ontario M4B 1V4</div></td></tr>
|
||||
<tr><td rowspan="2"><a href="#" class="toggle">SO71790</a></td><td>Successful Sales Company</td><td>PO17487184338</td><td>Apr 15, 2007</td><td>$5,306.48</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>7009 Sw Hall Blvd.<br>Tigard, Oregon 97223</div></td></tr>
|
||||
<tr><td rowspan="2"><a href="#" class="toggle">SO71791</a></td><td>Convenient Sales and Service</td><td>PO17139191080</td><td>Nov 14, 2007</td><td>$26,692.85</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>950 Gateway Street<br>Springfield, Oregon 97477</div></td></tr>
|
||||
<tr><td rowspan="2"><a href="#" class="toggle">SO71792</a></td><td>Corner Bicycle Supply</td><td>PO17545115036</td><td>Mar 17, 2008</td><td>$67,683.32</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>2511 Baker Road<br>Toronto, Ontario M4B 1V7</div></td></tr>
|
||||
<tr><td rowspan="3"><a href="#" class="toggle">SO71793</a></td><td>Mountain Toy Store</td><td>PO17226152414</td><td>Sep 5, 2007</td><td>$1,943.93</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Comment</div><div>Please send ATTN: Marvin</div></td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>First Colony Mall<br>Sugar Land, Texas 77478</div></td></tr>
|
||||
<tr><td rowspan="2"><a href="#" class="toggle">SO71794</a></td><td>Vigorous Exercise Company</td><td>PO17574111985</td><td>Dec 14, 2007</td><td>$87,770.74</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>9950 Ferrand Drive, 9th Floor<br>Toronto, Ontario M4B 1V4</div></td></tr>
|
||||
<tr><td rowspan="2"><a href="#" class="toggle">SO71795</a></td><td>Bike Part Wholesalers</td><td>PO17371184627</td><td>Feb 6, 2008</td><td>$41,224.10</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>254a Baker Street<br>Botany<br>Sydney, New South Wales 1002</div></td></tr>
|
||||
<tr><td rowspan="2"><a href="#" class="toggle">SO71796</a></td><td>Extreme Riding Supplies</td><td>PO17052159664</td><td>Jul 13, 2007</td><td>$63,686.27</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>Riverside<br>Sherman Oaks, California 91403</div></td></tr>
|
||||
<tr><td rowspan="3"><a href="#" class="toggle">SO71797</a></td><td>Riding Cycles</td><td>PO16501134889</td><td>Dec 2, 2007</td><td>$86,222.81</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Comment</div><div>Please send ATTN: Jon</div></td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>Galashiels<br>Liverpool, England L4 4HB</div></td></tr>
|
||||
<tr><td rowspan="2"><a href="#" class="toggle">SO71798</a></td><td>Work and Play Association</td><td>PO16994135863</td><td>Jan 20, 2008</td><td>$40,048.63</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>2533 Eureka Rd.<br>Southgate, Michigan 48195</div></td></tr>
|
||||
<tr><td rowspan="2"><a href="#" class="toggle">SO71799</a></td><td>Metro Sports Equipment</td><td>PO15486196616</td><td>Oct 18, 2007</td><td>$23,080.67</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>6, rue des Pyrenees<br>Saint Ouen, Loir et Cher 41100</div></td></tr>
|
||||
<tr><td rowspan="2"><a href="#" class="toggle">SO71800</a></td><td>Quick Parts and Service</td><td>PO15544127760</td><td>Feb 19, 2008</td><td>$37,253.44</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>99954 Boul. Laurier, Local 060, Place<br>Sainte-Foy, Quebec G1W</div></td></tr>
|
||||
<tr><td rowspan="3"><a href="#" class="toggle">SO71801</a></td><td>Getaway Inn</td><td>PO15515173664</td><td>Mar 6, 2008</td><td>$47,720.54</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Comment</div><div>Please send ATTN: Min</div></td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>54, avenue des Ternes<br>Saint Ouen, Loir et Cher 41100</div></td></tr>
|
||||
<tr><td rowspan="2"><a href="#" class="toggle">SO71802</a></td><td>Blue-Ribbon Bike Company</td><td>PO15457184141</td><td>Sep 22, 2007</td><td>$42,013.42</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>790 Shelbyville Road<br>Saint Matthews, Kentucky 40207</div></td></tr>
|
||||
<tr><td rowspan="2"><a href="#" class="toggle">SO71803</a></td><td>World of Bikes</td><td>PO15341174104</td><td>Mar 1, 2008</td><td>$43,964.97</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>660 Lindbergh<br>Saint Louis, Missouri 63103</div></td></tr>
|
||||
<tr><td rowspan="2"><a href="#" class="toggle">SO71804</a></td><td>Bikes for Two</td><td>PO14906114459</td><td>Aug 18, 2007</td><td>$2,431.21</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>63 West Beaver Creek<br>Richmond Hill, Ontario L4E 3M5</div></td></tr>
|
||||
<tr><td rowspan="3"><a href="#" class="toggle">SO71805</a></td><td>Nationwide Supply</td><td>PO14703194514</td><td>Jun 27, 2007</td><td>$76,535.55</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Comment</div><div>Please send ATTN: Pilar</div></td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>4250 Concord Road<br>Rhodes, New South Wales 2138</div></td></tr>
|
||||
<tr><td rowspan="2"><a href="#" class="toggle">SO71806</a></td><td>Valley Toy Store</td><td>PO14790111844</td><td>Jun 2, 2007</td><td>$20,261.90</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>252851 Rowan Place<br>Richmond, British Columbia V6B 3P7</div></td></tr>
|
||||
<tr><td rowspan="2"><a href="#" class="toggle">SO71807</a></td><td>Courteous Bicycle Specialists</td><td>PO14935135211</td><td>Oct 28, 2007</td><td>$656.84</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>995 Crescent<br>Richmond Hill, Ontario L4E 3M5</div></td></tr>
|
||||
<tr><td rowspan="2"><a href="#" class="toggle">SO71808</a></td><td>Odometers and Accessories Company</td><td>PO14761198562</td><td>Oct 28, 2007</td><td>$42,231.51</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>253711 Mayfield Place, Unit 150<br>Richmond, British Columbia V6B 3P7</div></td></tr>
|
||||
<tr><td rowspan="3"><a href="#" class="toggle">SO71809</a></td><td>Fitness Bike Accessories</td><td>PO14645153239</td><td>Jan 12, 2008</td><td>$3,743.42</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Comment</div><div>Please send ATTN: John</div></td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>Level 7<br>114 Albert Road<br>Rhodes, New South Wales 2138</div></td></tr>
|
||||
<tr><td rowspan="2"><a href="#" class="toggle">SO71810</a></td><td>Two-Seater Bikes</td><td>PO13804148315</td><td>May 27, 2007</td><td>$1,093.53</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>5700 Legacy Dr<br>Plano, Texas 75074</div></td></tr>
|
||||
<tr><td rowspan="2"><a href="#" class="toggle">SO71811</a></td><td>Racing Toys</td><td>PO13717180066</td><td>Feb 26, 2008</td><td>$3,493.04</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>9228 Via Del Sol<br>Phoenix, Arizona 85004</div></td></tr>
|
||||
<tr><td rowspan="2"><a href="#" class="toggle">SO71812</a></td><td>Fashionable Bikes and Accessories</td><td>PO13543115747</td><td>Apr 28, 2007</td><td>$35,146.04</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>Sports Store At Park City<br>Park City, Utah 84098</div></td></tr>
|
||||
<tr><td rowspan="3"><a href="#" class="toggle">SO71813</a></td><td>Liquidation Sales</td><td>PO13630186295</td><td>Jan 17, 2008</td><td>$12,707.47</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Comment</div><div>Please send ATTN: Jenny</div></td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>No. 6<br>Millenium Court<br>Perth, South Australia 6006</div></td></tr>
|
||||
<tr><td rowspan="2"><a href="#" class="toggle">SO71814</a></td><td>Our Sporting Goods Store</td><td>PO12818173864</td><td>May 31, 2007</td><td>$7,517.54</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>6030 Conroy Road<br>Ottawa, Ontario K4B 1S3</div></td></tr>
|
||||
<tr><td rowspan="2"><a href="#" class="toggle">SO71815</a></td><td>Thrifty Parts and Sales</td><td>PO13021155785</td><td>Jan 1, 2008</td><td>$1,261.44</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>Oxnard Outlet<br>Oxnard, California 93030</div></td></tr>
|
||||
<tr><td rowspan="2"><a href="#" class="toggle">SO71816</a></td><td>Engineered Bike Systems</td><td>PO12992180445</td><td>Jul 29, 2007</td><td>$3,754.97</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>123 Camelia Avenue<br>Oxnard, California 93030</div></td></tr>
|
||||
<tr><td rowspan="3"><a href="#" class="toggle">SO71817</a></td><td>Home Town Bike Store</td><td>PO12905185178</td><td>May 21, 2007</td><td>$689.96</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Comment</div><div>Please send ATTN: Danielle</div></td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>955 Green Valley Crescent<br>Ottawa, Ontario K4B 1S1</div></td></tr>
|
||||
<tr><td rowspan="2"><a href="#" class="toggle">SO71818</a></td><td>Utilitarian Sporting Goods</td><td>PO12470139718</td><td>Apr 25, 2007</td><td>$61,356.31</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>4635 S. Harrison Blvd.<br>Ogden, Utah 84401</div></td></tr>
|
||||
<tr><td rowspan="2"><a href="#" class="toggle">SO71819</a></td><td>Fabrikam Inc., West</td><td>PO12354153257</td><td>May 19, 2007</td><td>$41,746.15</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>46460 West Oaks Drive<br>Novi, Michigan 48375</div></td></tr>
|
||||
<tr><td rowspan="2"><a href="#" class="toggle">SO71820</a></td><td>Racing Sales and Service</td><td>PO12673129941</td><td>Apr 26, 2007</td><td>$68,686.02</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>510, avenue de Villiers<br>Orleans, Loiret 45000</div></td></tr>
|
||||
<tr><td rowspan="3"><a href="#" class="toggle">SO71821</a></td><td>Bike Goods </td><td>PO11977190694</td><td>May 25, 2007</td><td>$5,904.88</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Comment</div><div>Please send ATTN: Gary</div></td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>254075 Biscayne Blvd.<br>North Miami Beach, Florida 33162</div></td></tr>
|
||||
<tr><td rowspan="2"><a href="#" class="toggle">SO71822</a></td><td>Popular Bike Lines</td><td>PO11774139099</td><td>Dec 19, 2007</td><td>$31,191.60</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>Level 7<br>80 Arthur Street<br>Newcastle, New South Wales 2300</div></td></tr>
|
||||
<tr><td rowspan="2"><a href="#" class="toggle">SO71823</a></td><td>Enterprise Center</td><td>PO11310159994</td><td>Sep 7, 2007</td><td>$2,818.81</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>Kurfürstenstr 574<br>München, Hessen 80074</div></td></tr>
|
||||
<tr><td rowspan="2"><a href="#" class="toggle">SO71824</a></td><td>Outdoor Equipment Store</td><td>PO11455162600</td><td>Oct 29, 2007</td><td>$115,117.41</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>6 Cotton Road<br>Nashua, New Hampshire 03064</div></td></tr>
|
||||
<tr><td rowspan="3"><a href="#" class="toggle">SO71825</a></td><td>One Bike Company</td><td>PO11165197222</td><td>Dec 28, 2007</td><td>$4,824.62</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Comment</div><div>Please send ATTN: Shanay</div></td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>5 place Ville-Marie<br>Montreal, Quebec H1Y 2H7</div></td></tr>
|
||||
<tr><td rowspan="2"><a href="#" class="toggle">SO71826</a></td><td>Rodeway Bike Store</td><td>PO11397155355</td><td>Oct 29, 2007</td><td>$40,083.06</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>Winterfeldtstr 5557<br>Kreditorenbuchhaltung<br>Münster, Saarland 48001</div></td></tr>
|
||||
<tr><td rowspan="2"><a href="#" class="toggle">SO71827</a></td><td>Metal Processing Company</td><td>PO11107195325</td><td>Aug 22, 2007</td><td>$9,247.52</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>770 Notre Datme Quest Bureau 800<br>Montreal, Quebec H1Y 2H7</div></td></tr>
|
||||
<tr><td rowspan="2"><a href="#" class="toggle">SO71828</a></td><td>Grand Industries</td><td>PO11194153355</td><td>Aug 10, 2007</td><td>$52,553.87</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>6333 Cote Vertu<br>Montreal, Quebec H1Y 2H7</div></td></tr>
|
||||
<tr><td rowspan="3"><a href="#" class="toggle">SO71829</a></td><td>Family Cycle Store</td><td>PO10962123279</td><td>Jul 16, 2007</td><td>$40,095.88</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Comment</div><div>Please send ATTN: James</div></td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>660 Saint-Jacques, Bureau 400<br>Montreal, Quebec H1Y 2H8</div></td></tr>
|
||||
<tr><td rowspan="2"><a href="#" class="toggle">SO71830</a></td><td>Petroleum Products Distributors</td><td>PO10875112195</td><td>Nov 8, 2007</td><td>$55,088.00</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>20225 Lansing Ave<br>Montreal, Quebec H1Y 2H7</div></td></tr>
|
||||
<tr><td rowspan="2"><a href="#" class="toggle">SO71831</a></td><td>Tachometers and Accessories</td><td>PO10295111084</td><td>Aug 8, 2007</td><td>$2,228.06</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>Wymbush<br>Milton Keynes, England MK8 8DF</div></td></tr>
|
||||
<tr><td rowspan="2"><a href="#" class="toggle">SO71832</a></td><td>Closest Bicycle Store</td><td>PO10353140756</td><td>Sep 3, 2007</td><td>$39,531.61</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>Garamonde Drive, Wymbush<br>PO Box 4023<br>Milton Keynes, England MK8 8ZD</div></td></tr>
|
||||
<tr><td rowspan="3"><a href="#" class="toggle">SO71833</a></td><td>Another Bicycle Company</td><td>PO10411123072</td><td>Jan 26, 2008</td><td>$70,377.54</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Comment</div><div>Please send ATTN: Stanley</div></td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>567 Sw Mcloughlin Blvd<br>Milwaukie, Oregon 97222</div></td></tr>
|
||||
<tr><td rowspan="2"><a href="#" class="toggle">SO71834</a></td><td>Rustic Bike Store</td><td>PO377116268</td><td>Feb 22, 2008</td><td>$2,310.51</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>Buergermeister-ulrich-str 3000<br>Buchhaltung<br>Augsburg, Bayern 86150</div></td></tr>
|
||||
<tr><td rowspan="2"><a href="#" class="toggle">SO71835</a></td><td>Running and Cycling Gear</td><td>PO870120974</td><td>Jun 13, 2007</td><td>$71,605.92</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>No. 60 Bellis Fair Parkway<br>Bellingham, Washington 98225</div></td></tr>
|
||||
<tr><td rowspan="2"><a href="#" class="toggle">SO71836</a></td><td>Safe Cycles Shop</td><td>PO841118259</td><td>Sep 13, 2007</td><td>$90,216.85</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>2681 Eagle Peak<br>Bellevue, Washington 98004</div></td></tr>
|
||||
<tr><td rowspan="3"><a href="#" class="toggle">SO71837</a></td><td>Riders Company</td><td>PO1624180133</td><td>Aug 24, 2007</td><td>$39,989.36</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Comment</div><div>Please send ATTN: Kim</div></td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>Tanger Factory<br>Branch, Minnesota 55056</div></td></tr>
|
||||
<tr><td rowspan="2"><a href="#" class="toggle">SO71838</a></td><td>Cycles Sales and Repair</td><td>PO1305123041</td><td>Sep 7, 2007</td><td>$15,165.23</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>3387, rue Marbeuf<br>Bobigny, Seine Saint Denis 93000</div></td></tr>
|
||||
<tr><td rowspan="2"><a href="#" class="toggle">SO71839</a></td><td>Front Runner Bikes</td><td>PO1537119063</td><td>Jan 26, 2008</td><td>$75,173.33</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>DeSouth Square<br>Bradenton, Florida 34205</div></td></tr>
|
||||
<tr><td rowspan="2"><a href="#" class="toggle">SO71840</a></td><td>Community Department Stores</td><td>PO1450191043</td><td>Oct 2, 2007</td><td>$1,234.39</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>3639, rue des Grands Champs<br>Boulogne-sur-Mer, Pas de Calais 62200</div></td></tr>
|
||||
<tr><td rowspan="3"><a href="#" class="toggle">SO71841</a></td><td>Rural Cycle Emporium</td><td>PO1798133189</td><td>Nov 23, 2007</td><td>$112,758.77</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Comment</div><div>Please send ATTN: Kathleen</div></td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>6388 Lake City Way<br>Burnaby, British Columbia V5A 3A6</div></td></tr>
|
||||
<tr><td rowspan="2"><a href="#" class="toggle">SO71842</a></td><td>Price-Cutter Discount Bikes</td><td>PO1740169151</td><td>Nov 22, 2007</td><td>$12.91</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>6700 Boul Taschereau<br>Brossard, Quebec J4Z 1C5</div></td></tr>
|
||||
<tr><td rowspan="2"><a href="#" class="toggle">SO71843</a></td><td>Future Bikes</td><td>PO2001122796</td><td>Jun 24, 2007</td><td>$7,775.72</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>67255 - 8th Street N.E., Suite 350<br>Calgary, Alberta T2P 2G8</div></td></tr>
|
||||
<tr><td rowspan="2"><a href="#" class="toggle">SO71844</a></td><td>Sales and Supply Company</td><td>PO2813198985</td><td>Jun 12, 2007</td><td>$48,077.41</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>Corporate Ofc A/p<br>123 Fourth Ave<br>Chantilly, Virginia 20151</div></td></tr>
|
||||
<tr><td rowspan="3"><a href="#" class="toggle">SO71845</a></td><td>Trailblazing Sports</td><td>PO2697119362</td><td>Mar 4, 2008</td><td>$45,992.37</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Comment</div><div>Please send ATTN: Frank</div></td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>251340 E. South St.<br>Cerritos, California 90703</div></td></tr>
|
||||
<tr><td rowspan="2"><a href="#" class="toggle">SO71846</a></td><td>Sports Store</td><td>PO2378131604</td><td>Jul 2, 2007</td><td>$2,711.41</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>Internet House, 3399 Science Park<br>Cambridge, England CB4 4BZ</div></td></tr>
|
||||
<tr><td rowspan="2"><a href="#" class="toggle">SO71847</a></td><td>Camping and Sports Store</td><td>PO18502143784</td><td>Jul 15, 2007</td><td>$119,981.15</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>400-25155 West Pender St<br>Vancouver, British Columbia V7L 4J4</div></td></tr>
|
||||
<tr><td rowspan="2"><a href="#" class="toggle">SO71848</a></td><td>Locks Company</td><td>PO18763153352</td><td>Nov 9, 2007</td><td>$16,667.88</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>70259 West Sunnyview Ave<br>Visalia, California 93291</div></td></tr>
|
||||
<tr><td rowspan="3"><a href="#" class="toggle">SO71849</a></td><td>Principal Bike Company</td><td>PO18125130930</td><td>Jan 18, 2008</td><td>$25,746.16</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Comment</div><div>Please send ATTN: Alvaro</div></td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>Mountain Square<br>Upland, California 91786</div></td></tr>
|
||||
<tr><td rowspan="2"><a href="#" class="toggle">SO71850</a></td><td>Quitting Business Distributors</td><td>PO18241134627</td><td>Aug 28, 2007</td><td>$10,492.47</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>University Plaza<br>Tampa, Florida 33602</div></td></tr>
|
||||
<tr><td rowspan="2"><a href="#" class="toggle">SO71851</a></td><td>Rapid Bikes</td><td>PO18299133687</td><td>Jun 17, 2007</td><td>$51,104.88</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>992 St Clair Ave East<br>Toronto, Ontario M4B 1V7</div></td></tr>
|
||||
<tr><td rowspan="2"><a href="#" class="toggle">SO71852</a></td><td>Painters Bicycle Specialists</td><td>PO20213171866</td><td>Mar 24, 2008</td><td>$10,406.62</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>9975 Union St.<br>Waterbury, Connecticut 06710</div></td></tr>
|
||||
<tr><td rowspan="3"><a href="#" class="toggle">SO71853</a></td><td>Famous Bike Shop</td><td>PO18531164420</td><td>May 3, 2007</td><td>$4,578.20</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Comment</div><div>Please send ATTN: Jim</div></td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>999 West Georgia St.<br>Vancouver, Ontario V5T 1Y9</div></td></tr>
|
||||
<tr><td rowspan="2"><a href="#" class="toggle">SO71854</a></td><td>Helpful Sales and Repair Service </td><td>PO16385143469</td><td>Nov 11, 2007</td><td>$36,819.69</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>Licensing Account<br>Seaford, Victoria 3198</div></td></tr>
|
||||
<tr><td rowspan="2"><a href="#" class="toggle">SO71855</a></td><td>Self-Contained Cycle Parts Company</td><td>PO18589189353</td><td>Jun 23, 2007</td><td>$429.62</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>12, rue des Grands Champs<br>Verrieres Le Buisson, Essonne 91370</div></td></tr>
|
||||
<tr><td rowspan="2"><a href="#" class="toggle">SO71856</a></td><td>Transport Bikes</td><td>PO16530177647</td><td>Nov 18, 2007</td><td>$665.43</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>25130 South State Street<br>Sandy, Utah 84070</div></td></tr>
|
||||
<tr><td rowspan="3"><a href="#" class="toggle">SO71857</a></td><td>First Cycle Store</td><td>PO16269151631</td><td>Jan 4, 2008</td><td>$37,400.41</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Comment</div><div>Please send ATTN: Mike</div></td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>25250 N 90th St<br>Scottsdale, Arizona 85257</div></td></tr>
|
||||
<tr><td rowspan="2"><a href="#" class="toggle">SO71858</a></td><td>Thrilling Bike Tours</td><td>PO16153112278</td><td>Oct 6, 2007</td><td>$15,275.20</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>4660 Rodeo Road<br>Santa Fe, New Mexico 87501</div></td></tr>
|
||||
<tr><td rowspan="2"><a href="#" class="toggle">SO71859</a></td><td>Bike World</td><td>PO16182112142</td><td>Apr 11, 2007</td><td>$8,654.14</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>60025 Bollinger Canyon Road<br>San Ramon, California 94583</div></td></tr>
|
||||
<tr><td rowspan="2"><a href="#" class="toggle">SO71860</a></td><td>Vinyl and Plastic Goods Corporation</td><td>PO17835163979</td><td>Feb 20, 2008</td><td>$3,651.79</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>No. 25800-130 King Street West<br>Toronto, Ontario M4B 1V5</div></td></tr>
|
||||
<tr><td rowspan="3"><a href="#" class="toggle">SO71861</a></td><td>Two Bike Shops</td><td>PO14152156429</td><td>Nov 30, 2007</td><td>$2,430.32</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Comment</div><div>Please send ATTN: Jim</div></td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>35525-9th Street Sw<br>Puyallup, Washington 98371</div></td></tr>
|
||||
<tr><td rowspan="2"><a href="#" class="toggle">SO71862</a></td><td>Fad Outlet</td><td>PO14065190039</td><td>Feb 19, 2008</td><td>$1,622.62</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>2550 Ne Sandy Blvd<br>Portland, Oregon 97205</div></td></tr>
|
||||
<tr><td rowspan="2"><a href="#" class="toggle">SO71863</a></td><td>Sports Products Store</td><td>PO16124166561</td><td>Apr 30, 2007</td><td>$3,673.32</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>Po Box 252525<br>Santa Ana, California 92701</div></td></tr>
|
||||
<tr><td rowspan="2"><a href="#" class="toggle">SO71864</a></td><td>Good Bike Shop</td><td>PO14268188903</td><td>Oct 9, 2007</td><td>$37,623.76</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>99433 S. Greenbay Rd.<br>Racine, Wisconsin 53182</div></td></tr>
|
||||
<tr><td rowspan="3"><a href="#" class="toggle">SO71865</a></td><td>Neighborhood Bicycle Storehouse</td><td>PO15109136609</td><td>May 30, 2007</td><td>$290.23</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Comment</div><div>Please send ATTN: Cecilia</div></td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>69, boulevard Tremblay<br>Roncq, Nord 59223</div></td></tr>
|
||||
<tr><td rowspan="2"><a href="#" class="toggle">SO71866</a></td><td>Exchange Parts Inc.</td><td>PO14297151936</td><td>Jan 27, 2008</td><td>$43,277.65</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>7700 Green Road<br>Raleigh, North Carolina 27603</div></td></tr>
|
||||
<tr><td rowspan="2"><a href="#" class="toggle">SO71867</a></td><td>Vigorous Sports Store</td><td>PO13050111529</td><td>Jul 29, 2007</td><td>$1,170.54</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>Banbury<br>Oxon, England OX16 8RS</div></td></tr>
|
||||
<tr><td rowspan="2"><a href="#" class="toggle">SO71868</a></td><td>Cycle Merchants</td><td>PO14210134527</td><td>Aug 15, 2007</td><td>$1,932.67</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>575 Rue St Amable<br>Quebec, Quebec G1R</div></td></tr>
|
||||
<tr><td rowspan="3"><a href="#" class="toggle">SO71869</a></td><td>Certified Sports Supply</td><td>PO14877155420</td><td>Feb 21, 2008</td><td>$143.50</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Comment</div><div>Please send ATTN: Gabriele</div></td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>250551 Shellbridge Way<br>Richmond, British Columbia V6B 3P7</div></td></tr>
|
||||
<tr><td rowspan="2"><a href="#" class="toggle">SO71870</a></td><td>Accessories Network</td><td>PO13195134898</td><td>Feb 1, 2008</td><td>$1,903.38</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>699bis, rue des Peupliers<br>Paris, Seine (Paris) 75008</div></td></tr>
|
||||
<tr><td rowspan="2"><a href="#" class="toggle">SO71871</a></td><td>Remote Bicycle Specialists</td><td>PO14239120760</td><td>Aug 10, 2007</td><td>$2,168.53</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>No. 2000-25080 Beaver Hall Hill<br>Quebec, Quebec G1R</div></td></tr>
|
||||
<tr><td rowspan="2"><a href="#" class="toggle">SO71872</a></td><td>First Center</td><td>PO13137112099</td><td>Jan 2, 2008</td><td>$215.91</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>22, rue Lafayette<br>Pantin, Seine Saint Denis 93500</div></td></tr>
|
||||
<tr><td rowspan="3"><a href="#" class="toggle">SO71873</a></td><td>Incomparable Bicycle Store</td><td>PO12325121185</td><td>Jul 5, 2007</td><td>$5,941.29</td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Comment</div><div>Please send ATTN: Faith</div></td></tr>
|
||||
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>99 Edgewater Drive<br>Norwood, Massachusetts 02062</div></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<div id="pager" class="pager">
|
||||
<form>
|
||||
<input type="button" value="<<" class="first" />
|
||||
<input type="button" value="<" class="prev" />
|
||||
<input type="text" class="pagedisplay"/>
|
||||
<input type="button" value=">" class="next" />
|
||||
<input type="button" value=">>" class="last" />
|
||||
<select class="pagesize">
|
||||
<option selected="selected" value="10">10</option>
|
||||
<option value="20">20</option>
|
||||
<option value="30">30</option>
|
||||
<option value="40">40</option>
|
||||
</select>
|
||||
</form>
|
||||
</div></div>
|
||||
|
||||
<h1>Javascript</h1>
|
||||
<div id="javascript">
|
||||
<pre class="prettyprint lang-javascript"></pre>
|
||||
</div>
|
||||
<h1>HTML</h1>
|
||||
<div>
|
||||
<pre class="prettyprint lang-html"><table class="tablesorter">
|
||||
<colgroup>
|
||||
<col width="85" />
|
||||
<col width="250" />
|
||||
<col width="100" />
|
||||
<col width="90" />
|
||||
<col width="70" />
|
||||
</colgroup>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Order #</th>
|
||||
<th>Customer</th>
|
||||
<th>PO</th>
|
||||
<th>Date</th>
|
||||
<th>Total</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td rowspan="2"> <!-- rowspan="2" makes the table look nicer -->
|
||||
<a href="#" class="toggle">SO71774</a> <!-- link to toggle view of the child row -->
|
||||
</td>
|
||||
<td>Good Toys</td>
|
||||
<td>PO348186287</td>
|
||||
<td>Jul 20, 2007</td>
|
||||
<td>$972.78</td>
|
||||
</tr>
|
||||
<tr class="tablesorter-childRow">
|
||||
<td colspan="4">
|
||||
<div class="bold">Shipping Address</div>
|
||||
<div>99700 Bell Road<br>Auburn, California 95603</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td rowspan="2"> <!-- rowspan="2" makes the table look nicer -->
|
||||
<a href="#" class="toggle">SO71775</a> <!-- link to toggle view of the child row -->
|
||||
</td>
|
||||
<td>Cycle Clearance</td>
|
||||
<td>PO58159451</td>
|
||||
<td>May 6, 2007</td>
|
||||
<td>$2,313.13</td>
|
||||
</tr>
|
||||
<tr class="tablesorter-childRow">
|
||||
<td colspan="4">
|
||||
<div class="bold">Shipping Address</div>
|
||||
<div>2255 254th Avenue Se<br>Albany, Oregon 97321</div>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<!-- View page source for complete HTML markup -->
|
||||
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<div id="pager" class="pager">
|
||||
<form>
|
||||
<input type="button" value="&lt;&lt;" class="first" />
|
||||
<input type="button" value="&lt;" class="prev" />
|
||||
<input type="text" class="pagedisplay"/>
|
||||
<input type="button" value="&gt;" class="next" />
|
||||
<input type="button" value="&gt;&gt;" class="last" />
|
||||
<select class="pagesize">
|
||||
<option selected="selected" value="10">10</option>
|
||||
<option value="20">20</option>
|
||||
<option value="30">30</option>
|
||||
<option value="40">40</option>
|
||||
</select>
|
||||
</form>
|
||||
</div></pre>
|
||||
</div>
|
||||
|
||||
<div class="next-up">
|
||||
<hr />
|
||||
Next up: <a href="example-child-rows-filtered.html">Child Rows with Filter Widget ››</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
97
assets/vendor/tablesorter/docs/example-empty-table.html
vendored
Normal file
97
assets/vendor/tablesorter/docs/example-empty-table.html
vendored
Normal file
@@ -0,0 +1,97 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery plugin: Tablesorter 2.0 - Initializing tablesorter on an empty table</title>
|
||||
|
||||
<!-- jQuery -->
|
||||
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
|
||||
|
||||
<!-- Demo stuff -->
|
||||
<link rel="stylesheet" href="css/jq.css">
|
||||
<link href="css/prettify.css" rel="stylesheet">
|
||||
<script src="js/prettify.js"></script>
|
||||
<script src="js/docs.js"></script>
|
||||
|
||||
<!-- Tablesorter: required -->
|
||||
<link rel="stylesheet" href="../css/theme.blue.css">
|
||||
<script src="../js/jquery.tablesorter.js"></script>
|
||||
|
||||
<script id="js">$(function() {
|
||||
|
||||
// Set up empty table with second and first columns pre-sorted
|
||||
$("table").tablesorter({ theme : 'blue', sortList: [[2,1],[0,0]] });
|
||||
|
||||
$("#append").click(function() {
|
||||
|
||||
// add some html
|
||||
var html = "<tr><td>Peter</td><td>Parker</td><td>28</td><td>$9.99</td><td>20%</td><td>Jul 6, 2006 8:14 AM</td></tr>" +
|
||||
"<tr><td>John</td><td>Hood</td><td>33</td><td>$19.99</td><td>25%</td><td>Dec 10, 2002 5:14 AM</td></tr><tr><td>Clark</td>" +
|
||||
"<td>Kent</td><td>18</td><td>$15.89</td><td>44%</td><td>Jan 12, 2003 11:14 AM</td></tr>" +
|
||||
"<tr><td>Bruce</td><td>Almighty</td><td>45</td><td>$153.19</td><td>44%</td><td>Jan 18, 2001 9:12 AM</td></tr>";
|
||||
|
||||
// append new html to table body
|
||||
$("table tbody").append(html);
|
||||
|
||||
// let the plugin know that we made a update, then the plugin will
|
||||
// automatically sort the table based on the header settings
|
||||
$("table").trigger("update");
|
||||
|
||||
return false;
|
||||
});
|
||||
|
||||
});</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="banner">
|
||||
<h1>table<em>sorter</em></h1>
|
||||
<h2>Initializing tablesorter on an empty table</h2>
|
||||
<h3>Flexible client-side table sorting</h3>
|
||||
<a href="index.html">Back to documentation</a>
|
||||
</div>
|
||||
|
||||
<div id="main">
|
||||
|
||||
<p class="tip">
|
||||
<em>NOTE!</em> The presorting of an empty table and automatic sorting of appended data was added in version 2.0.14 (not part of the original plugin).
|
||||
</p>
|
||||
|
||||
<h1>Demo</h1>
|
||||
<div id="demo"><table class="tablesorter">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>First Name</th>
|
||||
<th>Last Name</th>
|
||||
<th>Age</th>
|
||||
<th>Total</th>
|
||||
<th>Discount</th>
|
||||
<th>Date</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<a href="#" id="append">Append new table data</a>
|
||||
</div>
|
||||
|
||||
<h1>Javascript</h1>
|
||||
<div id="javascript">
|
||||
<pre class="prettyprint lang-javascript"></pre>
|
||||
</div>
|
||||
<h1>HTML</h1>
|
||||
<div id="html">
|
||||
<pre class="prettyprint lang-html"></pre>
|
||||
|
||||
<div class="next-up">
|
||||
<hr />
|
||||
Next up: <a href="example-ajax.html">Appending table data with ajax ››</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
117
assets/vendor/tablesorter/docs/example-extending-defaults.html
vendored
Normal file
117
assets/vendor/tablesorter/docs/example-extending-defaults.html
vendored
Normal file
@@ -0,0 +1,117 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery plugin: Tablesorter 2.0 - Extending default options</title>
|
||||
|
||||
<!-- jQuery -->
|
||||
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
|
||||
|
||||
<!-- Demo stuff -->
|
||||
<link rel="stylesheet" href="css/jq.css">
|
||||
<link href="css/prettify.css" rel="stylesheet">
|
||||
<script src="js/prettify.js"></script>
|
||||
<script src="js/docs.js"></script>
|
||||
|
||||
<!-- Tablesorter: required -->
|
||||
<link rel="stylesheet" href="../css/theme.blue.css">
|
||||
<script src="../js/jquery.tablesorter.js"></script>
|
||||
|
||||
<script id="js">$(function() {
|
||||
|
||||
// extend the default setting to always include the zebra widget.
|
||||
$.tablesorter.defaults.widgets = ['zebra'];
|
||||
|
||||
// extend the default setting to always sort on the first column
|
||||
$.tablesorter.defaults.sortList = [[0,0]];
|
||||
|
||||
// call the tablesorter plugin
|
||||
$("table").tablesorter({ theme : 'blue' });
|
||||
|
||||
}); </script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="banner">
|
||||
<h1>table<em>sorter</em></h1>
|
||||
<h2>Extending default options</h2>
|
||||
<h3>Flexible client-side table sorting</h3>
|
||||
<a href="index.html">Back to documentation</a>
|
||||
</div>
|
||||
|
||||
<div id="main">
|
||||
<h1>Demo</h1>
|
||||
<div id="demo"><table class="tablesorter">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>First Name</th>
|
||||
<th>Last Name</th>
|
||||
<th>Age</th>
|
||||
<th>Total</th>
|
||||
<th>Discount</th>
|
||||
<th>Date</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Peter</td>
|
||||
<td>Parker</td>
|
||||
<td>28</td>
|
||||
<td>$9.99</td>
|
||||
<td>20%</td>
|
||||
<td>Jul 6, 2006 8:14 AM</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>John</td>
|
||||
<td>Hood</td>
|
||||
<td>33</td>
|
||||
<td>$19.99</td>
|
||||
<td>25%</td>
|
||||
<td>Dec 10, 2002 5:14 AM</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Clark</td>
|
||||
<td>Kent</td>
|
||||
<td>18</td>
|
||||
<td>$15.89</td>
|
||||
<td>44%</td>
|
||||
<td>Jan 12, 2003 11:14 AM</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Bruce</td>
|
||||
<td>Almighty</td>
|
||||
<td>45</td>
|
||||
<td>$153.19</td>
|
||||
<td>44%</td>
|
||||
<td>Jan 18, 2001 9:12 AM</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Bruce</td>
|
||||
<td>Evans</td>
|
||||
<td>22</td>
|
||||
<td>$13.19</td>
|
||||
<td>11%</td>
|
||||
<td>Jan 18, 2007 9:12 AM</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table></div>
|
||||
|
||||
<h1>Javascript</h1>
|
||||
<div id="javascript">
|
||||
<pre class="prettyprint lang-javascript"></pre>
|
||||
</div>
|
||||
<h1>HTML</h1>
|
||||
<div id="html">
|
||||
<pre class="prettyprint lang-html"></pre>
|
||||
</div>
|
||||
|
||||
<div class="next-up">
|
||||
<hr />
|
||||
Next up: <a href="example-option-debug.html">Enabling debug mode ››</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
100
assets/vendor/tablesorter/docs/example-header-column-span.html
vendored
Normal file
100
assets/vendor/tablesorter/docs/example-header-column-span.html
vendored
Normal file
@@ -0,0 +1,100 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery plugin: Tablesorter 2.0 - Sorting Across Multiple Columns</title>
|
||||
|
||||
<!-- jQuery -->
|
||||
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
|
||||
|
||||
<!-- Demo stuff -->
|
||||
<link rel="stylesheet" href="css/jq.css">
|
||||
<link href="css/prettify.css" rel="stylesheet">
|
||||
<script src="js/prettify.js"></script>
|
||||
<script src="js/docs.js"></script>
|
||||
|
||||
<!-- Tablesorter: required -->
|
||||
<link rel="stylesheet" href="../css/theme.blue.css">
|
||||
<script src="../js/jquery.tablesorter.js"></script>
|
||||
|
||||
<script id="js">$(function() {
|
||||
$("table").tablesorter({ theme : 'blue' });
|
||||
});</script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="banner">
|
||||
<h1>table<em>sorter</em></h1>
|
||||
<h2>Sorting Across Multiple Columns</h2>
|
||||
<h3>Flexible client-side table sorting</h3>
|
||||
<a href="index.html">Back to documentation</a>
|
||||
</div>
|
||||
<div id="main">
|
||||
|
||||
<p class="tip">
|
||||
<em>NOTE!</em>
|
||||
<ul>
|
||||
<li>Clicking on any of the sortable header cells will cause all columns below it to sort.</li>
|
||||
<li>This demo will only work in tablesorter version 2.3+.</li>
|
||||
</ul>
|
||||
</p>
|
||||
|
||||
<h1>Demo</h1>
|
||||
<div id="demo"><table class="tablesorter">
|
||||
<thead>
|
||||
<tr>
|
||||
<th colspan="5">Sort All Columns</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th rowspan="2">Index</th>
|
||||
<th colspan="2">First Group</th>
|
||||
<th colspan="2">Second Group</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Natural Sort</th>
|
||||
<th>Numeric</th>
|
||||
<th id="test">Animals</th>
|
||||
<th >Url</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<th>Index</th>
|
||||
<th>Natural Sort</th>
|
||||
<th>Numeric</th>
|
||||
<th id="test">Animals</th>
|
||||
<th >Url</th>
|
||||
</tr>
|
||||
</tfoot>
|
||||
<tbody>
|
||||
<tr><td>0</td><td>abc 123</td><td>10</td><td>Koala</td><td>http://www.google.com</td></tr>
|
||||
<tr><td>1</td><td>abc 1</td><td>234</td><td>Ox</td><td>http://www.yahoo.com</td></tr>
|
||||
<tr><td>2</td><td>abc 9</td><td>10</td><td>Girafee</td><td>http://www.facebook.com</td></tr>
|
||||
<tr><td>3</td><td>zyx 24</td><td>767</td><td>Bison</td><td>http://www.whitehouse.gov/</td></tr>
|
||||
<tr><td>4</td><td>abc 11</td><td>3</td><td>Chimp</td><td>http://www.ucla.edu/</td></tr>
|
||||
<tr><td>5</td><td>abc 2</td><td>56</td><td>Elephant</td><td>http://www.wikipedia.org/</td></tr>
|
||||
<tr><td>6</td><td>abc 9</td><td>155</td><td>Lion</td><td>http://www.nytimes.com/</td></tr>
|
||||
<tr><td>7</td><td>ABC 10</td><td>87</td><td>Zebra</td><td>http://www.google.com</td></tr>
|
||||
<tr><td>8</td><td>zyx 1</td><td>999</td><td>Koala</td><td>http://www.mit.edu/</td></tr>
|
||||
<tr><td>9</td><td>zyx 12</td><td>0</td><td>Llama</td><td>http://www.nasa.gov/</td></tr>
|
||||
</tbody>
|
||||
</table></div>
|
||||
|
||||
<h1>Javascript</h1>
|
||||
<div id="javascript">
|
||||
<pre class="prettyprint lang-javascript"></pre>
|
||||
</div>
|
||||
<h1>HTML</h1>
|
||||
<div id="html">
|
||||
<pre class="prettyprint lang-html"></pre>
|
||||
</div>
|
||||
|
||||
<div class="next-up">
|
||||
<hr />
|
||||
Next up: <a href="example-option-show-processing.html">showProcessing & Filter events ››</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
169
assets/vendor/tablesorter/docs/example-locale-sort.html
vendored
Normal file
169
assets/vendor/tablesorter/docs/example-locale-sort.html
vendored
Normal file
@@ -0,0 +1,169 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery plugin: Tablesorter 2.0 - Sorting Accented Characters</title>
|
||||
|
||||
<!-- jQuery -->
|
||||
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
|
||||
|
||||
<!-- Demo stuff -->
|
||||
<link rel="stylesheet" href="css/jq.css">
|
||||
<link href="css/prettify.css" rel="stylesheet">
|
||||
<script src="js/prettify.js"></script>
|
||||
<script src="js/docs.js"></script>
|
||||
|
||||
<!-- Tablesorter: required -->
|
||||
<link rel="stylesheet" href="../css/theme.blue.css">
|
||||
<script src="../js/jquery.tablesorter.js"></script>
|
||||
|
||||
<script id="js">$(function() {
|
||||
|
||||
// these default equivalents were obtained from a table of equivalents
|
||||
// provided by sugar.js sorting alogrithms: http://sugarjs.com/sorting
|
||||
/*
|
||||
$.tablesorter.characterEquivalents = {
|
||||
"a" : "\u00e1\u00e0\u00e2\u00e3\u00e4", // áàâãä
|
||||
"A" : "\u00c1\u00c0\u00c2\u00c3\u00c4", // ÁÀÂÃÄ
|
||||
"c" : "\u00e7", // ç
|
||||
"C" : "\u00c7", // Ç
|
||||
"e" : "\u00e9\u00e8\u00ea\u00eb", // éèêë
|
||||
"E" : "\u00c9\u00c8\u00ca\u00cb", // ÉÈÊË
|
||||
"i" : "\u00ed\u00ec\u0130\u00ee\u00ef", // íìIîï
|
||||
"I" : "\u00cd\u00cc\u0130\u00ce\u00cf", // ÍÌIÎÏ
|
||||
"o" : "\u00f3\u00f2\u00f4\u00f5\u00f6", // óòôõö
|
||||
"O" : "\u00d3\u00d2\u00d4\u00d5\u00d6", // ÓÒÔÕÖ
|
||||
"S" : "\u00df", // ß
|
||||
"u" : "\u00fa\u00f9\u00fb\u00fc", // úùûü
|
||||
"U" : "\u00da\u00d9\u00db\u00dc" // ÚÙÛÜ
|
||||
};
|
||||
*/
|
||||
// modify the above defaults as follows
|
||||
$.extend( $.tablesorter.characterEquivalents, {
|
||||
"ae" : "\u00e6", // expanding characters æ Æ
|
||||
"AE" : "\u00c6",
|
||||
"oe" : "\u00f6\u0153", // œ Œ
|
||||
"OE" : "\u00d6\u0152",
|
||||
"d" : "\u00f0", // Eth (ð Ð)
|
||||
"D" : "\u00d0",
|
||||
"o" : "\u00f3\u00f2\u00f4\u00f5", // remove ö because it's in the oe now
|
||||
"O" : "\u00d3\u00d2\u00d4\u00d5" // remove Ö because it's in the OE now
|
||||
});
|
||||
|
||||
$("table").tablesorter({
|
||||
theme : 'blue',
|
||||
// Enable use of the characterEquivalents reference
|
||||
sortLocaleCompare : true,
|
||||
// if false, upper case sorts BEFORE lower case
|
||||
ignoreCase : true
|
||||
});
|
||||
});</script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="banner">
|
||||
<h1>table<em>sorter</em></h1>
|
||||
<h2>Sorting Accented Characters</h2>
|
||||
<h3>Flexible client-side table sorting</h3>
|
||||
<a href="index.html">Back to documentation</a>
|
||||
</div>
|
||||
<div id="main">
|
||||
|
||||
<p class="tip">
|
||||
<em>NOTE!</em>
|
||||
<ul>
|
||||
<li>Accented characters will get replaced by their character equivalent when the <code>sortLocaleCompare</code> option is <code>true</code>.</li>
|
||||
<li>In the javascript code block below you can see the default <code>$.tablesorter.characterEquivalents</code> table and an example of how to extend it to include other equivalents.</li>
|
||||
<li>If you have a specific language requirement, please refer to the <a href="https://github.com/Mottie/tablesorter/wiki/Language">Language</a> wiki pages to see if it is there. If not, please consider sharing the code or even just share the character equivalents themselves.</li>
|
||||
</ul>
|
||||
</p>
|
||||
|
||||
<h1>Demo</h1>
|
||||
<div id="demo"><table class="tablesorter">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Account #</th>
|
||||
<th>First Name</th>
|
||||
<th>Last Name</th>
|
||||
<th>Age</th>
|
||||
<th>Location</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>a1a10</td>
|
||||
<td>AnderE</td>
|
||||
<td>Parker</td>
|
||||
<td>28</td>
|
||||
<td>Béchar</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>a1a2</td>
|
||||
<td>Ändere</td>
|
||||
<td>Hood</td>
|
||||
<td>33</td>
|
||||
<td>Bebington</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>A1a1</td>
|
||||
<td>Andére</td>
|
||||
<td>Kent</td>
|
||||
<td>18</td>
|
||||
<td>Berlin</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>A2b2</td>
|
||||
<td>CotÉ</td>
|
||||
<td>Almighty</td>
|
||||
<td>45</td>
|
||||
<td>Beckum</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>A1d2</td>
|
||||
<td>CÔte</td>
|
||||
<td>Evans</td>
|
||||
<td>56</td>
|
||||
<td>Curaçao</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>a2b11</td>
|
||||
<td>CÔtÉ</td>
|
||||
<td>Clark</td>
|
||||
<td>44</td>
|
||||
<td>Béjaïa</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>A2b1</td>
|
||||
<td>Çote</td>
|
||||
<td>Presley</td>
|
||||
<td>24</td>
|
||||
<td>Bekkevoort</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>A1b0</td>
|
||||
<td>Andéré</td>
|
||||
<td>Carter</td>
|
||||
<td>40</td>
|
||||
<td>Bègles</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table></div>
|
||||
|
||||
<h1>Javascript</h1>
|
||||
<div id="javascript">
|
||||
<pre class="prettyprint lang-javascript"></pre>
|
||||
</div>
|
||||
<h1>HTML</h1>
|
||||
<div id="html">
|
||||
<pre class="prettyprint lang-html"></pre>
|
||||
</div>
|
||||
|
||||
<div class="next-up">
|
||||
<hr />
|
||||
Next up: <a href="example-multiple-tbodies.html">Sorting with Multiple Tbodies ››</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
118
assets/vendor/tablesorter/docs/example-meta-headers.html
vendored
Normal file
118
assets/vendor/tablesorter/docs/example-meta-headers.html
vendored
Normal file
@@ -0,0 +1,118 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery plugin: Tablesorter 2.0 - Disable headers using metadata</title>
|
||||
|
||||
<!-- jQuery -->
|
||||
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
|
||||
|
||||
<!-- Demo stuff -->
|
||||
<link rel="stylesheet" href="css/jq.css">
|
||||
<link href="css/prettify.css" rel="stylesheet">
|
||||
<script src="js/prettify.js"></script>
|
||||
<script src="js/docs.js"></script>
|
||||
|
||||
<!-- Tablesorter: required -->
|
||||
<link rel="stylesheet" href="../css/theme.blue.css">
|
||||
<script src="../js/jquery.tablesorter.js"></script>
|
||||
|
||||
<!-- Tablesorter: optional -->
|
||||
<script src="../addons/pager/jquery.tablesorter.pager.js"></script>
|
||||
<script src="../js/jquery.metadata.js"></script>
|
||||
|
||||
<script>
|
||||
// not sure why this is here...
|
||||
window.tableFile="table-metadata-disable.html";
|
||||
</script>
|
||||
|
||||
<script id="js">$(function() {
|
||||
// call the tablesorter plugin, the magic happens in the markup
|
||||
$("table").tablesorter({ theme : 'blue' });
|
||||
});</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="banner">
|
||||
<h1>table<em>sorter</em></h1>
|
||||
<h2>Disable headers using metadata</h2>
|
||||
<h3>Flexible client-side table sorting</h3>
|
||||
<a href="index.html">Back to documentation</a>
|
||||
</div>
|
||||
|
||||
<div id="main">
|
||||
<h1>Demo</h1>
|
||||
<div id="demo"><table class="tablesorter">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="{sorter: false}">First Name</th>
|
||||
<th>Last Name</th>
|
||||
<th>Age</th>
|
||||
<th>Total</th>
|
||||
<th class="{sorter: false}">Discount</th>
|
||||
<th>Date</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Peter</td>
|
||||
<td>Parker</td>
|
||||
<td>28</td>
|
||||
<td>$9.99</td>
|
||||
<td>20%</td>
|
||||
<td>Jul 6, 2006 8:14 AM</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>John</td>
|
||||
<td>Hood</td>
|
||||
<td>33</td>
|
||||
<td>$19.99</td>
|
||||
<td>25%</td>
|
||||
<td>Dec 10, 2002 5:14 AM</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Clark</td>
|
||||
<td>Kent</td>
|
||||
<td>18</td>
|
||||
<td>$15.89</td>
|
||||
<td>44%</td>
|
||||
<td>Jan 12, 2003 11:14 AM</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Bruce</td>
|
||||
<td>Almighty</td>
|
||||
<td>45</td>
|
||||
<td>$153.19</td>
|
||||
<td>44%</td>
|
||||
<td>Jan 18, 2001 9:12 AM</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Bruce</td>
|
||||
<td>Evans</td>
|
||||
<td>22</td>
|
||||
<td>$13.19</td>
|
||||
<td>11%</td>
|
||||
<td>Jan 18, 2007 9:12 AM</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table></div>
|
||||
|
||||
<h1>Javascript</h1>
|
||||
<div id="javascript">
|
||||
<pre class="prettyprint lang-javascript"></pre>
|
||||
</div>
|
||||
<h1>HTML</h1>
|
||||
<div id="html">
|
||||
<pre class="prettyprint lang-html"></pre>
|
||||
</div>
|
||||
|
||||
<div class="next-up">
|
||||
<hr />
|
||||
Next up: <a href="example-meta-parsers.html">Setting column parser using metadata ››</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
110
assets/vendor/tablesorter/docs/example-meta-parsers.html
vendored
Normal file
110
assets/vendor/tablesorter/docs/example-meta-parsers.html
vendored
Normal file
@@ -0,0 +1,110 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery plugin: Tablesorter 2.0 - Setting column parser using metadata</title>
|
||||
|
||||
<!-- jQuery -->
|
||||
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
|
||||
|
||||
<!-- Demo stuff -->
|
||||
<link rel="stylesheet" href="css/jq.css">
|
||||
<link href="css/prettify.css" rel="stylesheet">
|
||||
<script src="js/prettify.js"></script>
|
||||
<script src="js/docs.js"></script>
|
||||
|
||||
<!-- Tablesorter: required -->
|
||||
<link rel="stylesheet" href="../css/theme.blue.css">
|
||||
<script src="../js/jquery.tablesorter.js"></script>
|
||||
<script src="../js/jquery.metadata.js"></script>
|
||||
<script src="../addons/pager/jquery.tablesorter.pager.js"></script>
|
||||
|
||||
<script id="js">$(function() {
|
||||
// call the tablesorter plugin, the magic happens in the markup
|
||||
$("table").tablesorter({ theme : 'blue' });
|
||||
});</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="banner">
|
||||
<h1>table<em>sorter</em></h1>
|
||||
<h2>Setting column parser using metadata</h2>
|
||||
<h3>Flexible client-side table sorting</h3>
|
||||
<a href="index.html">Back to documentation</a>
|
||||
</div>
|
||||
|
||||
<div id="main">
|
||||
<h1>Demo</h1>
|
||||
<div id="demo"><table class="tablesorter">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="{sorter: 'text'}">First Name</th>
|
||||
<th>Last Name</th>
|
||||
<th>Age</th>
|
||||
<th>Total</th>
|
||||
<th class="{sorter: 'percent'}">Discount</th>
|
||||
<th>Date</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Peter</td>
|
||||
<td>Parker</td>
|
||||
<td>28</td>
|
||||
<td>$9.99</td>
|
||||
<td>20%</td>
|
||||
<td>Jul 6, 2006 8:14 AM</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>John</td>
|
||||
<td>Hood</td>
|
||||
<td>33</td>
|
||||
<td>$19.99</td>
|
||||
<td>25%</td>
|
||||
<td>Dec 10, 2002 5:14 AM</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Clark</td>
|
||||
<td>Kent</td>
|
||||
<td>18</td>
|
||||
<td>$15.89</td>
|
||||
<td>44%</td>
|
||||
<td>Jan 12, 2003 11:14 AM</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Bruce</td>
|
||||
<td>Almighty</td>
|
||||
<td>45</td>
|
||||
<td>$153.19</td>
|
||||
<td>44%</td>
|
||||
<td>Jan 18, 2001 9:12 AM</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Bruce</td>
|
||||
<td>Evans</td>
|
||||
<td>22</td>
|
||||
<td>$13.19</td>
|
||||
<td>11%</td>
|
||||
<td>Jan 18, 2007 9:12 AM</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table></div>
|
||||
|
||||
<h1>Javascript</h1>
|
||||
<div id="javascript">
|
||||
<pre class="prettyprint lang-javascript"></pre>
|
||||
</div>
|
||||
<h1>HTML</h1>
|
||||
<div id="html">
|
||||
<pre class="prettyprint lang-html"></pre>
|
||||
</div>
|
||||
|
||||
<div class="next-up">
|
||||
<hr />
|
||||
<a href="index.html">Back to documentation</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
112
assets/vendor/tablesorter/docs/example-meta-sort-list.html
vendored
Normal file
112
assets/vendor/tablesorter/docs/example-meta-sort-list.html
vendored
Normal file
@@ -0,0 +1,112 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery plugin: Tablesorter 2.0 - Setting initial sorting order with metadata</title>
|
||||
|
||||
<!-- jQuery -->
|
||||
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
|
||||
|
||||
<!-- Demo stuff -->
|
||||
<link rel="stylesheet" href="css/jq.css">
|
||||
<link href="css/prettify.css" rel="stylesheet">
|
||||
<script src="js/prettify.js"></script>
|
||||
<script src="js/docs.js"></script>
|
||||
|
||||
<!-- Tablesorter: required -->
|
||||
<link rel="stylesheet" href="../css/theme.blue.css">
|
||||
<script src="../js/jquery.tablesorter.js"></script>
|
||||
|
||||
<!-- Tablesorter: optional (but required for this demo) -->
|
||||
<script src="../js/jquery.metadata.js"></script>
|
||||
|
||||
<script id="js">$(function() {
|
||||
// call the tablesorter plugin, the magic happens in the markup
|
||||
$("table").tablesorter({ theme : 'blue' });
|
||||
});</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="banner">
|
||||
<h1>table<em>sorter</em></h1>
|
||||
<h2>Setting initial sorting order with metadata</h2>
|
||||
<h3>Flexible client-side table sorting</h3>
|
||||
<a href="index.html">Back to documentation</a>
|
||||
</div>
|
||||
|
||||
<div id="main">
|
||||
<h1>Demo</h1>
|
||||
<div id="demo"><!-- sortlist is appended to the table using the class attribute and is picked up by metadata plugin -->
|
||||
<table class="tablesorter {sortlist: [[0,0],[4,0]]}">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>First Name</th>
|
||||
<th>Last Name</th>
|
||||
<th>Age</th>
|
||||
<th>Total</th>
|
||||
<th>Discount</th>
|
||||
<th>Date</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Peter</td>
|
||||
<td>Parker</td>
|
||||
<td>28</td>
|
||||
<td>$9.99</td>
|
||||
<td>20%</td>
|
||||
<td>Jul 6, 2006 8:14 AM</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>John</td>
|
||||
<td>Hood</td>
|
||||
<td>33</td>
|
||||
<td>$19.99</td>
|
||||
<td>25%</td>
|
||||
<td>Dec 10, 2002 5:14 AM</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Clark</td>
|
||||
<td>Kent</td>
|
||||
<td>18</td>
|
||||
<td>$15.89</td>
|
||||
<td>44%</td>
|
||||
<td>Jan 12, 2003 11:14 AM</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Bruce</td>
|
||||
<td>Almighty</td>
|
||||
<td>45</td>
|
||||
<td>$153.19</td>
|
||||
<td>44%</td>
|
||||
<td>Jan 18, 2001 9:12 AM</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Bruce</td>
|
||||
<td>Evans</td>
|
||||
<td>22</td>
|
||||
<td>$13.19</td>
|
||||
<td>11%</td>
|
||||
<td>Jan 18, 2007 9:12 AM</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table></div>
|
||||
|
||||
<h1>Javascript</h1>
|
||||
<div id="javascript">
|
||||
<pre class="prettyprint lang-javascript"></pre>
|
||||
</div>
|
||||
<h1>HTML</h1>
|
||||
<div id="html">
|
||||
<pre class="prettyprint lang-html"></pre>
|
||||
</div>
|
||||
|
||||
<div class="next-up">
|
||||
<hr />
|
||||
Next up: <a href="example-meta-headers.html">Disable header using metadata ››</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
156
assets/vendor/tablesorter/docs/example-method-sortreset.html
vendored
Normal file
156
assets/vendor/tablesorter/docs/example-method-sortreset.html
vendored
Normal file
@@ -0,0 +1,156 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery plugin: Tablesorter 2.0 - resetting the entire table sort</title>
|
||||
|
||||
<!-- jQuery -->
|
||||
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.js"></script>
|
||||
|
||||
<!-- Demo stuff -->
|
||||
<link rel="stylesheet" href="css/jq.css">
|
||||
<link href="css/prettify.css" rel="stylesheet">
|
||||
<script src="js/prettify.js"></script>
|
||||
<script src="js/docs.js"></script>
|
||||
|
||||
<!-- Tablesorter: required -->
|
||||
<link rel="stylesheet" href="../css/theme.blue.css">
|
||||
<script src="../js/jquery.tablesorter.js"></script>
|
||||
|
||||
<script id="js">$(function() {
|
||||
// call the tablesorter plugin
|
||||
$("table").tablesorter({
|
||||
theme : 'blue',
|
||||
sortList: [ [0,0],[1,0],[2,0] ]
|
||||
});
|
||||
|
||||
$('button').click(function(){
|
||||
$('table').trigger('sortReset');
|
||||
return false;
|
||||
});
|
||||
|
||||
});</script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="banner">
|
||||
<h1>table<em>sorter</em></h1>
|
||||
<h2>Resetting the entire table sort</h2>
|
||||
<h3>Flexible client-side table sorting</h3>
|
||||
<a href="index.html">Back to documentation</a>
|
||||
</div>
|
||||
<div id="main">
|
||||
|
||||
<p class="tip">
|
||||
<em>NOTE!</em>
|
||||
<ul>
|
||||
<li>Click on the reset button to reset the sort. The button can be used at any time.</li>
|
||||
<li>Reset the table by triggering a <code>sortReset</code> event on the table (see the javascript code below).</li>
|
||||
<li>This method was added in version 2.4.7.</li>
|
||||
</ul>
|
||||
</p>
|
||||
|
||||
<h1>Demo</h1>
|
||||
<button type="button">Reset</button>
|
||||
<div id="demo"><table class="tablesorter">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Account #</th>
|
||||
<th>First Name</th>
|
||||
<th>Last Name</th>
|
||||
<th>Age</th>
|
||||
<th>Total</th>
|
||||
<th>Discount</th>
|
||||
<th>Diff</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>A43</td>
|
||||
<td>Peter</td>
|
||||
<td>Parker</td>
|
||||
<td>28</td>
|
||||
<td>9.99</td>
|
||||
<td>20.3%</td>
|
||||
<td>+3</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>A255</td>
|
||||
<td>John</td>
|
||||
<td>Hood</td>
|
||||
<td>33</td>
|
||||
<td>19.99</td>
|
||||
<td>25.1%</td>
|
||||
<td>-7</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>A33</td>
|
||||
<td>Clark</td>
|
||||
<td>Kent</td>
|
||||
<td>18</td>
|
||||
<td>2.89</td>
|
||||
<td>44.2%</td>
|
||||
<td>-15</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>A1</td>
|
||||
<td>Bruce</td>
|
||||
<td>Almighty</td>
|
||||
<td>45</td>
|
||||
<td>153.19</td>
|
||||
<td>44%</td>
|
||||
<td>+19</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>A102</td>
|
||||
<td>Bruce</td>
|
||||
<td>Evans</td>
|
||||
<td>56</td>
|
||||
<td>$153.19</td>
|
||||
<td>23%</td>
|
||||
<td>+9</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>A256</td>
|
||||
<td>John</td>
|
||||
<td>Clark</td>
|
||||
<td>44</td>
|
||||
<td>($19.89)</td>
|
||||
<td>25.1%</td>
|
||||
<td>(5)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>A23</td>
|
||||
<td>Elvis</td>
|
||||
<td>Presley</td>
|
||||
<td>24</td>
|
||||
<td>($9.99)</td>
|
||||
<td>50%</td>
|
||||
<td>(22)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>A10</td>
|
||||
<td>Frank</td>
|
||||
<td>Carter</td>
|
||||
<td>40</td>
|
||||
<td>-12.99</td>
|
||||
<td>20%</td>
|
||||
<td>(6)</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table></div>
|
||||
|
||||
<h1>Javascript</h1>
|
||||
<div id="javascript">
|
||||
<pre class="prettyprint lang-javascript"></pre>
|
||||
</div>
|
||||
|
||||
<div class="next-up">
|
||||
<hr />
|
||||
Next up: <a href="example-option-selectorsort.html">Using selectorSort ››</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
109
assets/vendor/tablesorter/docs/example-multiple-tbodies.html
vendored
Normal file
109
assets/vendor/tablesorter/docs/example-multiple-tbodies.html
vendored
Normal file
@@ -0,0 +1,109 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery plugin: Tablesorter 2.0 - Sorting with Multiple Tbodies</title>
|
||||
|
||||
<!-- jQuery -->
|
||||
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
|
||||
|
||||
<!-- Demo stuff -->
|
||||
<link rel="stylesheet" href="css/jq.css">
|
||||
<link href="css/prettify.css" rel="stylesheet">
|
||||
<script src="js/prettify.js"></script>
|
||||
<script src="js/docs.js"></script>
|
||||
|
||||
<!-- Tablesorter: required -->
|
||||
<link rel="stylesheet" href="../css/theme.blue.css">
|
||||
<script src="../js/jquery.tablesorter.js"></script>
|
||||
|
||||
<!-- Tablesorter: widgets (optional) -->
|
||||
<script src="../js/jquery.tablesorter.widgets.js"></script>
|
||||
|
||||
<script id="js">$(function() {
|
||||
|
||||
$("table").tablesorter({
|
||||
theme : 'blue',
|
||||
cssInfoBlock : "tablesorter-no-sort",
|
||||
widgets: [ 'zebra', 'stickyHeaders' ]
|
||||
});
|
||||
|
||||
});</script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="banner">
|
||||
<h1>table<em>sorter</em></h1>
|
||||
<h2>Sorting with Multiple Tbodies</h2>
|
||||
<h3>Flexible client-side table sorting</h3>
|
||||
<a href="index.html">Back to documentation</a>
|
||||
</div>
|
||||
<div id="main">
|
||||
<h1>Demo</h1>
|
||||
<div id="demo"><table class="sortable">
|
||||
<thead>
|
||||
<tr><th>Name</th><th>A-head</th><th>B-head</th><th>C-head</th></tr>
|
||||
</thead>
|
||||
<tfoot>
|
||||
<tr><th>Name</th><th>A-foot</th><th>B-foot</th><th>C-foot</th></tr>
|
||||
</tfoot>
|
||||
|
||||
<!-- add "tablesorter-no-sort" class (changed by cssInfoBlock option) to skip sorting of this tbody -->
|
||||
<tbody class="tablesorter-no-sort">
|
||||
<tr><th colspan="4">This row is within the first tbody set as an info block - it is not sorted!</th></tr>
|
||||
</tbody>
|
||||
|
||||
<tbody>
|
||||
<tr><td>DDD</td><td>r1c1</td><td>r1c2</td><td>r1c3</td></tr>
|
||||
<tr><td>AAA</td><td>r2c1</td><td>r2c2</td><td>r2c3</td></tr>
|
||||
<tr><td>CCC</td><td>r3c1</td><td>r3c2</td><td>r3c3</td></tr>
|
||||
<tr><td>BBB</td><td>r4c1</td><td>r4c2</td><td>r4c3</td></tr>
|
||||
</tbody>
|
||||
|
||||
<tbody class="tablesorter-no-sort">
|
||||
<tr><th colspan="4">summary info for the first group</th></tr>
|
||||
<tr><th colspan="4">Another row referring to the first group</th></tr>
|
||||
</tbody>
|
||||
|
||||
<tbody>
|
||||
<tr><td>Zorro</td><td>r5c1</td><td>r5c2</td><td>r5c3</td></tr>
|
||||
<tr><td>Caleb</td><td>r6c1</td><td>r6c2</td><td>r6c3</td></tr>
|
||||
<tr><td>Momo</td><td>r7c1</td><td>r7c2</td><td>r7c3</td></tr>
|
||||
<tr><td>Wolfie</td><td>r8c1</td><td>r8c2</td><td>r8c3</td></tr>
|
||||
</tbody>
|
||||
|
||||
<tbody class="tablesorter-no-sort">
|
||||
<tr><th colspan="4">summary info for the second group</th></tr>
|
||||
</tbody>
|
||||
|
||||
<tbody>
|
||||
<tr><td>Ulysses</td><td>r9c1</td><td>r9c2</td><td>r9c3</td></tr>
|
||||
<tr><td>Penelope</td><td>r10c1</td><td>r10c2</td><td>r10c3</td></tr>
|
||||
<tr><td>Edvald</td><td>r11c1</td><td>r11c2</td><td>r11c3</td></tr>
|
||||
<tr><td>Jan</td><td>r12c1</td><td>r12c2</td><td>r12c3</td></tr>
|
||||
</tbody>
|
||||
|
||||
<tbody class="tablesorter-no-sort">
|
||||
<tr><th colspan="4">summary info for the last group</th></tr>
|
||||
</tbody>
|
||||
|
||||
</table></div>
|
||||
|
||||
<h1>Javascript</h1>
|
||||
<div id="javascript">
|
||||
<pre class="prettyprint lang-javascript"></pre>
|
||||
</div>
|
||||
<h1>HTML</h1>
|
||||
<div id="html">
|
||||
<pre class="prettyprint lang-html"></pre>
|
||||
</div>
|
||||
|
||||
<div class="next-up">
|
||||
<hr />
|
||||
Next up: <a href="example-header-column-span.html">Sorting Across Multiple Columns ››</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
142
assets/vendor/tablesorter/docs/example-option-custom-sort.html
vendored
Normal file
142
assets/vendor/tablesorter/docs/example-option-custom-sort.html
vendored
Normal file
@@ -0,0 +1,142 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery plugin: Tablesorter 2.0 - Using a Custom Sort Script</title>
|
||||
|
||||
<!-- jQuery -->
|
||||
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
|
||||
|
||||
<!-- Demo stuff -->
|
||||
<link rel="stylesheet" href="css/jq.css">
|
||||
<link href="css/prettify.css" rel="stylesheet">
|
||||
<script src="js/prettify.js"></script>
|
||||
<script src="js/docs.js"></script>
|
||||
|
||||
<!-- Tablesorter: required -->
|
||||
<link rel="stylesheet" href="../css/theme.blue.css">
|
||||
<script src="../js/jquery.tablesorter.js"></script>
|
||||
|
||||
<!-- http://sugarjs.com/dates#comparing_dates -->
|
||||
<script src="http://sugarjs.com/release/current/sugar.min.js"></script>
|
||||
|
||||
<script id="js">$(function() {
|
||||
// define sugar.js Icelandic sort order
|
||||
Array.AlphanumericSortOrder = 'AaÁáBbCcDdÐðEeÉéĘęFfGgHhIiÍíJjKkLlMmNnOoÓóPpQqRrSsTtUuÚúVvWwXxYyÝýZzÞþÆæÖö';
|
||||
Array.AlphanumericSortIgnoreCase = true;
|
||||
|
||||
$("table").tablesorter({
|
||||
theme : 'blue',
|
||||
// table = table object; get config options from table.config
|
||||
// column is the column index (zero-based)
|
||||
ignoreCase : false,
|
||||
textSorter : {
|
||||
1 : Array.AlphanumericSort, // alphanumeric sort from sugar (http://sugarjs.com/arrays#sorting)
|
||||
// function parameters were previously (a, b, table, column) - *** THEY HAVE CHANGED!!! ***
|
||||
2 : function(a, b, direction, column, table){
|
||||
// this is the original sort method from tablesorter 2.0.3
|
||||
if (table.config.sortLocaleCompare) { return a.localeCompare(b); }
|
||||
return ((a < b) ? -1 : ((a > b) ? 1 : 0));
|
||||
},
|
||||
// no need to set this as it is the default sorter
|
||||
// renamed v2.12 from $.tablesorter.sortText - performs natural sort
|
||||
3 : $.tablesorter.sortNatural,
|
||||
}
|
||||
});
|
||||
});</script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="banner">
|
||||
<h1>table<em>sorter</em></h1>
|
||||
<h2>Using a Custom Sort Script</h2>
|
||||
<h3>Flexible client-side table sorting</h3>
|
||||
<a href="index.html">Back to documentation</a>
|
||||
</div>
|
||||
<div id="main">
|
||||
|
||||
<p class="tip">
|
||||
<em>NOTE!</em>
|
||||
<ul>
|
||||
<li>Modified the <code>textSorter</code> option to allow setting the sorter per column <span class="version">v2.12</span>:
|
||||
<ul>
|
||||
<li><span class="alert">*NOTE*</span> The <code>textSorter</code> function parameters have changed! It is now <code>function(a, b, direction, column, table)</code> (previously <code>function(a, b, table, column)</code>).</li>
|
||||
<li>The "Icelandic Alphabet" column is using the <a href="http://sugarjs.com/arrays#sorting">Sugar</a> library to sort - please note that at the time of this writing, there is an issue with it not sorting properly (<a href="https://github.com/andrewplummer/Sugar/issues/382">ref</a>) - you can tell when it starts working properly when you sort the Icelandic Alphabet column and the numeric column numbers are sequential (<span class="lookhere">see row #37</span>).</li>
|
||||
<li>The "Plain Text Sort" column is using a basic alphabetical sort (with localeCompare if set). Sort that column, then the last column to see how it differs from an alphanumeric sort.</li>
|
||||
<li>The sorting of empty cells still occurs regardless of the custom <code>textSorter</code> setting.</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>One custom sort used here is from the original tablesorter plugin v2.0.3. Sort the <del>first</del> "Plain Text Sort" column to see how it sorts alphanumeric data.</li>
|
||||
<li>This option is not part of the original plugin (v2.2).</li>
|
||||
</ul>
|
||||
</p>
|
||||
<h1>Demo</h1>
|
||||
|
||||
<div id="demo"><table class="tablesorter">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Numeric</th>
|
||||
<th>Icelandic Alphabet</th>
|
||||
<th>Plain Text Sort</th>
|
||||
<th>Alphanumeric Sort</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>01</td><td>A</td><td>a1a10</td><td>a1a10</td></tr>
|
||||
<tr><td>02</td><td>Á</td><td>a1a1</td><td>a1a1</td></tr>
|
||||
<tr><td>03</td><td>B</td><td>a2b2</td><td>a2b2</td></tr>
|
||||
<tr><td>04</td><td>C</td><td>a1a3</td><td>a1a3</td></tr>
|
||||
<tr><td>05</td><td>D</td><td>a2b10</td><td>a2b10</td></tr>
|
||||
<tr><td>06</td><td>Ð</td><td>a1a20</td><td>a1a20</td></tr>
|
||||
<tr><td>07</td><td>E</td><td>a1b04</td><td>a1b04</td></tr>
|
||||
<tr><td>08</td><td>É</td><td>a1a0</td><td>a1a0</td></tr>
|
||||
<tr><td>09</td><td>Ę</td><td>a1a4</td><td>a1a4</td></tr>
|
||||
<tr><td>10</td><td>F</td><td>a1a6</td><td>a1a6</td></tr>
|
||||
<tr><td>11</td><td>G</td><td>a1b5</td><td>a1b5</td></tr>
|
||||
<tr><td>12</td><td>H</td><td>a1b99</td><td>a1b99</td></tr>
|
||||
<tr><td>13</td><td>I</td><td>a2b5</td><td>a2b5</td></tr>
|
||||
<tr><td>14</td><td>Í</td><td>b10</td><td>b10</td></tr>
|
||||
<tr><td>15</td><td>J</td><td>b3</td><td>b3</td></tr>
|
||||
<tr><td>16</td><td>K</td><td>b5</td><td>b5</td></tr>
|
||||
<tr><td>17</td><td>L</td><td>b7</td><td>b7</td></tr>
|
||||
<tr><td>18</td><td>M</td><td>b9</td><td>b9</td></tr>
|
||||
<tr><td>19</td><td>N</td><td>b12</td><td>b12</td></tr>
|
||||
<tr><td>20</td><td>O</td><td>b30</td><td>b30</td></tr>
|
||||
<tr><td>21</td><td>Ó</td><td>b45</td><td>b45</td></tr>
|
||||
<tr><td>22</td><td>P</td><td>b78</td><td>b78</td></tr>
|
||||
<tr><td>23</td><td>Q</td><td>b67</td><td>b67</td></tr>
|
||||
<tr><td>24</td><td>R</td><td>b62</td><td>b62</td></tr>
|
||||
<tr><td>25</td><td>S</td><td>b01</td><td>b01</td></tr>
|
||||
<tr><td>26</td><td>T</td><td>b0</td><td>b0</td></tr>
|
||||
<tr><td>27</td><td>U</td><td>b77</td><td>b77</td></tr>
|
||||
<tr><td>28</td><td>Ú</td><td>b96</td><td>b96</td></tr>
|
||||
<tr><td>29</td><td>V</td><td>a1b55</td><td>a1b55</td></tr>
|
||||
<tr><td>30</td><td>W</td><td>a1b84</td><td>a1b84</td></tr>
|
||||
<tr><td>31</td><td>X</td><td>b25</td><td>b25</td></tr>
|
||||
<tr><td>32</td><td>Y</td><td>b41</td><td>b41</td></tr>
|
||||
<tr><td>33</td><td>Ý</td><td>b79</td><td>b79</td></tr>
|
||||
<tr><td>34</td><td>Z</td><td>b49</td><td>b49</td></tr>
|
||||
<tr><td>35</td><td>Þ</td><td>b94</td><td>b94</td></tr>
|
||||
<tr><td>36</td><td>Æ</td><td>b118</td><td>b118</td></tr>
|
||||
<tr><td>37</td><td class="lookhere">Ö</td><td>b80</td><td>b80</td></tr>
|
||||
</tbody>
|
||||
</table></div>
|
||||
|
||||
<h1>Javascript</h1>
|
||||
<div id="javascript">
|
||||
<pre class="prettyprint lang-javascript"></pre>
|
||||
</div>
|
||||
<h1>HTML</h1>
|
||||
<div id="html">
|
||||
<pre class="prettyprint lang-html"></pre>
|
||||
</div>
|
||||
|
||||
<div class="next-up">
|
||||
<hr />
|
||||
Next up: <a href="example-locale-sort.html">Sorting Accented Characters ››</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
176
assets/vendor/tablesorter/docs/example-option-date-format.html
vendored
Normal file
176
assets/vendor/tablesorter/docs/example-option-date-format.html
vendored
Normal file
@@ -0,0 +1,176 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery plugin: Tablesorter 2.0 - Changing the date format</title>
|
||||
|
||||
<!-- jQuery -->
|
||||
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
|
||||
|
||||
<!-- Demo stuff -->
|
||||
<link rel="stylesheet" href="css/jq.css">
|
||||
<link href="css/prettify.css" rel="stylesheet">
|
||||
<script src="js/prettify.js"></script>
|
||||
<script src="js/docs.js"></script>
|
||||
|
||||
<!-- Tablesorter: required -->
|
||||
<link rel="stylesheet" href="../css/theme.blue.css">
|
||||
<script src="../js/jquery.tablesorter.js"></script>
|
||||
|
||||
<script id="js">$(function() {
|
||||
// call the tablesorter plugin
|
||||
$("table").tablesorter({
|
||||
theme : 'blue',
|
||||
|
||||
dateFormat : "mmddyyyy", // set the default date format
|
||||
|
||||
// or to change the format for specific columns, add the dateFormat to the headers option:
|
||||
headers: {
|
||||
0: { sorter: "shortDate" } //, dateFormat will parsed as the default above
|
||||
// 1: { sorter: "shortDate", dateFormat: "ddmmyyyy" }, // set day first format; set using class names
|
||||
// 2: { sorter: "shortDate", dateFormat: "yyyymmdd" } // set year first format; set using data attributes (jQuery data)
|
||||
}
|
||||
|
||||
});
|
||||
});</script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="banner">
|
||||
<h1>table<em>sorter</em></h1>
|
||||
<h2>Changing the date format</h2>
|
||||
<h3>Flexible client-side table sorting</h3>
|
||||
<a href="index.html">Back to documentation</a>
|
||||
</div>
|
||||
<div id="main">
|
||||
|
||||
<p class="tip">
|
||||
<em>NOTE!</em>
|
||||
<ul>
|
||||
<li>The dateFormat option was modified in version 2.0.23 (not part of the original plugin).</li>
|
||||
<li>The dateFormat option will ONLY work with the <code>shortDate</code> parser.</li>
|
||||
<li>The date can be separated by any of the following: slash, dash, period, comma, space(s) or tab (/-., ).</li>
|
||||
<li>This date format parser will only work with a four digit year. You can <a href="example-parsers.html">write your own</a> if you need a two digit year parser.</a>
|
||||
<li>In versions 2.3+, columns can be disabled using any of the following methods (they all do the same thing), in order of priority:
|
||||
<ul>
|
||||
<li>jQuery data <code>data-date-format="mmddyyyy"</code> (see the Javascript block below on how to set it directly; <code>data-dateFormat</code> is equivalent to <code>data-date-format</code>).</li>
|
||||
<li>metadata <code>class="{ dateFormat: "mmddyyyy" }"</code>. This requires the metadata plugin.</li>
|
||||
<li>headers option <code>headers : { 0 : { dateFormat: "mmddyyyy" } }</code>.</li>
|
||||
<li>header class name <code>class="dateFormat-mmddyyyy"</code>.</li>
|
||||
<li>overall <code>dateFormat</code> option setting.</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</p>
|
||||
|
||||
<h1>Demo</h1>
|
||||
<div id="demo"><table class="tablesorter">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Date MMDDYYYY</th>
|
||||
<th class="sorter-shortDate dateFormat-ddmmyyyy">Date DDMMYYYY</th>
|
||||
<th data-sorter="shortDate" data-date-format="yyyymmdd">Date YYYYMMDD</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>8-7-2011</td>
|
||||
<td>7-8-2011</td>
|
||||
<td>2011-8-7</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>11/1/2011 12:34 AM</td>
|
||||
<td>1/11/2011 12:34 AM</td>
|
||||
<td>2011/11/1 12:34 AM</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>12/28/2011</td>
|
||||
<td>28/12/2011</td>
|
||||
<td>2011/12/28</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>6 30 2011</td>
|
||||
<td>30 6 2011</td>
|
||||
<td>2011 6 30</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>11/1/2011 12:35 AM</td>
|
||||
<td>1/11/2011 12:35 AM</td>
|
||||
<td>2011/11/1 12:35 AM</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>3.4.2011</td>
|
||||
<td>4.3.2011</td>
|
||||
<td>2011.3.4</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>07 01-2011 1:15 PM</td>
|
||||
<td>01 7-2011 1:15 PM</td>
|
||||
<td>2011-7 01 1:15 PM</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>04/5,2011</td>
|
||||
<td>5/04,2011</td>
|
||||
<td>2011,04/5</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>11/1/2011 12:34 PM</td>
|
||||
<td>1/11/2011 12:34 PM</td>
|
||||
<td>2011/11/1 12:34 PM</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>1/21 2011</td>
|
||||
<td>21.1/2011</td>
|
||||
<td>2011/1.21</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>5.24-2011</td>
|
||||
<td>24.5-2011</td>
|
||||
<td>2011-5.24</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>07/01-2011 12:15 PM</td>
|
||||
<td>01-7/2011 12:15 PM</td>
|
||||
<td>2011/7-01 12:15 PM</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>10,14,2011</td>
|
||||
<td>14,10,2011</td>
|
||||
<td>2011,10,14</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>09 07 2011</td> <!-- lot of spaces between the numbers -->
|
||||
<td>07 09 2011</td>
|
||||
<td>2011 09 07</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2 27.2011</td>
|
||||
<td>27 2.2011</td>
|
||||
<td>2011 2 27</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>8 07 2010</td> <!-- separated by tabs -->
|
||||
<td>07 8 2010</td>
|
||||
<td>2010 8 07</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table></div>
|
||||
|
||||
<h1>Javascript</h1>
|
||||
<div id="javascript">
|
||||
<pre class="prettyprint lang-javascript"></pre>
|
||||
</div>
|
||||
<h1>HTML</h1>
|
||||
<div id="html">
|
||||
<pre class="prettyprint lang-html"></pre>
|
||||
</div>
|
||||
|
||||
<div class="next-up">
|
||||
<hr />
|
||||
Next up: <a href="example-parsers.html">Parser, writing your own ››</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
119
assets/vendor/tablesorter/docs/example-option-debug.html
vendored
Normal file
119
assets/vendor/tablesorter/docs/example-option-debug.html
vendored
Normal file
@@ -0,0 +1,119 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery plugin: Tablesorter 2.0 - Enabling debug mode</title>
|
||||
|
||||
<!-- jQuery -->
|
||||
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
|
||||
|
||||
<!-- Demo stuff -->
|
||||
<link rel="stylesheet" href="css/jq.css">
|
||||
<link href="css/prettify.css" rel="stylesheet">
|
||||
<script src="js/prettify.js"></script>
|
||||
<script src="js/docs.js"></script>
|
||||
|
||||
<!-- Tablesorter: required -->
|
||||
<link rel="stylesheet" href="../css/theme.blue.css">
|
||||
<script src="../js/jquery.tablesorter.js"></script>
|
||||
|
||||
<script id="js">$(function() {
|
||||
|
||||
// call the tablesorter plugin
|
||||
$("table").tablesorter({
|
||||
theme : 'blue',
|
||||
// enable debug mode
|
||||
debug: true
|
||||
});
|
||||
|
||||
});</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="banner">
|
||||
<h1>table<em>sorter</em></h1>
|
||||
<h2>Enabling debug mode</h2>
|
||||
<h3>Flexible client-side table sorting</h3>
|
||||
<a href="index.html">Back to documentation</a>
|
||||
</div>
|
||||
|
||||
<div id="main">
|
||||
<p class="tip">
|
||||
<em>NOTE!</em> If firebug is installed the debuging information will be displayed in the firebug console.
|
||||
</p>
|
||||
|
||||
<h1>Demo</h1>
|
||||
<div id="demo"><table class="tablesorter">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>First Name</th>
|
||||
<th>Last Name</th>
|
||||
<th>Age</th>
|
||||
<th>Total</th>
|
||||
<th>Discount</th>
|
||||
<th>Date</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Peter</td>
|
||||
<td>Parker</td>
|
||||
<td>28</td>
|
||||
<td>$9.99</td>
|
||||
<td>20%</td>
|
||||
<td>Jul 6, 2006 8:14 AM</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>John</td>
|
||||
<td>Hood</td>
|
||||
<td>33</td>
|
||||
<td>$19.99</td>
|
||||
<td>25%</td>
|
||||
<td>Dec 10, 2002 5:14 AM</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Clark</td>
|
||||
<td>Kent</td>
|
||||
<td>18</td>
|
||||
<td>$15.89</td>
|
||||
<td>44%</td>
|
||||
<td>Jan 12, 2003 11:14 AM</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Bruce</td>
|
||||
<td>Almighty</td>
|
||||
<td>45</td>
|
||||
<td>$153.19</td>
|
||||
<td>44%</td>
|
||||
<td>Jan 18, 2001 9:12 AM</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Bruce</td>
|
||||
<td>Evans</td>
|
||||
<td>22</td>
|
||||
<td>$13.19</td>
|
||||
<td>11%</td>
|
||||
<td>Jan 18, 2007 9:12 AM</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table></div>
|
||||
|
||||
<h1>Javascript</h1>
|
||||
<div id="javascript">
|
||||
<pre class="prettyprint lang-javascript"></pre>
|
||||
</div>
|
||||
<h1>HTML</h1>
|
||||
<div id="html">
|
||||
<pre class="prettyprint lang-html"></pre>
|
||||
</div>
|
||||
|
||||
<div class="next-up">
|
||||
<hr />
|
||||
Next up: <a href="example-meta-sort-list.html">Set a initial sorting order using metadata ››</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
72672
assets/vendor/tablesorter/docs/example-option-delay-init.html
vendored
Normal file
72672
assets/vendor/tablesorter/docs/example-option-delay-init.html
vendored
Normal file
File diff suppressed because it is too large
Load Diff
153
assets/vendor/tablesorter/docs/example-option-digits.html
vendored
Normal file
153
assets/vendor/tablesorter/docs/example-option-digits.html
vendored
Normal file
@@ -0,0 +1,153 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery plugin: Tablesorter 2.0 - Dealing with Digits</title>
|
||||
|
||||
<!-- jQuery -->
|
||||
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2/jquery.js"></script>
|
||||
|
||||
<!-- Demo stuff -->
|
||||
<link rel="stylesheet" href="css/jq.css">
|
||||
<link href="css/prettify.css" rel="stylesheet">
|
||||
<script src="js/prettify.js"></script>
|
||||
<script src="js/docs.js"></script>
|
||||
|
||||
<!-- Tablesorter: required -->
|
||||
<link rel="stylesheet" href="../css/theme.blue.css">
|
||||
<script src="../js/jquery.tablesorter.js"></script>
|
||||
|
||||
<script id="js">$(function() {
|
||||
// call the tablesorter plugin
|
||||
$("table").tablesorter({ theme : 'blue' });
|
||||
});</script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="banner">
|
||||
<h1>table<em>sorter</em></h1>
|
||||
<h2>Dealing with digits</h2>
|
||||
<h3>Flexible client-side table sorting</h3>
|
||||
<a href="index.html">Back to documentation</a>
|
||||
</div>
|
||||
<div id="main">
|
||||
|
||||
<p class="tip">
|
||||
<em>NOTE!</em>
|
||||
<ul>
|
||||
<li>Click on any column header to sort that column.</li>
|
||||
<li>The alphanumeric sort working in the first column was added in version 2.0.6 (not part of the original plugin).</li>
|
||||
<li>The above sort was replaced with a natural sort in version 2.2.</li>
|
||||
<li>This example demonstrates that common table values are auto-detected (including plain text, currency, percentages, and positive & negative numbers), so there is no need to set a specific parser unless you notice an issue with how a column is sorting.</li>
|
||||
<li>Issues may arise if a column contains mixed data, e.g. "N/A" is located at the top of a numeric column; in this case the column will be detected as a text column and not a numeric column. If issues occur, add a <code>sorter-digit</code> class name to that header cell.</li>
|
||||
</ul>
|
||||
</p>
|
||||
|
||||
<h1>Demo</h1>
|
||||
<div id="demo"><!-- the data-sortlist won't apply because it is supported by jQuery v1.4+; and this demo is using jQuery v1.2.6 -->
|
||||
<table class="tablesorter" data-sortlist="[[0,0]]">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Account #</th>
|
||||
<th>First Name</th>
|
||||
<th>Last Name</th>
|
||||
<th>Age</th>
|
||||
<th>Total</th>
|
||||
<th>Discount</th>
|
||||
<th>Diff</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>A43</td>
|
||||
<td>Peter</td>
|
||||
<td>Parker</td>
|
||||
<td>28</td>
|
||||
<td>9.99</td>
|
||||
<td>20.3%</td>
|
||||
<td>+3</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>A255</td>
|
||||
<td>John</td>
|
||||
<td>Hood</td>
|
||||
<td>33</td>
|
||||
<td>19.99</td>
|
||||
<td>25.1%</td>
|
||||
<td>-7</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>A33</td>
|
||||
<td>Clark</td>
|
||||
<td>Kent</td>
|
||||
<td>18</td>
|
||||
<td>2.89</td>
|
||||
<td>44.2%</td>
|
||||
<td>-15</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>A1</td>
|
||||
<td>Bruce</td>
|
||||
<td>Almighty</td>
|
||||
<td>45</td>
|
||||
<td>153.19</td>
|
||||
<td>44%</td>
|
||||
<td>+19</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>A102</td>
|
||||
<td>Bruce</td>
|
||||
<td>Evans</td>
|
||||
<td>56</td>
|
||||
<td>$153.19</td>
|
||||
<td>23%</td>
|
||||
<td>+9</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>A256</td>
|
||||
<td>John</td>
|
||||
<td>Clark</td>
|
||||
<td>44</td>
|
||||
<td>($19.89)</td>
|
||||
<td>25.1%</td>
|
||||
<td>(5)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>A23</td>
|
||||
<td>Elvis</td>
|
||||
<td>Presley</td>
|
||||
<td>24</td>
|
||||
<td>($9.99)</td>
|
||||
<td>50%</td>
|
||||
<td>(22)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>A10</td>
|
||||
<td>Frank</td>
|
||||
<td>Carter</td>
|
||||
<td>40</td>
|
||||
<td>-12.99</td>
|
||||
<td>20%</td>
|
||||
<td>(6)</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table></div>
|
||||
|
||||
<h1>Javascript</h1>
|
||||
<div id="javascript">
|
||||
<pre class="prettyprint lang-javascript"></pre>
|
||||
</div>
|
||||
<h1>HTML</h1>
|
||||
<div id="html">
|
||||
<pre class="prettyprint lang-html"></pre>
|
||||
</div>
|
||||
|
||||
<div class="next-up">
|
||||
<hr />
|
||||
Next up: <a href="example-options-headers-digits-strings.html">Dealing with text strings in numerical sorts ››</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
161
assets/vendor/tablesorter/docs/example-option-render-header.html
vendored
Normal file
161
assets/vendor/tablesorter/docs/example-option-render-header.html
vendored
Normal file
@@ -0,0 +1,161 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery plugin: Tablesorter 2.0 - Render Header</title>
|
||||
|
||||
<!-- jQuery -->
|
||||
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
|
||||
|
||||
<!-- Demo stuff -->
|
||||
<link rel="stylesheet" href="css/jq.css">
|
||||
<link href="css/prettify.css" rel="stylesheet">
|
||||
<script src="js/prettify.js"></script>
|
||||
<script src="js/docs.js"></script>
|
||||
|
||||
<!-- Tablesorter: required -->
|
||||
<link rel="stylesheet" href="../css/theme.blue.css">
|
||||
<script src="../js/jquery.tablesorter.js"></script>
|
||||
|
||||
<style id="css">.roundedCorners {
|
||||
border: #000 1px solid;
|
||||
padding: 2px 8px;
|
||||
border-radius: 1em;
|
||||
-moz-border-radius: 1em;
|
||||
-webkit-border-radius: 1em;
|
||||
}
|
||||
.tablesorter-headerDesc .roundedCorners {
|
||||
border-color: #fff;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script id="js">$(function() {
|
||||
// call the tablesorter plugin
|
||||
$("table").tablesorter({
|
||||
theme : 'blue',
|
||||
headerTemplate: '{content} {icon}',
|
||||
onRenderHeader: function(index){
|
||||
// the TH content is wrapped with a div.tablesorter-header-inner by default, so just add the new class
|
||||
$(this).find('div').addClass('roundedCorners header' + index );
|
||||
}
|
||||
});
|
||||
});</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="banner">
|
||||
<h1>table<em>sorter</em></h1>
|
||||
<h2>Render Headers</h2>
|
||||
<h3>Flexible client-side table sorting</h3>
|
||||
<a href="index.html">Back to documentation</a>
|
||||
</div>
|
||||
|
||||
<div id="main">
|
||||
|
||||
<p class="tip">
|
||||
<em>NOTE!</em> The span wrapping the header text and the index variable for the function was added in version 2.0.9 (it is not part of the original plugin, but the "onRenderHeader" option was available).
|
||||
</p>
|
||||
|
||||
<h1>Demo</h1>
|
||||
<div id="demo"><table class="tablesorter">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>First Name</th>
|
||||
<th>Last Name</th>
|
||||
<th>Age</th>
|
||||
<th>Total</th>
|
||||
<th>Discount</th>
|
||||
<th>Date</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Peter</td>
|
||||
<td>Parker</td>
|
||||
<td>28</td>
|
||||
<td>$9.99</td>
|
||||
<td>20%</td>
|
||||
<td>Jul 6, 2006 8:14 AM</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>John</td>
|
||||
<td>Hood</td>
|
||||
<td>33</td>
|
||||
<td>$19.99</td>
|
||||
<td>25%</td>
|
||||
<td>Dec 10, 2002 5:14 AM</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Clark</td>
|
||||
<td>Kent</td>
|
||||
<td>18</td>
|
||||
<td>$15.89</td>
|
||||
<td>44%</td>
|
||||
<td>Jan 12, 2003 11:14 AM</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Bruce</td>
|
||||
<td>Almighty</td>
|
||||
<td>45</td>
|
||||
<td>$153.19</td>
|
||||
<td>44%</td>
|
||||
<td>Jan 18, 2001 9:12 AM</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Bruce</td>
|
||||
<td>Evans</td>
|
||||
<td>22</td>
|
||||
<td>$13.19</td>
|
||||
<td>11%</td>
|
||||
<td>Jan 18, 2007 9:12 AM</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table></div>
|
||||
|
||||
<h1>Javascript</h1>
|
||||
<div id="javascript">
|
||||
<pre class="prettyprint lang-javascript"></pre>
|
||||
</div>
|
||||
<h1>CSS</h1>
|
||||
<div id="css">
|
||||
<pre class="prettyprint lang-css"></pre>
|
||||
</div>
|
||||
<h1>HTML</h1>
|
||||
Before
|
||||
<div>
|
||||
<pre class="prettyprint lang-html"><thead>
|
||||
<tr>
|
||||
<th>First Name</th>
|
||||
<th>Last Name</th>
|
||||
<th>Age</th>
|
||||
<th>Total</th>
|
||||
<th>Discount</th>
|
||||
<th>Date</th>
|
||||
</tr>
|
||||
</thead></pre>
|
||||
</div>
|
||||
After
|
||||
<div>
|
||||
<pre class="prettyprint lang-html"><thead>
|
||||
<tr class="tablesorter-headerRow">
|
||||
<th class="tablesorter-header"><div class="tablesorter-header-inner roundedCorners header0">First Name <i class="tablesorter-icon"></i></div></th>
|
||||
<th class="tablesorter-header"><div class="tablesorter-header-inner roundedCorners header1">Last Name <i class="tablesorter-icon"></i></div></th>
|
||||
<th class="tablesorter-header"><div class="tablesorter-header-inner roundedCorners header2">Age <i class="tablesorter-icon"></i></div></th>
|
||||
<th class="tablesorter-header"><div class="tablesorter-header-inner roundedCorners header3">Total <i class="tablesorter-icon"></i></div></th>
|
||||
<th class="tablesorter-header"><div class="tablesorter-header-inner roundedCorners header4">Discount <i class="tablesorter-icon"></i></div></th>
|
||||
<th class="tablesorter-header"><div class="tablesorter-header-inner roundedCorners header5">Date <i class="tablesorter-icon"></i></div></th>
|
||||
</tr>
|
||||
</thead></pre>
|
||||
<small>* Note: the tablesorter-icon was only added for emphasis in this demo, it isn't used at all by the blue template.</small>
|
||||
</div>
|
||||
|
||||
<div class="next-up">
|
||||
<hr />
|
||||
Next up: <a href="example-option-render-template.html">Header Template & Rendering ››</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
149
assets/vendor/tablesorter/docs/example-option-render-template.html
vendored
Normal file
149
assets/vendor/tablesorter/docs/example-option-render-template.html
vendored
Normal file
@@ -0,0 +1,149 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery plugin: Tablesorter 2.0 - Header Template & Rendering</title>
|
||||
|
||||
<!-- jQuery -->
|
||||
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
|
||||
|
||||
<!-- Demo stuff -->
|
||||
<link rel="stylesheet" href="css/jq.css">
|
||||
<link href="css/prettify.css" rel="stylesheet">
|
||||
<script src="js/prettify.js"></script>
|
||||
<script src="js/docs.js"></script>
|
||||
|
||||
<!-- Tablesorter: required -->
|
||||
<link rel="stylesheet" href="../css/theme.blue.css">
|
||||
<script src="../js/jquery.tablesorter.js"></script>
|
||||
|
||||
<script id="js">$(function() {
|
||||
// call the tablesorter plugin
|
||||
$("table").tablesorter({
|
||||
theme : 'blue',
|
||||
|
||||
// {icon} isn't used by the blue theme; it is optional here
|
||||
headerTemplate : '{icon}{content}',
|
||||
// manipulate the template string after is it created
|
||||
onRenderTemplate : function(i, t){
|
||||
// add the column number to the beginning
|
||||
// it's a zero-based index, so we add one
|
||||
return '<em>' + (i+1) + ':</em> ' + t;
|
||||
}
|
||||
});
|
||||
});</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="banner">
|
||||
<h1>table<em>sorter</em></h1>
|
||||
<h2>Header Template & Rendering</h2>
|
||||
<h3>Flexible client-side table sorting</h3>
|
||||
<a href="index.html">Back to documentation</a>
|
||||
</div>
|
||||
|
||||
<div id="main">
|
||||
|
||||
<p class="tip">
|
||||
<em>NOTE!</em> These options were added in version 2.7 (they are not part of the original plugin).
|
||||
</p>
|
||||
|
||||
<h1>Demo</h1>
|
||||
<div id="demo"><table class="tablesorter">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>First Name</th>
|
||||
<th>Last Name</th>
|
||||
<th>Age</th>
|
||||
<th>Total</th>
|
||||
<th>Discount</th>
|
||||
<th>Date</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Peter</td>
|
||||
<td>Parker</td>
|
||||
<td>28</td>
|
||||
<td>$9.99</td>
|
||||
<td>20%</td>
|
||||
<td>Jul 6, 2006 8:14 AM</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>John</td>
|
||||
<td>Hood</td>
|
||||
<td>33</td>
|
||||
<td>$19.99</td>
|
||||
<td>25%</td>
|
||||
<td>Dec 10, 2002 5:14 AM</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Clark</td>
|
||||
<td>Kent</td>
|
||||
<td>18</td>
|
||||
<td>$15.89</td>
|
||||
<td>44%</td>
|
||||
<td>Jan 12, 2003 11:14 AM</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Bruce</td>
|
||||
<td>Almighty</td>
|
||||
<td>45</td>
|
||||
<td>$153.19</td>
|
||||
<td>44%</td>
|
||||
<td>Jan 18, 2001 9:12 AM</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Bruce</td>
|
||||
<td>Evans</td>
|
||||
<td>22</td>
|
||||
<td>$13.19</td>
|
||||
<td>11%</td>
|
||||
<td>Jan 18, 2007 9:12 AM</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table></div>
|
||||
|
||||
<h1>Javascript</h1>
|
||||
<div id="javascript">
|
||||
<pre class="prettyprint lang-javascript"></pre>
|
||||
</div>
|
||||
<h1>HTML</h1>
|
||||
Before
|
||||
<div>
|
||||
<pre class="prettyprint lang-html"><thead>
|
||||
<tr>
|
||||
<th>First Name</th>
|
||||
<th>Last Name</th>
|
||||
<th>Age</th>
|
||||
<th>Total</th>
|
||||
<th>Discount</th>
|
||||
<th>Date</th>
|
||||
</tr>
|
||||
</thead></pre>
|
||||
</div>
|
||||
After
|
||||
<div>
|
||||
<pre class="prettyprint lang-html"><thead>
|
||||
<tr class="tablesorter-headerRow">
|
||||
<th class="tablesorter-header"><div class="tablesorter-header-inner"><em>1:</em> <i class="tablesorter-icon"></i>First Name</div></th>
|
||||
<th class="tablesorter-header"><div class="tablesorter-header-inner"><em>2:</em> <i class="tablesorter-icon"></i>Last Name</div></th>
|
||||
<th class="tablesorter-header"><div class="tablesorter-header-inner"><em>3:</em> <i class="tablesorter-icon"></i>Age</div></th>
|
||||
<th class="tablesorter-header"><div class="tablesorter-header-inner"><em>4:</em> <i class="tablesorter-icon"></i>Total</div></th>
|
||||
<th class="tablesorter-header"><div class="tablesorter-header-inner"><em>5:</em> <i class="tablesorter-icon"></i>Discount</div></th>
|
||||
<th class="tablesorter-header"><div class="tablesorter-header-inner"><em>6:</em> <i class="tablesorter-icon"></i>Date</div></th>
|
||||
</tr>
|
||||
</thead></pre>
|
||||
<small>* Note: the tablesorter-icon was only added for emphasis in this demo, it isn't used at all by the blue template.</small>
|
||||
</div>
|
||||
|
||||
<div class="next-up">
|
||||
<hr />
|
||||
Next up: <a href="example-triggers.html">Triggers sortEnd and sortStart ››</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
151
assets/vendor/tablesorter/docs/example-option-selectorsort.html
vendored
Normal file
151
assets/vendor/tablesorter/docs/example-option-selectorsort.html
vendored
Normal file
@@ -0,0 +1,151 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery plugin: Tablesorter 2.0 - Using selectorSort</title>
|
||||
|
||||
<!-- jQuery -->
|
||||
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2/jquery.min.js"></script>
|
||||
|
||||
<!-- Demo stuff -->
|
||||
<link rel="stylesheet" href="css/jq.css">
|
||||
<link href="css/prettify.css" rel="stylesheet">
|
||||
<script src="js/prettify.js"></script>
|
||||
<script src="js/docs.js"></script>
|
||||
|
||||
<style>
|
||||
.search { float: right; }
|
||||
</style>
|
||||
|
||||
<!-- Tablesorter: required -->
|
||||
<link rel="stylesheet" href="../css/theme.default.css">
|
||||
<script src="../js/jquery.tablesorter.js"></script>
|
||||
|
||||
<script id="js">$(function() {
|
||||
// call the tablesorter plugin
|
||||
$("table").tablesorter({
|
||||
selectorSort : 'a'
|
||||
});
|
||||
});</script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="banner">
|
||||
<h1>table<em>sorter</em></h1>
|
||||
<h2>Using selectorSort</h2>
|
||||
<h3>Flexible client-side table sorting</h3>
|
||||
<a href="index.html">Back to documentation</a>
|
||||
</div>
|
||||
<div id="main">
|
||||
|
||||
<p class="tip">
|
||||
<em>NOTE!</em> Click on any column header <strong>link</strong> to sort that column. Clicking anywhere else within the header will not initiate a sort.
|
||||
</p>
|
||||
|
||||
<h1>Demo</h1><br>
|
||||
<div id="demo"><table class="tablesorter">
|
||||
<thead>
|
||||
<tr>
|
||||
<th><a href="#">Account #</a> aa</th>
|
||||
<th><a href="#">First Name</a> bb</th>
|
||||
<th><a href="#">Last Name</a> cc</th>
|
||||
<th><a href="#">Age</a> dd</th>
|
||||
<th><a href="#">Total</a> ee</th>
|
||||
<th><a href="#">Discount</a> ff</th>
|
||||
<th class="sorter-false"><a href="#">Diff</a> gg</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>A43</td>
|
||||
<td>Peter</td>
|
||||
<td>Parker</td>
|
||||
<td>28</td>
|
||||
<td>9.99</td>
|
||||
<td>20.3%</td>
|
||||
<td>+3</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>A255</td>
|
||||
<td>John</td>
|
||||
<td>Hood</td>
|
||||
<td>33</td>
|
||||
<td>19.99</td>
|
||||
<td>25.1%</td>
|
||||
<td>-7</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>A33</td>
|
||||
<td>Clark</td>
|
||||
<td>Kent</td>
|
||||
<td>18</td>
|
||||
<td>2.89</td>
|
||||
<td>44.2%</td>
|
||||
<td>-15</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>A1</td>
|
||||
<td>Bruce</td>
|
||||
<td>Almighty</td>
|
||||
<td>45</td>
|
||||
<td>153.19</td>
|
||||
<td>44%</td>
|
||||
<td>+19</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>A102</td>
|
||||
<td>Bruce</td>
|
||||
<td>Evans</td>
|
||||
<td>56</td>
|
||||
<td>$153.19</td>
|
||||
<td>23%</td>
|
||||
<td>+9</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>A256</td>
|
||||
<td>John</td>
|
||||
<td>Clark</td>
|
||||
<td>44</td>
|
||||
<td>($19.89)</td>
|
||||
<td>25.1%</td>
|
||||
<td>(5)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>A23</td>
|
||||
<td>Elvis</td>
|
||||
<td>Presley</td>
|
||||
<td>24</td>
|
||||
<td>($9.99)</td>
|
||||
<td>50%</td>
|
||||
<td>(22)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>A10</td>
|
||||
<td>Frank</td>
|
||||
<td>Carter</td>
|
||||
<td>40</td>
|
||||
<td>-12.99</td>
|
||||
<td>20%</td>
|
||||
<td>(6)</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table></div>
|
||||
|
||||
<h1>Javascript</h1>
|
||||
<div id="javascript">
|
||||
<pre class="prettyprint lang-javascript"></pre>
|
||||
</div>
|
||||
<h1>HTML</h1>
|
||||
<div id="html">
|
||||
<pre class="prettyprint lang-html"></pre>
|
||||
</div>
|
||||
|
||||
<div class="next-up">
|
||||
<hr />
|
||||
Next up: <a href="example-option-sort-empty.html">Sorting empty cells ››</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
1128
assets/vendor/tablesorter/docs/example-option-show-processing.html
vendored
Normal file
1128
assets/vendor/tablesorter/docs/example-option-show-processing.html
vendored
Normal file
File diff suppressed because it is too large
Load Diff
126
assets/vendor/tablesorter/docs/example-option-sort-append.html
vendored
Normal file
126
assets/vendor/tablesorter/docs/example-option-sort-append.html
vendored
Normal file
@@ -0,0 +1,126 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery plugin: Tablesorter 2.0 - Append a default sorting order</title>
|
||||
|
||||
<!-- jQuery -->
|
||||
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
|
||||
|
||||
<!-- Demo stuff -->
|
||||
<link rel="stylesheet" href="css/jq.css">
|
||||
<link href="css/prettify.css" rel="stylesheet">
|
||||
<script src="js/prettify.js"></script>
|
||||
<script src="js/docs.js"></script>
|
||||
|
||||
<!-- Tablesorter: required -->
|
||||
<link rel="stylesheet" href="../css/theme.blue.css">
|
||||
<script src="../js/jquery.tablesorter.js"></script>
|
||||
|
||||
<!-- Tablesorter: optional -->
|
||||
<script src="../addons/pager/jquery.tablesorter.pager.js"></script>
|
||||
|
||||
<script id="js">$(function() {
|
||||
// call the tablesorter plugin
|
||||
$("table").tablesorter({
|
||||
theme : 'blue',
|
||||
|
||||
// add sort on the first column and in ascending order AFTER the selected column
|
||||
sortAppend: [[0,0]]
|
||||
});
|
||||
});</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="banner">
|
||||
<h1>table<em>sorter</em></h1>
|
||||
<h2>Append to a sort order</h2>
|
||||
<h3>Flexible client-side table sorting</h3>
|
||||
<a href="index.html">Back to documentation</a>
|
||||
</div>
|
||||
|
||||
<div id="main">
|
||||
|
||||
<p class="tip">
|
||||
<em>NOTE!</em>
|
||||
<ul>
|
||||
<li>Click to sort any column header to see the the first column sort is appended to the selected sort order.</li>
|
||||
<li>This option is part of the original plugin</li>
|
||||
</ul>
|
||||
</p>
|
||||
|
||||
<h1>Demo</h1>
|
||||
<div id="demo"><table class="tablesorter">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>First Name</th>
|
||||
<th>Last Name</th>
|
||||
<th>Age</th>
|
||||
<th>Total</th>
|
||||
<th>Discount</th>
|
||||
<th>Date</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Peter</td>
|
||||
<td>Parker</td>
|
||||
<td>28</td>
|
||||
<td>$9.99</td>
|
||||
<td>20%</td>
|
||||
<td>Jan 18, 2001 9:12 AM</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>John</td>
|
||||
<td>Evans</td>
|
||||
<td>33</td>
|
||||
<td>$9.99</td>
|
||||
<td>25%</td>
|
||||
<td>Dec 10, 2002 5:14 AM</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Clark</td>
|
||||
<td>Kent</td>
|
||||
<td>22</td>
|
||||
<td>$15.89</td>
|
||||
<td>44%</td>
|
||||
<td>Jan 12, 2003 11:14 AM</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Bruce</td>
|
||||
<td>Almighty</td>
|
||||
<td>45</td>
|
||||
<td>$15.89</td>
|
||||
<td>44%</td>
|
||||
<td>Jan 18, 2001 9:12 AM</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Bruce</td>
|
||||
<td>Evans</td>
|
||||
<td>22</td>
|
||||
<td>$13.19</td>
|
||||
<td>11%</td>
|
||||
<td>Jul 6, 2006 8:14 AM</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table></div>
|
||||
|
||||
<h1>Javascript</h1>
|
||||
<div id="javascript">
|
||||
<pre class="prettyprint lang-javascript"></pre>
|
||||
</div>
|
||||
<h1>HTML</h1>
|
||||
<div id="html">
|
||||
<pre class="prettyprint lang-html"></pre>
|
||||
</div>
|
||||
|
||||
<div class="next-up">
|
||||
<hr />
|
||||
Next up: <a href="example-child-rows.html">Working with Child Rows ››</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
185
assets/vendor/tablesorter/docs/example-option-sort-empty.html
vendored
Normal file
185
assets/vendor/tablesorter/docs/example-option-sort-empty.html
vendored
Normal file
@@ -0,0 +1,185 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery plugin: Tablesorter 2.0 - Sorting empty cells</title>
|
||||
|
||||
<!-- jQuery -->
|
||||
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
|
||||
|
||||
<!-- Demo stuff -->
|
||||
<link rel="stylesheet" href="css/jq.css">
|
||||
<link href="css/prettify.css" rel="stylesheet">
|
||||
<script src="js/prettify.js"></script>
|
||||
<script src="js/docs.js"></script>
|
||||
|
||||
<!-- Tablesorter: required -->
|
||||
<link rel="stylesheet" href="../css/theme.blue.css">
|
||||
<script src="../js/jquery.tablesorter.js"></script>
|
||||
|
||||
<script id="js">$(function() {
|
||||
// call the tablesorter plugin
|
||||
$("table").tablesorter({
|
||||
theme : 'blue',
|
||||
|
||||
// default "emptyTo"
|
||||
emptyTo: 'bottom'
|
||||
});
|
||||
});</script>
|
||||
|
||||
<script>
|
||||
$(function(){
|
||||
$('select').change(function(){
|
||||
var t = $('table'),
|
||||
v = $(this).val();
|
||||
t[0].config.emptyTo = v;
|
||||
t.trigger("update");
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="banner">
|
||||
<h1>table<em>sorter</em></h1>
|
||||
<h2>Sorting empty cells</h2>
|
||||
<h3>Flexible client-side table sorting</h3>
|
||||
<a href="index.html">Back to documentation</a>
|
||||
</div>
|
||||
<div id="main">
|
||||
|
||||
<p class="tip">
|
||||
<em>NOTE!</em>
|
||||
Set the <code>emptyTo</code> selector below:
|
||||
<ul>
|
||||
<li><code>top</code> - sort empty table cells to the top.</li>
|
||||
<li><code>bottom</code> - sort empty table cells to the bottom.</li>
|
||||
<li><code>none</code> or <code>zero</code> - sort empty table cells as if the cell has the value equal to zero.</li>
|
||||
<li>Individual columns can be modified by adding the following (they all do the same thing), set in order of priority:
|
||||
<ul>
|
||||
<li>jQuery data <code>data-empty="top"</code>.</li>
|
||||
<li>metadata <code>class="{ empty: 'top'}"</code>. This requires the metadata plugin.</li>
|
||||
<li>headers option <code>headers : { 0 : { empty : 'top' } }</code>.</li>
|
||||
<li>header class name <code>class="empty-top"</code>.</li>
|
||||
<li>Overall <code>emptyTo</code> option.</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><code>emptyToBottom</code> option was added in v2.1.11, then replaced by the <code>emptyTo</code> option in v2.1.16.</li>
|
||||
</ul>
|
||||
</p>
|
||||
|
||||
<h1>Demo</h1>
|
||||
|
||||
Set <code>emptyTo</code> option: <select>
|
||||
<option>bottom</option>
|
||||
<option>top</option>
|
||||
<option>zero</option>
|
||||
</select>
|
||||
|
||||
<div id="demo"><table class="tablesorter">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="empty-top">*Account #</th> <!-- empty-top class has higher priority than the "emptyTo" option -->
|
||||
<th>First Name</th>
|
||||
<th>Last Name</th>
|
||||
<th>Age</th>
|
||||
<th>Total</th>
|
||||
<th>Discount</th>
|
||||
<th>Diff</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>A43</td>
|
||||
<td>Peter</td>
|
||||
<td>Parker</td>
|
||||
<td>28</td>
|
||||
<td></td>
|
||||
<td>20.3%</td>
|
||||
<td>+3</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>A255</td>
|
||||
<td></td>
|
||||
<td>Hood</td>
|
||||
<td></td>
|
||||
<td>19.99</td>
|
||||
<td>25.1%</td>
|
||||
<td>-7</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td>Clark</td>
|
||||
<td></td>
|
||||
<td>18</td>
|
||||
<td>15.89</td>
|
||||
<td>44.2%</td>
|
||||
<td>-15</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>A1</td>
|
||||
<td>Bruce</td>
|
||||
<td>Almighty</td>
|
||||
<td>45</td>
|
||||
<td>153.19</td>
|
||||
<td></td>
|
||||
<td>+19</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>A102</td>
|
||||
<td>Bruce</td>
|
||||
<td>Evans</td>
|
||||
<td>56</td>
|
||||
<td>153.19</td>
|
||||
<td>23%</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>A109</td>
|
||||
<td>Larry</td>
|
||||
<td>Stevens</td>
|
||||
<td>56</td>
|
||||
<td>153.19</td>
|
||||
<td>23%</td>
|
||||
<td>0</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>A99</td>
|
||||
<td>John</td>
|
||||
<td>Smithy</td>
|
||||
<td>56</td>
|
||||
<td>156</td>
|
||||
<td>22%</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>A119</td>
|
||||
<td>Mike</td>
|
||||
<td>Rowe</td>
|
||||
<td>55</td>
|
||||
<td>-53.99</td>
|
||||
<td>13%</td>
|
||||
<td>0</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table></div>
|
||||
* <strong>Note</strong>: The "Account #" column has the "empty-top" class name set which over-rides the <code>emptyTo</code> option (see the order of priority note above).
|
||||
|
||||
<h1>Javascript</h1>
|
||||
<div id="javascript">
|
||||
<pre class="prettyprint lang-javascript"></pre>
|
||||
</div>
|
||||
<h1>HTML</h1>
|
||||
<div id="html">
|
||||
<pre class="prettyprint lang-html"></pre>
|
||||
</div>
|
||||
|
||||
<div class="next-up">
|
||||
<hr />
|
||||
Next up: <a href="example-option-sort-key.html">Change the default multi-sorting key ››</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
128
assets/vendor/tablesorter/docs/example-option-sort-force.html
vendored
Normal file
128
assets/vendor/tablesorter/docs/example-option-sort-force.html
vendored
Normal file
@@ -0,0 +1,128 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery plugin: Tablesorter 2.0 - Force a default sorting order</title>
|
||||
|
||||
<!-- jQuery -->
|
||||
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
|
||||
|
||||
<!-- Demo stuff -->
|
||||
<link rel="stylesheet" href="css/jq.css">
|
||||
<link href="css/prettify.css" rel="stylesheet">
|
||||
<script src="js/prettify.js"></script>
|
||||
<script src="js/docs.js"></script>
|
||||
|
||||
<!-- Tablesorter: required -->
|
||||
<link rel="stylesheet" href="../css/theme.blue.css">
|
||||
<script src="../js/jquery.tablesorter.js"></script>
|
||||
|
||||
<!-- Tablesorter: optional -->
|
||||
<script src="../addons/pager/jquery.tablesorter.pager.js"></script>
|
||||
|
||||
<script id="js">$(function() {
|
||||
|
||||
// call the tablesorter plugin
|
||||
$("table").tablesorter({
|
||||
theme : 'blue',
|
||||
|
||||
// sort on the first column and in ascending order PRIOR TO the sort on the selected column
|
||||
sortForce: [[0,0]]
|
||||
});
|
||||
|
||||
});</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="banner">
|
||||
<h1>table<em>sorter</em></h1>
|
||||
<h2>Force a default sorting order</h2>
|
||||
<h3>Flexible client-side table sorting</h3>
|
||||
<a href="index.html">Back to documentation</a>
|
||||
</div>
|
||||
|
||||
<div id="main">
|
||||
|
||||
<p class="tip">
|
||||
<em>NOTE!</em>
|
||||
<ul>
|
||||
<li>Click to sort any column header to see the forcing of the first column sort.</li>
|
||||
<li>This option is part of the original plugin</li>
|
||||
</ul>
|
||||
</p>
|
||||
|
||||
<h1>Demo</h1>
|
||||
<div id="demo"><table class="tablesorter">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>First Name</th>
|
||||
<th>Last Name</th>
|
||||
<th>Age</th>
|
||||
<th>Total</th>
|
||||
<th>Discount</th>
|
||||
<th>Date</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Peter</td>
|
||||
<td>Parker</td>
|
||||
<td>28</td>
|
||||
<td>$9.99</td>
|
||||
<td>20%</td>
|
||||
<td>Jul 6, 2006 8:14 AM</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>John</td>
|
||||
<td>Hood</td>
|
||||
<td>33</td>
|
||||
<td>$19.99</td>
|
||||
<td>25%</td>
|
||||
<td>Dec 10, 2002 5:14 AM</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Clark</td>
|
||||
<td>Kent</td>
|
||||
<td>18</td>
|
||||
<td>$15.89</td>
|
||||
<td>44%</td>
|
||||
<td>Jan 12, 2003 11:14 AM</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Bruce</td>
|
||||
<td>Almighty</td>
|
||||
<td>45</td>
|
||||
<td>$153.19</td>
|
||||
<td>44%</td>
|
||||
<td>Jan 18, 2001 9:12 AM</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Bruce</td>
|
||||
<td>Evans</td>
|
||||
<td>22</td>
|
||||
<td>$13.19</td>
|
||||
<td>11%</td>
|
||||
<td>Jan 18, 2007 9:12 AM</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table></div>
|
||||
|
||||
<h1>Javascript</h1>
|
||||
<div id="javascript">
|
||||
<pre class="prettyprint lang-javascript"></pre>
|
||||
</div>
|
||||
<h1>HTML</h1>
|
||||
<div id="html">
|
||||
<pre class="prettyprint lang-html"></pre>
|
||||
</div>
|
||||
|
||||
<div class="next-up">
|
||||
<hr />
|
||||
Next up: <a href="example-option-sort-append.html">Append a sort to the selected sorting order ››</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
119
assets/vendor/tablesorter/docs/example-option-sort-key.html
vendored
Normal file
119
assets/vendor/tablesorter/docs/example-option-sort-key.html
vendored
Normal file
@@ -0,0 +1,119 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery plugin: Tablesorter 2.0 - Change multi-column sorting key</title>
|
||||
|
||||
<!-- jQuery -->
|
||||
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
|
||||
|
||||
<!-- Demo stuff -->
|
||||
<link rel="stylesheet" href="css/jq.css">
|
||||
<link href="css/prettify.css" rel="stylesheet">
|
||||
<script src="js/prettify.js"></script>
|
||||
<script src="js/docs.js"></script>
|
||||
|
||||
<!-- Tablesorter: required -->
|
||||
<link rel="stylesheet" href="../css/theme.blue.css">
|
||||
<script src="../js/jquery.tablesorter.js"></script>
|
||||
|
||||
<script id="js">$(function() {
|
||||
|
||||
// call the tablesorter plugin
|
||||
$("table").tablesorter({
|
||||
theme : 'blue',
|
||||
|
||||
// change the multi sort key from the default shift to alt button
|
||||
sortMultiSortKey: 'altKey'
|
||||
});
|
||||
|
||||
});</script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="banner">
|
||||
<h1>table<em>sorter</em></h1>
|
||||
<h2>Change multi-column sorting key</h2>
|
||||
<h3>Flexible client-side table sorting</h3>
|
||||
<a href="index.html">Back to documentation</a>
|
||||
</div>
|
||||
<div id="main">
|
||||
|
||||
<p class="tip">
|
||||
<em>NOTE!</em> Click to sort any column header, then hold down the alt key and select a second column. Continue selecting columns as desired.
|
||||
</p>
|
||||
|
||||
<h1>Demo</h1>
|
||||
<div id="demo"><table class="tablesorter">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>First Name</th>
|
||||
<th>Last Name</th>
|
||||
<th>Age</th>
|
||||
<th>Total</th>
|
||||
<th>Discount</th>
|
||||
<th>Date</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Peter</td>
|
||||
<td>Parker</td>
|
||||
<td>28</td>
|
||||
<td>$9.99</td>
|
||||
<td>20%</td>
|
||||
<td>Jul 6, 2006 8:14 AM</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>John</td>
|
||||
<td>Hood</td>
|
||||
<td>33</td>
|
||||
<td>$19.99</td>
|
||||
<td>25%</td>
|
||||
<td>Dec 10, 2002 5:14 AM</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Clark</td>
|
||||
<td>Kent</td>
|
||||
<td>18</td>
|
||||
<td>$15.89</td>
|
||||
<td>44%</td>
|
||||
<td>Jan 12, 2003 11:14 AM</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Bruce</td>
|
||||
<td>Almighty</td>
|
||||
<td>45</td>
|
||||
<td>$153.19</td>
|
||||
<td>44%</td>
|
||||
<td>Jan 18, 2001 9:12 AM</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Bruce</td>
|
||||
<td>Evans</td>
|
||||
<td>22</td>
|
||||
<td>$13.19</td>
|
||||
<td>11%</td>
|
||||
<td>Jan 18, 2007 9:12 AM</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table></div>
|
||||
|
||||
<h1>Javascript</h1>
|
||||
<div id="javascript">
|
||||
<pre class="prettyprint lang-javascript"></pre>
|
||||
</div>
|
||||
<h1>HTML</h1>
|
||||
<div id="html">
|
||||
<pre class="prettyprint lang-html"></pre>
|
||||
</div>
|
||||
|
||||
<div class="next-up">
|
||||
<hr />
|
||||
Next up: <a href="example-option-custom-sort.html">Using a custom sort script ››</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
176
assets/vendor/tablesorter/docs/example-option-sort-list.html
vendored
Normal file
176
assets/vendor/tablesorter/docs/example-option-sort-list.html
vendored
Normal file
@@ -0,0 +1,176 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery plugin: Tablesorter 2.0 - Set an initial table sort</title>
|
||||
|
||||
<!-- jQuery -->
|
||||
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
|
||||
|
||||
<!-- Demo stuff -->
|
||||
<link rel="stylesheet" href="css/jq.css">
|
||||
<link href="css/prettify.css" rel="stylesheet">
|
||||
<script src="js/prettify.js"></script>
|
||||
<script src="js/docs.js"></script>
|
||||
|
||||
<!-- Tablesorter: required -->
|
||||
<link rel="stylesheet" href="../css/theme.blue.css">
|
||||
<script src="../js/jquery.tablesorter.js"></script>
|
||||
|
||||
<script id="js">$(function() {
|
||||
|
||||
// initial sort set using sortList option
|
||||
$(".table1").tablesorter({
|
||||
theme : 'blue',
|
||||
// sort on the first column and second column in ascending order
|
||||
sortList: [[0,0],[1,0]]
|
||||
});
|
||||
|
||||
// initial sort set using data-sortlist attribute (see HTML below)
|
||||
$(".table2").tablesorter({
|
||||
theme : 'blue'
|
||||
});
|
||||
|
||||
});</script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="banner">
|
||||
<h1>table<em>sorter</em></h1>
|
||||
<h2>Set an initial sort order</h2>
|
||||
<h3>Flexible client-side table sorting</h3>
|
||||
<a href="index.html">Back to documentation</a>
|
||||
</div>
|
||||
<div id="main">
|
||||
<h1>Demo</h1>
|
||||
<h4>Set initial sort using the sortList option</h4>
|
||||
<table class="table1 tablesorter">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>First Name</th>
|
||||
<th>Last Name</th>
|
||||
<th>Age</th>
|
||||
<th>Total</th>
|
||||
<th>Discount</th>
|
||||
<th>Date</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Peter</td>
|
||||
<td>Parker</td>
|
||||
<td>28</td>
|
||||
<td>$9.99</td>
|
||||
<td>20%</td>
|
||||
<td>Jul 6, 2006 8:14 AM</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>John</td>
|
||||
<td>Hood</td>
|
||||
<td>33</td>
|
||||
<td>$19.99</td>
|
||||
<td>25%</td>
|
||||
<td>Dec 10, 2002 5:14 AM</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Clark</td>
|
||||
<td>Kent</td>
|
||||
<td>18</td>
|
||||
<td>$15.89</td>
|
||||
<td>44%</td>
|
||||
<td>Jan 12, 2003 11:14 AM</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Bruce</td>
|
||||
<td>Almighty</td>
|
||||
<td>45</td>
|
||||
<td>$153.19</td>
|
||||
<td>44%</td>
|
||||
<td>Jan 18, 2001 9:12 AM</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Bruce</td>
|
||||
<td>Evans</td>
|
||||
<td>22</td>
|
||||
<td>$13.19</td>
|
||||
<td>11%</td>
|
||||
<td>Jan 18, 2007 9:12 AM</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<h4>Set initial sort using a data attribute</h4>
|
||||
<div id="demo"><!-- this data-sortlist method requires jQuery v1.4+ -->
|
||||
<table class="table2" data-sortlist="[[0,0],[2,0]]">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>First Name</th>
|
||||
<th>Last Name</th>
|
||||
<th>Age</th>
|
||||
<th>Total</th>
|
||||
<th>Discount</th>
|
||||
<th>Date</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Peter</td>
|
||||
<td>Parker</td>
|
||||
<td>28</td>
|
||||
<td>$9.99</td>
|
||||
<td>20%</td>
|
||||
<td>Jul 6, 2006 8:14 AM</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>John</td>
|
||||
<td>Hood</td>
|
||||
<td>33</td>
|
||||
<td>$19.99</td>
|
||||
<td>25%</td>
|
||||
<td>Dec 10, 2002 5:14 AM</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Clark</td>
|
||||
<td>Kent</td>
|
||||
<td>18</td>
|
||||
<td>$15.89</td>
|
||||
<td>44%</td>
|
||||
<td>Jan 12, 2003 11:14 AM</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Bruce</td>
|
||||
<td>Almighty</td>
|
||||
<td>45</td>
|
||||
<td>$153.19</td>
|
||||
<td>44%</td>
|
||||
<td>Jan 18, 2001 9:12 AM</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Bruce</td>
|
||||
<td>Evans</td>
|
||||
<td>22</td>
|
||||
<td>$13.19</td>
|
||||
<td>11%</td>
|
||||
<td>Jan 18, 2007 9:12 AM</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table></div>
|
||||
<h1>Javascript</h1>
|
||||
<div id="javascript">
|
||||
<pre class="prettyprint lang-javascript"></pre>
|
||||
</div>
|
||||
<h1>HTML</h1>
|
||||
<div id="html">
|
||||
<pre class="prettyprint lang-html"></pre>
|
||||
</div>
|
||||
|
||||
<div class="next-up">
|
||||
<hr />
|
||||
Next up: <a href="example-trigger-sort.html">Sort table using a link outside the table ››</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
113
assets/vendor/tablesorter/docs/example-option-sort-order.html
vendored
Normal file
113
assets/vendor/tablesorter/docs/example-option-sort-order.html
vendored
Normal file
@@ -0,0 +1,113 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery plugin: Tablesorter 2.0 - Set an initial sort order direction</title>
|
||||
|
||||
<!-- jQuery -->
|
||||
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
|
||||
|
||||
<!-- Demo stuff -->
|
||||
<link rel="stylesheet" href="css/jq.css">
|
||||
<link href="css/prettify.css" rel="stylesheet">
|
||||
<script src="js/prettify.js"></script>
|
||||
<script src="js/docs.js"></script>
|
||||
|
||||
<!-- Tablesorter: required -->
|
||||
<link rel="stylesheet" href="../css/theme.blue.css">
|
||||
<script src="../js/jquery.tablesorter.js"></script>
|
||||
|
||||
<script id="js">$(function() {
|
||||
|
||||
// call the tablesorter plugin
|
||||
$("table").tablesorter({
|
||||
theme : 'blue',
|
||||
|
||||
// change the default sorting order from 'asc' to 'desc'
|
||||
sortInitialOrder: "desc"
|
||||
});
|
||||
|
||||
}); </script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="banner">
|
||||
<h1>table<em>sorter</em></h1>
|
||||
<h2>Set an initial sorting order direction</h2>
|
||||
<h3>Flexible client-side table sorting</h3>
|
||||
<a href="index.html">Back to documentation</a>
|
||||
</div>
|
||||
<div id="main">
|
||||
<h1>Demo</h1>
|
||||
<div id="demo"><table class="tablesorter">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>First Name</th>
|
||||
<th>Last Name</th>
|
||||
<th>Age</th>
|
||||
<th>Total</th>
|
||||
<th>Discount</th>
|
||||
<th>Date</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Peter</td>
|
||||
<td>Parker</td>
|
||||
<td>28</td>
|
||||
<td>$9.99</td>
|
||||
<td>20%</td>
|
||||
<td>Jul 6, 2006 8:14 AM</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>John</td>
|
||||
<td>Hood</td>
|
||||
<td>33</td>
|
||||
<td>$19.99</td>
|
||||
<td>25%</td>
|
||||
<td>Dec 10, 2002 5:14 AM</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Clark</td>
|
||||
<td>Kent</td>
|
||||
<td>18</td>
|
||||
<td>$15.89</td>
|
||||
<td>44%</td>
|
||||
<td>Jan 12, 2003 11:14 AM</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Bruce</td>
|
||||
<td>Almighty</td>
|
||||
<td>45</td>
|
||||
<td>$153.19</td>
|
||||
<td>44%</td>
|
||||
<td>Jan 18, 2001 9:12 AM</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Bruce</td>
|
||||
<td>Evans</td>
|
||||
<td>22</td>
|
||||
<td>$13.19</td>
|
||||
<td>11%</td>
|
||||
<td>Jan 18, 2007 9:12 AM</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table></div>
|
||||
<h1>Javascript</h1>
|
||||
<div id="javascript">
|
||||
<pre class="prettyprint lang-javascript"></pre>
|
||||
</div>
|
||||
<h1>HTML</h1>
|
||||
<div id="html">
|
||||
<pre class="prettyprint lang-html"></pre>
|
||||
</div>
|
||||
|
||||
<div class="next-up">
|
||||
<hr />
|
||||
Next up: <a href="example-options-headers.html">Disable sort using headers options ››</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
137
assets/vendor/tablesorter/docs/example-option-sortreset-sortrestart.html
vendored
Normal file
137
assets/vendor/tablesorter/docs/example-option-sortreset-sortrestart.html
vendored
Normal file
@@ -0,0 +1,137 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery plugin: Tablesorter 2.0 - Reset/Restart the sort</title>
|
||||
|
||||
<!-- jQuery -->
|
||||
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
|
||||
|
||||
<!-- Demo stuff -->
|
||||
<link rel="stylesheet" href="css/jq.css">
|
||||
<link href="css/prettify.css" rel="stylesheet">
|
||||
<script src="js/prettify.js"></script>
|
||||
<script src="js/docs.js"></script>
|
||||
|
||||
<!-- Tablesorter: required -->
|
||||
<link rel="stylesheet" href="../css/theme.blue.css">
|
||||
<script src="../js/jquery.tablesorter.js"></script>
|
||||
|
||||
<script id="js">$(function() {
|
||||
|
||||
// call the tablesorter plugin
|
||||
$("table").tablesorter({
|
||||
theme : 'blue',
|
||||
|
||||
// third click on the header will reset column to default - unsorted
|
||||
sortReset : true,
|
||||
// Resets the sort direction so that clicking on an unsorted column will sort in the sortInitialOrder direction.
|
||||
sortRestart : true,
|
||||
|
||||
sortInitialOrder: 'desc',
|
||||
|
||||
headers : {
|
||||
// 0 : { lockedOrder: 'asc' }, only allow sorting in one direction
|
||||
3 : { sortInitialOrder: 'asc' },
|
||||
4 : { sortInitialOrder: 'asc' },
|
||||
5 : { sortInitialOrder: 'asc' }
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
});</script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="banner">
|
||||
<h1>table<em>sorter</em></h1>
|
||||
<h2>Reset/Restart the sort</h2>
|
||||
<h3>Flexible client-side table sorting</h3>
|
||||
<a href="index.html">Back to documentation</a>
|
||||
</div>
|
||||
<div id="main">
|
||||
|
||||
<p class="tip">
|
||||
<em>NOTE!</em>
|
||||
<ul>
|
||||
<li>The default <code>sortInitialOrder</code> for the entire table is set to <code>desc</code> (descending sort).</li>
|
||||
<li>The last three columns have the initial sort order set in the ascending direction, using the headers option.</li>
|
||||
<li>Test the <code>sortReset</code> option by clicking on any column at least three times. It should sort in the <code>sortInitialOrder</code> direction on the first click, the opposite direction on the second click, then reset to the original sort order on the third click. This cycle repeats on subsequent sorts.</li>
|
||||
<li>Test the <code>sortRestart</code> option by clicking on any unsorted column to see that it will always restart from the <code>sortInitialOrder</code>.</li>
|
||||
</ul>
|
||||
</p>
|
||||
|
||||
<h1>Demo</h1>
|
||||
<div id="demo"><table class="tablesorter">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>First Name (desc)</th>
|
||||
<th>Last Name (desc)</th>
|
||||
<th>Age (desc)</th>
|
||||
<th>Total (asc)</th>
|
||||
<th>Discount (asc)</th>
|
||||
<th>Date (asc)</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Peter</td>
|
||||
<td>Parker</td>
|
||||
<td>28</td>
|
||||
<td>$9.99</td>
|
||||
<td>20%</td>
|
||||
<td>Jul 6, 2006 8:14 AM</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Robin</td>
|
||||
<td>Hood</td>
|
||||
<td>33</td>
|
||||
<td>$19.99</td>
|
||||
<td>25%</td>
|
||||
<td>Dec 10, 2002 5:14 AM</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Clark</td>
|
||||
<td>Kent</td>
|
||||
<td>18</td>
|
||||
<td>$15.89</td>
|
||||
<td>44%</td>
|
||||
<td>Jan 12, 2003 11:14 AM</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Bruce</td>
|
||||
<td>Almighty</td>
|
||||
<td>45</td>
|
||||
<td>$153.19</td>
|
||||
<td>44%</td>
|
||||
<td>Jan 18, 2001 9:12 AM</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Bruce</td>
|
||||
<td>Evans</td>
|
||||
<td>22</td>
|
||||
<td>$13.19</td>
|
||||
<td>11%</td>
|
||||
<td>Jan 18, 2007 9:12 AM</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table></div>
|
||||
<h1>Javascript</h1>
|
||||
<div id="javascript">
|
||||
<pre class="prettyprint lang-javascript"></pre>
|
||||
</div>
|
||||
<h1>HTML</h1>
|
||||
<div id="html">
|
||||
<pre class="prettyprint lang-html"></pre>
|
||||
</div>
|
||||
|
||||
<div class="next-up">
|
||||
<hr />
|
||||
Next up: <a href="example-method-sortreset.html">Resetting the entire table sort ››</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
141
assets/vendor/tablesorter/docs/example-option-text-extraction.html
vendored
Normal file
141
assets/vendor/tablesorter/docs/example-option-text-extraction.html
vendored
Normal file
@@ -0,0 +1,141 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery plugin: Tablesorter 2.0 - Dealing with markup inside cells</title>
|
||||
|
||||
<!-- jQuery -->
|
||||
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
|
||||
|
||||
<!-- Demo stuff -->
|
||||
<link rel="stylesheet" href="css/jq.css">
|
||||
<link href="css/prettify.css" rel="stylesheet">
|
||||
<script src="js/prettify.js"></script>
|
||||
<script src="js/docs.js"></script>
|
||||
|
||||
<!-- Tablesorter: required -->
|
||||
<link rel="stylesheet" href="../css/theme.blue.css">
|
||||
<script src="../js/jquery.tablesorter.js"></script>
|
||||
|
||||
<script id="js">$(function() {
|
||||
|
||||
// call the tablesorter plugin
|
||||
$("table").tablesorter({
|
||||
theme : 'blue',
|
||||
/*
|
||||
// define an overall custom text extraction function
|
||||
textExtraction: function(node, table, cellIndex) {
|
||||
return $(node).text();
|
||||
}
|
||||
*/
|
||||
|
||||
// Define a custom text extraction function for each column
|
||||
// In this example, textExtraction 1-5 functions don't really need to
|
||||
// be defined, since they can also be obtained using `$(node).text()`
|
||||
textExtraction: {
|
||||
0: function(node, table, cellIndex){ return $(node).find("strong").text(); },
|
||||
1: function(node, table, cellIndex){ return $(node).find("div").text(); },
|
||||
2: function(node, table, cellIndex){ return $(node).find("span").text(); },
|
||||
3: function(node, table, cellIndex){ return $(node).find("em").text(); },
|
||||
4: function(node, table, cellIndex){ return $(node).find("a").text(); },
|
||||
5: function(node, table, cellIndex){ return $(node).find("u").text(); }
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
});</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="banner">
|
||||
<h1>table<strong>sorter</strong></h1>
|
||||
<h2>Dealing with markup inside cells</h2>
|
||||
<h3>Flexible client-side table sorting</h3>
|
||||
<a href="index.html">Back to documentation</a>
|
||||
</div>
|
||||
|
||||
<div id="main">
|
||||
<p class="tip">
|
||||
<em>NOTE!</em>
|
||||
<ul>
|
||||
<li>The textExtraction function setting for each column was added in version 2.0.12 (not part of the original plugin).</li>
|
||||
<li>The "First Name" column is sorting by the contents of the <strong> tag (in red).</li>
|
||||
<li>Added "table" and "cellIndex" variables to the textExtraction function (v2.1.2).</li>
|
||||
</ul>
|
||||
</p>
|
||||
|
||||
<h1>Demo</h1>
|
||||
<div id="demo"><table class="tablesorter">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>First Name</th>
|
||||
<th>Last Name</th>
|
||||
<th>Age</th>
|
||||
<th>Total</th>
|
||||
<th>Discount</th>
|
||||
<th>Date</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Mr. <strong>Peter</strong></td>
|
||||
<td><div>Parker</div></td>
|
||||
<td><span>28</span></td>
|
||||
<td><em>$9.99</em></td>
|
||||
<td><a href="#">20%</a></td>
|
||||
<td><u>Jul 6, 2006 8:14 AM</u></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Dr. <strong>John</strong></td>
|
||||
<td><div>Hood</div></td>
|
||||
<td><span>33</span></td>
|
||||
<td><em>$19.99</em></td>
|
||||
<td><a href="#">25%</a></td>
|
||||
<td><u>Dec 10, 2002 5:14 AM</u></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Rep <strong>Clark</strong></td>
|
||||
<td><div>Kent</div></td>
|
||||
<td><span>18</span></td>
|
||||
<td><em>$15.89</em></td>
|
||||
<td><a href="#">44%</a></td>
|
||||
<td><u>Jan 12, 2003 11:14 AM</u></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Rev <strong>Bruce</strong></td>
|
||||
<td><div>Almighty</div></td>
|
||||
<td><span>45</span></td>
|
||||
<td><em>$153.19</em></td>
|
||||
<td><a href="#">44%</a></td>
|
||||
<td><u>Jan 18, 2001 9:12 AM</u></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Capt <strong>Bruce</strong></td>
|
||||
<td><div>Evans</div></td>
|
||||
<td><span>22</span></td>
|
||||
<td><em>$13.19</em></td>
|
||||
<td><a href="#">11%</a></td>
|
||||
<td><u>Jan 18, 2007 9:12 AM</u></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table></div>
|
||||
|
||||
<h1>Javascript</h1>
|
||||
<div id="javascript">
|
||||
<pre class="prettyprint lang-javascript"></pre>
|
||||
</div>
|
||||
<h1>HTML</h1>
|
||||
<div id="html">
|
||||
<pre class="prettyprint lang-html"></pre>
|
||||
</div>
|
||||
|
||||
<div class="next-up">
|
||||
<hr />
|
||||
Next up: <a href="example-apply-widget.html">Applying widgets ››</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
125
assets/vendor/tablesorter/docs/example-option-textsorter-semver.html
vendored
Normal file
125
assets/vendor/tablesorter/docs/example-option-textsorter-semver.html
vendored
Normal file
@@ -0,0 +1,125 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery plugin: Tablesorter 2.0 - Semver Sorting</title>
|
||||
|
||||
<!-- jQuery -->
|
||||
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
|
||||
|
||||
<!-- Demo stuff -->
|
||||
<link rel="stylesheet" href="css/jq.css">
|
||||
<link href="css/prettify.css" rel="stylesheet">
|
||||
<script src="js/prettify.js"></script>
|
||||
<script src="js/docs.js"></script>
|
||||
|
||||
<!-- Tablesorter: required -->
|
||||
<link rel="stylesheet" href="../css/theme.blue.css">
|
||||
<script src="../js/jquery.tablesorter.js"></script>
|
||||
<script src="../js/extras/semver-mod.js"></script>
|
||||
|
||||
<style id="css">td.red { color: red; }</style>
|
||||
|
||||
<script id="js">$(function() {
|
||||
|
||||
// Set up empty table with second and first columns pre-sorted
|
||||
$("table").tablesorter({
|
||||
theme : 'blue',
|
||||
// sortList: [[1,0]],
|
||||
textSorter : {
|
||||
1 : function(a,b) {
|
||||
if (a === b) { return 0; }
|
||||
if (window.semver && semver.valid(a) !== null && semver.valid(b) !== null) {
|
||||
// valid version numbers, use semver.gt() method (greater than)
|
||||
return semver.gt(a, b) ? 1 : -1;
|
||||
} else {
|
||||
// invalid version number or semver not included -> basic text sort
|
||||
return a > b ? 1 : (a < b ? -1 : 0);
|
||||
}
|
||||
}
|
||||
},
|
||||
// extra code to highlight invalid semver numbers
|
||||
initialized : function(table){
|
||||
var $cell,
|
||||
c = table.config,
|
||||
column = 1; // search second column (zero-based index)
|
||||
if (window.semver) {
|
||||
c.$tbodies.each(function(tbindex, tb){
|
||||
$(tb).children('tr').each(function(rowindex, tr) {
|
||||
$cell = $(tr).children().eq(column);
|
||||
if (semver.valid( $.trim( $cell.text() ) ) === null) {
|
||||
// make invalid semver numbers obvious
|
||||
$cell.addClass('red').append(' (invalid)');
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
});</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="banner">
|
||||
<h1>table<em>sorter</em></h1>
|
||||
<h2>Semver Sorting</h2>
|
||||
<h3>Flexible client-side table sorting</h3>
|
||||
<a href="index.html">Back to documentation</a>
|
||||
</div>
|
||||
|
||||
<div id="main">
|
||||
|
||||
<p class="tip">
|
||||
<em>NOTE!</em>
|
||||
<ul>
|
||||
<li>This method does not use a parser nor a widget, it uses <code>semver.js</code> to allow the sorting of <a href="http://semver.org/">semantic version numbers</a>.</li>
|
||||
<li>But this method requires a slightly modified version of <a href="https://github.com/isaacs/node-semver">semver.js for node</a>. All modifications are signified within the file to ease updating.</li>
|
||||
<li>The modified semver.js (<a href="../js/extras/semver-mod.js">semver-mod.js</a>) is contained in the new "extras" subfolder. Please include it if you need this specific type of sort.</li>
|
||||
<li>Invalid version numbers be sorted using a basic text sort, so they will be grouped with their similar version numbers, but not sorted properly; this demo has some extra code to highlight invalid version numbers.</li>
|
||||
<li>In this demo, when the semver 2.0.0 compliant version column is sorted, the order column will be in sequential order.</li>
|
||||
<li>Semver example order, from semver.org:<br>1.0.0-alpha < 1.0.0-alpha.1 < 1.0.0-alpha.beta < 1.0.0-beta < 1.0.0-beta.2 < 1.0.0-beta.11 < 1.0.0-rc.1 < 1.0.0</li>
|
||||
<!-- http://jsfiddle.net/Mottie/abkNM/1626/ -->
|
||||
</ul>
|
||||
</p>
|
||||
|
||||
<h1>Demo</h1>
|
||||
<div id="demo"><table class="tablesorter">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Order</th>
|
||||
<th>SemVer 2.0.0 compliant versioning</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>6</td><td>1.0.0-beta.2</td></tr>
|
||||
<tr><td>8</td><td>1.0.0-rc.1</td></tr>
|
||||
<tr><td>2</td><td>1.0.0-alpha.1</td></tr>
|
||||
<tr><td>1</td><td>1.0.0-alpha</td></tr>
|
||||
<tr><td>10</td><td>1.0.0</td></tr>
|
||||
<tr><td>4</td><td>1.0.0-alpha.beta</td></tr>
|
||||
<tr><td>3</td><td>1.0.0-alpha.2</td></tr>
|
||||
<tr><td>7</td><td>1.0.0-beta.11</td></tr>
|
||||
<tr><td>9</td><td>1.0.0-rc.2</td></tr>
|
||||
<tr><td>5</td><td>1.0.0-beta</td></tr>
|
||||
<tr><td>11</td><td>1.0.0beta</td></tr>
|
||||
</tbody>
|
||||
</table></div>
|
||||
|
||||
<h1>Javascript</h1>
|
||||
<div id="javascript">
|
||||
<pre class="prettyprint lang-javascript"></pre>
|
||||
</div>
|
||||
<h1>CSS</h1>
|
||||
<div id="css">
|
||||
<pre class="prettyprint lang-css"></pre>
|
||||
</div>
|
||||
<h1>HTML</h1>
|
||||
<div id="html">
|
||||
<pre class="prettyprint lang-html"></pre>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
225
assets/vendor/tablesorter/docs/example-options-headers-digits-strings.html
vendored
Normal file
225
assets/vendor/tablesorter/docs/example-options-headers-digits-strings.html
vendored
Normal file
@@ -0,0 +1,225 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery plugin: Tablesorter 2.0 - Dealing with text strings in numerical sorts</title>
|
||||
|
||||
<!-- jQuery -->
|
||||
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
|
||||
|
||||
<!-- Demo stuff -->
|
||||
<link rel="stylesheet" href="css/jq.css">
|
||||
<link href="css/prettify.css" rel="stylesheet">
|
||||
<script src="js/prettify.js"></script>
|
||||
<script src="js/docs.js"></script>
|
||||
|
||||
<!-- Tablesorter: required -->
|
||||
<link rel="stylesheet" href="../css/theme.blue.css">
|
||||
<style>
|
||||
th { width: 10%; }
|
||||
</style>
|
||||
<script src="../js/jquery.tablesorter.js"></script>
|
||||
|
||||
<script id="js">$(function() {
|
||||
// call the tablesorter plugin
|
||||
$("table").tablesorter({
|
||||
theme : 'blue',
|
||||
// default strings setting
|
||||
stringTo: "max",
|
||||
// columns 2 & 3 (zero-based index) set using headers option
|
||||
// columns 4+ set using header class name: "string-max", "string-min", "string-top", "string-bottom" and "string-none"
|
||||
headers: {
|
||||
1: { sorter: "digit", empty : "top" }, // sort empty cells to the top
|
||||
2: { sorter: "digit", string: "max" }, // non-numeric content is treated as a MAX value
|
||||
3: { sorter: "digit", string: "min" } // non-numeric content is treated as a MIN value
|
||||
}
|
||||
|
||||
});
|
||||
});</script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="banner">
|
||||
<h1>table<em>sorter</em></h1>
|
||||
<h2>Dealing with text strings in numerical sorts</h2>
|
||||
<h3>Flexible client-side table sorting</h3>
|
||||
<a href="index.html">Back to documentation</a>
|
||||
</div>
|
||||
<div id="main">
|
||||
|
||||
<p class="tip">
|
||||
<em>NOTE!</em>
|
||||
<ul>
|
||||
<li>This functionality is new as of version 2.0.10 (not part of the original plugin).</li>
|
||||
<li>When a column is sorted numerically ( <code>sorter:"digit"</code> ) any text in that column will, by default, be given a <em>zero</em> value. Sort the last column (#9) to see the problem with this method.</li>
|
||||
<li>Overall <code>stringTo</code> option added in version 2.1.16.</li>
|
||||
<li>String options changed in version 2.1.16; setting the value to:
|
||||
<ul>
|
||||
<li><code>"max"</code> will treat any text in that column as a value greater than the <em>max</em> (more positive) value. Renamed from "max+".</li>
|
||||
<li><code>"min"</code> will treat any text in that column as a value greater than the <em>min</em> (more negative) value. Renamed from "max-".</li>
|
||||
<li><code>"top"</code> will always sort the text to the top of the column.</li>
|
||||
<li><code>"bottom"</code> will always sort the text to the bottom of the column.</li>
|
||||
<li><code>"none"</code> or <code>"zero"</code> will treat the text as if it has a value of zero.</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>Individual columns can be modified by adding the following (they all do the same thing), set in order of priority:
|
||||
<ul>
|
||||
<li>jQuery data <code>data-string="top"</code>.</li>
|
||||
<li>metadata <code>class="{ string: 'top'}"</code>. This requires the metadata plugin.</li>
|
||||
<li>headers option <code>headers : { 0 : { string : 'top' } }</code>.</li>
|
||||
<li>header class name <code>class="string-top"</code>.</li>
|
||||
<li>Overall <code>stringTo</code> option.</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>Sort columns three through eight to see how the sort has changed. Note that the text is sorted separately from the numeric values.</li>
|
||||
<li>The <code>emptyTo</code> option defaults to bottom, so all empty cells will sort at the bottom of the table, except for the second column.</li>
|
||||
</ul>
|
||||
</p>
|
||||
|
||||
<h1>Demo</h1>
|
||||
<div id="demo"><table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Account #</th>
|
||||
<th>Difference</th>
|
||||
<th>3: Ratings (max)</th>
|
||||
<th>4: Ratings (min)</th>
|
||||
<th class="string-max">5: Change (max)</th>
|
||||
<th class="string-min">6: Change (min)</th>
|
||||
<th class="string-top">7: Change (top)</th>
|
||||
<th class="string-bottom">8: Change (bottom)</th>
|
||||
<th class="string-none">9: Change (zero)</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>A43</td>
|
||||
<td>-35</td>
|
||||
<td>01</td>
|
||||
<td>01</td>
|
||||
<td>-.1</td>
|
||||
<td>-.1</td>
|
||||
<td>-.1</td>
|
||||
<td>-.1</td>
|
||||
<td>-.1</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>A255</td>
|
||||
<td>33</td>
|
||||
<td>02</td>
|
||||
<td>02</td>
|
||||
<td>N/A #1</td>
|
||||
<td>N/A #1</td>
|
||||
<td>N/A #1</td>
|
||||
<td>N/A #1</td>
|
||||
<td>N/A #1</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>A33</td>
|
||||
<td>2</td>
|
||||
<td>03</td>
|
||||
<td>03</td>
|
||||
<td>N/A #2</td>
|
||||
<td>N/A #2</td>
|
||||
<td>N/A #2</td>
|
||||
<td>N/A #2</td>
|
||||
<td>N/A #2</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>A1</td>
|
||||
<td>-5</td>
|
||||
<td>04</td>
|
||||
<td>04</td>
|
||||
<td>-8.4</td>
|
||||
<td>-8.4</td>
|
||||
<td>-8.4</td>
|
||||
<td>-8.4</td>
|
||||
<td>-8.4</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>A102</td>
|
||||
<td>99</td>
|
||||
<td>05</td>
|
||||
<td>05</td>
|
||||
<td>-2.2</td>
|
||||
<td>-2.2</td>
|
||||
<td>-2.2</td>
|
||||
<td>-2.2</td>
|
||||
<td>-2.2</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>A10</td>
|
||||
<td>-1</td>
|
||||
<td>06</td>
|
||||
<td>06</td>
|
||||
<td>97.4</td>
|
||||
<td>97.4</td>
|
||||
<td>97.4</td>
|
||||
<td>97.4</td>
|
||||
<td>97.4</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>A02</td>
|
||||
<td>0</td>
|
||||
<td>07</td>
|
||||
<td>07</td>
|
||||
<td>23.6</td>
|
||||
<td>23.6</td>
|
||||
<td>23.6</td>
|
||||
<td>23.6</td>
|
||||
<td>23.6</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>A55</td>
|
||||
<td>44</td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td>11.4</td>
|
||||
<td>11.4</td>
|
||||
<td>11.4</td>
|
||||
<td>11.4</td>
|
||||
<td>11.4</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>A87</td>
|
||||
<td>04</td>
|
||||
<td>NR</td>
|
||||
<td>NR</td>
|
||||
<td>5.2</td>
|
||||
<td>5.2</td>
|
||||
<td>5.2</td>
|
||||
<td>5.2</td>
|
||||
<td>5.2</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>A012</td>
|
||||
<td></td>
|
||||
<td>NR</td>
|
||||
<td>NR</td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table></div>
|
||||
|
||||
<h1>Javascript</h1>
|
||||
<div id="javascript">
|
||||
<pre class="prettyprint lang-javascript"></pre>
|
||||
</div>
|
||||
<h1>HTML</h1>
|
||||
<div id="html">
|
||||
<pre class="prettyprint lang-html"></pre>
|
||||
</div>
|
||||
|
||||
<div class="next-up">
|
||||
<hr />
|
||||
Next up: <a href="example-parsers-class-name.html">Disable or set the column parser using class names ››</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
132
assets/vendor/tablesorter/docs/example-options-headers-locked.html
vendored
Normal file
132
assets/vendor/tablesorter/docs/example-options-headers-locked.html
vendored
Normal file
@@ -0,0 +1,132 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery plugin: Tablesorter 2.0 - Lock sort order</title>
|
||||
|
||||
<!-- jQuery -->
|
||||
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
|
||||
|
||||
<!-- Demo stuff -->
|
||||
<link rel="stylesheet" href="css/jq.css">
|
||||
<link href="css/prettify.css" rel="stylesheet">
|
||||
<script src="js/prettify.js"></script>
|
||||
<script src="js/docs.js"></script>
|
||||
|
||||
<!-- Tablesorter: required -->
|
||||
<link rel="stylesheet" href="../css/theme.blue.css">
|
||||
<script src="../js/jquery.tablesorter.js"></script>
|
||||
|
||||
<script id="js">$(function(){
|
||||
$("table").tablesorter({
|
||||
theme : 'blue',
|
||||
// pass the headers argument and passing a object
|
||||
headers: {
|
||||
0: {
|
||||
// lock the sort order of the first column to ascending (always Bruce to Peter when sorting on that column)
|
||||
lockedOrder: 'asc'
|
||||
}
|
||||
}
|
||||
});
|
||||
});</script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="banner">
|
||||
<h1>table<em>sorter</em></h1>
|
||||
<h2>Lock sort order</h2>
|
||||
<h3>Flexible client-side table sorting</h3>
|
||||
<a href="index.html">Back to documentation</a>
|
||||
</div>
|
||||
<div id="main">
|
||||
|
||||
<p class="tip">
|
||||
<em>NOTE!</em>
|
||||
<ul>
|
||||
<li>This option was part of the original plugin, but it was broken.</li>
|
||||
<li>Sort the first, third and fifth columns to see how the sort is locked.</li>
|
||||
<li>Columns can be locked using any of the following methods (they all do the same thing), in order of priority (v2.3+):
|
||||
<ul>
|
||||
<li>jQuery data <code>data-lockedorder="asc"</code>. (equivalent to <code>data-locked-order="asc"</code>).</li>
|
||||
<li>metadata <code>class="{ lockedOrder: 'asc'}"</code>. This requires the metadata plugin.</li>
|
||||
<li>headers option <code>headers : { 0 : { lockedOrder: 'asc' } }</code>.</li>
|
||||
<li>header class name <code>class="lockedOrder-asc"</code>.</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</p>
|
||||
|
||||
<h1>Demo</h1>
|
||||
<div id="demo"><table class="tablesorter">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>First Name</th>
|
||||
<th>Last Name</th>
|
||||
<th data-lockedOrder="desc">Age</th> <!-- added as data-lockedOrder, but the DOM changes it to data-lockedorder -->
|
||||
<th>Total</th>
|
||||
<th class="lockedOrder-desc">Discount</th>
|
||||
<th>Date</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Peter</td>
|
||||
<td>Parker</td>
|
||||
<td>28</td>
|
||||
<td>$9.99</td>
|
||||
<td>20%</td>
|
||||
<td>Jul 6, 2006 8:14 AM</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>John</td>
|
||||
<td>Hood</td>
|
||||
<td>33</td>
|
||||
<td>$19.99</td>
|
||||
<td>25%</td>
|
||||
<td>Dec 10, 2002 5:14 AM</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Clark</td>
|
||||
<td>Kent</td>
|
||||
<td>18</td>
|
||||
<td>$15.89</td>
|
||||
<td>44%</td>
|
||||
<td>Jan 12, 2003 11:14 AM</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Bruce</td>
|
||||
<td>Almighty</td>
|
||||
<td>45</td>
|
||||
<td>$153.19</td>
|
||||
<td>44%</td>
|
||||
<td>Jan 18, 2001 9:12 AM</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Bruce</td>
|
||||
<td>Evans</td>
|
||||
<td>22</td>
|
||||
<td>$13.19</td>
|
||||
<td>11%</td>
|
||||
<td>Jan 18, 2007 9:12 AM</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table></div>
|
||||
|
||||
<h1>Javascript</h1>
|
||||
<div id="javascript">
|
||||
<pre class="prettyprint lang-javascript"></pre>
|
||||
</div>
|
||||
<h1>HTML</h1>
|
||||
<div id="html">
|
||||
<pre class="prettyprint lang-html"></pre>
|
||||
</div>
|
||||
|
||||
<div class="next-up">
|
||||
<hr />
|
||||
Next up: <a href="example-options-headers-order.html">Set initial sort order using header options ››</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
135
assets/vendor/tablesorter/docs/example-options-headers-order.html
vendored
Normal file
135
assets/vendor/tablesorter/docs/example-options-headers-order.html
vendored
Normal file
@@ -0,0 +1,135 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery plugin: Tablesorter 2.0 - Set initial sort order</title>
|
||||
|
||||
<!-- jQuery -->
|
||||
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
|
||||
|
||||
<!-- Demo stuff -->
|
||||
<link rel="stylesheet" href="css/jq.css">
|
||||
<link href="css/prettify.css" rel="stylesheet">
|
||||
<script src="js/prettify.js"></script>
|
||||
<script src="js/docs.js"></script>
|
||||
|
||||
<!-- Tablesorter: required -->
|
||||
<link rel="stylesheet" href="../css/theme.blue.css">
|
||||
<script src="../js/jquery.tablesorter.js"></script>
|
||||
|
||||
<script id="js">$(function(){
|
||||
$("table").tablesorter({
|
||||
theme : 'blue',
|
||||
|
||||
// default sortInitialOrder setting
|
||||
sortInitialOrder: "asc",
|
||||
|
||||
// pass the headers argument and passing a object
|
||||
headers: {
|
||||
// set initial sort order by column, this headers option setting overrides the sortInitialOrder option
|
||||
0: { sortInitialOrder: 'desc' }
|
||||
}
|
||||
|
||||
});
|
||||
});</script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="banner">
|
||||
<h1>table<em>sorter</em></h1>
|
||||
<h2>Set initial sort order</h2>
|
||||
<h3>Flexible client-side table sorting</h3>
|
||||
<a href="index.html">Back to documentation</a>
|
||||
</div>
|
||||
<div id="main">
|
||||
|
||||
<p class="tip">
|
||||
<em>NOTE!</em>
|
||||
<ul>
|
||||
<li>Adding "sortInitialOrder" inside of the "headers" option was added in version 2.0.8 (not part of the original plugin).</li>
|
||||
<li>In versions 2.3+, the initial sort order of the columns can be set using any of the following methods (they all do the same thing), in order of priority:
|
||||
<ul>
|
||||
<li>jQuery data <code>data-sort-initial-order="desc"</code> (equivalent to <code>data-sortinitialorder="desc"</code>).</li>
|
||||
<li>metadata <code>class="{ sortInitialOrder: "desc" }"</code>. This requires the metadata plugin.</li>
|
||||
<li>headers option <code>headers : { 0 : { sortInitialOrder: "desc" } }</code>.</li>
|
||||
<li>header class name <code>class="sortInitialOrder-desc"</code>.</li>
|
||||
<li>overall <code>sortInitialOrder</code> option setting.</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</p>
|
||||
|
||||
<h1>Demo</h1>
|
||||
<div id="demo"><table class="tablesorter">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>First Name (desc)</th>
|
||||
<th>Last Name (asc)</th>
|
||||
<th class="sortInitialOrder-desc">Age (desc)</th>
|
||||
<th>Total (asc)</th>
|
||||
<th data-sortinitialorder="desc">Discount (desc)</th> <!-- equivalent to data-sortInitialOrder="desc" or data-sort-initialorder="desc" -->
|
||||
<th>Date (asc)</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Peter</td>
|
||||
<td>Parker</td>
|
||||
<td>28</td>
|
||||
<td>$9.99</td>
|
||||
<td>20%</td>
|
||||
<td>Jul 6, 2006 8:14 AM</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>John</td>
|
||||
<td>Hood</td>
|
||||
<td>33</td>
|
||||
<td>$19.99</td>
|
||||
<td>25%</td>
|
||||
<td>Dec 10, 2002 5:14 AM</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Clark</td>
|
||||
<td>Kent</td>
|
||||
<td>18</td>
|
||||
<td>$15.89</td>
|
||||
<td>44%</td>
|
||||
<td>Jan 12, 2003 11:14 AM</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Bruce</td>
|
||||
<td>Almighty</td>
|
||||
<td>45</td>
|
||||
<td>$153.19</td>
|
||||
<td>44%</td>
|
||||
<td>Jan 18, 2001 9:12 AM</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Bruce</td>
|
||||
<td>Evans</td>
|
||||
<td>22</td>
|
||||
<td>$13.19</td>
|
||||
<td>11%</td>
|
||||
<td>Jan 18, 2007 9:12 AM</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table></div>
|
||||
|
||||
<h1>Javascript</h1>
|
||||
<div id="javascript">
|
||||
<pre class="prettyprint lang-javascript"></pre>
|
||||
</div>
|
||||
<h1>HTML</h1>
|
||||
<div id="html">
|
||||
<pre class="prettyprint lang-html"></pre>
|
||||
</div>
|
||||
|
||||
<div class="next-up">
|
||||
<hr />
|
||||
Next up: <a href="example-option-sortreset-sortrestart.html">Using sortReset & sortRestart ››</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
137
assets/vendor/tablesorter/docs/example-options-headers.html
vendored
Normal file
137
assets/vendor/tablesorter/docs/example-options-headers.html
vendored
Normal file
@@ -0,0 +1,137 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery plugin: Tablesorter 2.0 - Disable sort</title>
|
||||
|
||||
<!-- jQuery -->
|
||||
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
|
||||
|
||||
<!-- Demo stuff -->
|
||||
<link rel="stylesheet" href="css/jq.css">
|
||||
<link href="css/prettify.css" rel="stylesheet">
|
||||
<script src="js/prettify.js"></script>
|
||||
<script src="js/docs.js"></script>
|
||||
|
||||
<!-- Tablesorter: required -->
|
||||
<link rel="stylesheet" href="../css/theme.blue.css">
|
||||
<script src="../js/jquery.tablesorter.js"></script>
|
||||
|
||||
<script id="js">$(function(){
|
||||
|
||||
// BONUS TIP: disable a column using jQuery data directly
|
||||
// but do it before the table initializes
|
||||
$("table thead th:eq(5)").data("sorter", false);
|
||||
|
||||
$("table").tablesorter({
|
||||
theme : 'blue',
|
||||
|
||||
headers: {
|
||||
// disable sorting of the first column (we start counting at zero)
|
||||
0: {
|
||||
// disable it by setting the property sorter to false
|
||||
sorter: false
|
||||
}
|
||||
}
|
||||
});
|
||||
});</script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="banner">
|
||||
<h1>table<em>sorter</em></h1>
|
||||
<h2>Disable sort</h2>
|
||||
<h3>Flexible client-side table sorting</h3>
|
||||
<a href="index.html">Back to documentation</a>
|
||||
</div>
|
||||
<div id="main">
|
||||
|
||||
<p class="tip">
|
||||
<em>NOTE!</em>
|
||||
<ul>
|
||||
<li>In tablesorter v2.0.5 and older, only the metadata and headers options methods were available.</li>
|
||||
<li>In versions 2.3+, columns can be disabled using any of the following methods (they all do the same thing), in order of priority:
|
||||
<ul>
|
||||
<li>jQuery data <code>data-sorter="false"</code> (see the Javascript block below on how to set it directly).</li>
|
||||
<li>metadata <code>class="{ sorter: false }"</code>. This requires the metadata plugin.</li>
|
||||
<li>headers option <code>headers : { 0 : { sorter: false } }</code>.</li>
|
||||
<li>header class name <code>class="sorter-false"</code>.</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</p>
|
||||
|
||||
<h1>Demo</h1>
|
||||
<div id="demo"><table class="tablesorter">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>First Name</th>
|
||||
<th>Last Name</th>
|
||||
<th data-sorter="false">Age</th>
|
||||
<th>Total</th>
|
||||
<th class="sorter-false">Discount</th>
|
||||
<th>Date</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Peter</td>
|
||||
<td>Parker</td>
|
||||
<td>28</td>
|
||||
<td>$9.99</td>
|
||||
<td>20%</td>
|
||||
<td>Jul 6, 2006 8:14 AM</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>John</td>
|
||||
<td>Hood</td>
|
||||
<td>33</td>
|
||||
<td>$19.99</td>
|
||||
<td>25%</td>
|
||||
<td>Dec 10, 2002 5:14 AM</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Clark</td>
|
||||
<td>Kent</td>
|
||||
<td>18</td>
|
||||
<td>$15.89</td>
|
||||
<td>44%</td>
|
||||
<td>Jan 12, 2003 11:14 AM</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Bruce</td>
|
||||
<td>Almighty</td>
|
||||
<td>45</td>
|
||||
<td>$153.19</td>
|
||||
<td>44%</td>
|
||||
<td>Jan 18, 2001 9:12 AM</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Bruce</td>
|
||||
<td>Evans</td>
|
||||
<td>22</td>
|
||||
<td>$13.19</td>
|
||||
<td>11%</td>
|
||||
<td>Jan 18, 2007 9:12 AM</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table></div>
|
||||
|
||||
<h1>Javascript</h1>
|
||||
<div id="javascript">
|
||||
<pre class="prettyprint lang-javascript"></pre>
|
||||
</div>
|
||||
<h1>HTML</h1>
|
||||
<div id="html">
|
||||
<pre class="prettyprint lang-html"></pre>
|
||||
</div>
|
||||
|
||||
<div class="next-up">
|
||||
<hr />
|
||||
Next up: <a href="example-options-headers-locked.html">Lock sort order using header options ››</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
442
assets/vendor/tablesorter/docs/example-pager-ajax.html
vendored
Normal file
442
assets/vendor/tablesorter/docs/example-pager-ajax.html
vendored
Normal file
@@ -0,0 +1,442 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery plugin: Tablesorter 2.0 - Pager plugin - Ajax</title>
|
||||
|
||||
<!-- jQuery -->
|
||||
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
|
||||
|
||||
<!-- Demo stuff -->
|
||||
<link class="ui-theme" rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/cupertino/jquery-ui.css">
|
||||
<link href="css/jq.css" rel="stylesheet">
|
||||
<link href="css/prettify.css" rel="stylesheet">
|
||||
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
|
||||
<script src="js/prettify.js"></script>
|
||||
<script src="js/docs.js"></script>
|
||||
|
||||
<!-- Tablesorter: required -->
|
||||
<link rel="stylesheet" href="../css/theme.blue.css">
|
||||
<script src="../js/jquery.tablesorter.js"></script>
|
||||
|
||||
<!-- Tablesorter pager: required -->
|
||||
<link rel="stylesheet" href="../addons/pager/jquery.tablesorter.pager.css">
|
||||
<script src="../addons/pager/jquery.tablesorter.pager.js"></script>
|
||||
|
||||
<!-- Tablesorter: optional -->
|
||||
<script src="../js/jquery.tablesorter.widgets.js"></script>
|
||||
|
||||
<script id="js">$(function(){
|
||||
|
||||
// Initialize tablesorter
|
||||
// ***********************
|
||||
$("table")
|
||||
.tablesorter({
|
||||
theme: 'blue',
|
||||
widthFixed: true,
|
||||
sortLocaleCompare: true, // needed for accented characters in the data
|
||||
sortList: [ [0,1] ],
|
||||
widgets: ['zebra', 'filter']
|
||||
})
|
||||
|
||||
// initialize the pager plugin
|
||||
// ****************************
|
||||
.tablesorterPager({
|
||||
|
||||
// **********************************
|
||||
// Description of ALL pager options
|
||||
// **********************************
|
||||
|
||||
// target the pager markup - see the HTML block below
|
||||
container: $(".pager"),
|
||||
|
||||
// use this format: "http:/mydatabase.com?page={page}&size={size}&{sortList:col}"
|
||||
// where {page} is replaced by the page number (or use {page+1} to get a one-based index),
|
||||
// {size} is replaced by the number of records to show,
|
||||
// {sortList:col} adds the sortList to the url into a "col" array, and {filterList:fcol} adds
|
||||
// the filterList to the url into an "fcol" array.
|
||||
// So a sortList = [[2,0],[3,0]] becomes "&col[2]=0&col[3]=0" in the url
|
||||
// and a filterList = [[2,Blue],[3,13]] becomes "&fcol[2]=Blue&fcol[3]=13" in the url
|
||||
ajaxUrl : 'assets/City{page}.json?{filterList:filter}&{sortList:column}',
|
||||
|
||||
// modify the url after all processing has been applied
|
||||
customAjaxUrl: function(table, url) {
|
||||
// manipulate the url string as you desire
|
||||
// url += '&cPage=' + window.location.pathname;
|
||||
// trigger my custom event
|
||||
$(table).trigger('changingUrl', url);
|
||||
// send the server the current page
|
||||
return url;
|
||||
},
|
||||
|
||||
// add more ajax settings here
|
||||
// see http://api.jquery.com/jQuery.ajax/#jQuery-ajax-settings
|
||||
ajaxObject: {
|
||||
dataType: 'json'
|
||||
},
|
||||
|
||||
// process ajax so that the following information is returned:
|
||||
// [ total_rows (number), rows (array of arrays), headers (array; optional) ]
|
||||
// example:
|
||||
// [
|
||||
// 100, // total rows
|
||||
// [
|
||||
// [ "row1cell1", "row1cell2", ... "row1cellN" ],
|
||||
// [ "row2cell1", "row2cell2", ... "row2cellN" ],
|
||||
// ...
|
||||
// [ "rowNcell1", "rowNcell2", ... "rowNcellN" ]
|
||||
// ],
|
||||
// [ "header1", "header2", ... "headerN" ] // optional
|
||||
// ]
|
||||
// OR
|
||||
// return [ total_rows, $rows (jQuery object; optional), headers (array; optional) ]
|
||||
ajaxProcessing: function(data){
|
||||
if (data && data.hasOwnProperty('rows')) {
|
||||
var r, row, c, d = data.rows,
|
||||
// total number of rows (required)
|
||||
total = data.total_rows,
|
||||
// array of header names (optional)
|
||||
headers = data.headers,
|
||||
// all rows: array of arrays; each internal array has the table cell data for that row
|
||||
rows = [],
|
||||
// len should match pager set size (c.size)
|
||||
len = d.length;
|
||||
// this will depend on how the json is set up - see City0.json
|
||||
// rows
|
||||
for ( r=0; r < len; r++ ) {
|
||||
row = []; // new row array
|
||||
// cells
|
||||
for ( c in d[r] ) {
|
||||
if (typeof(c) === "string") {
|
||||
row.push(d[r][c]); // add each table cell data to row array
|
||||
}
|
||||
}
|
||||
rows.push(row); // add new row array to rows array
|
||||
}
|
||||
// in version 2.10, you can optionally return $(rows) a set of table rows within a jQuery object
|
||||
return [ total, rows, headers ];
|
||||
}
|
||||
},
|
||||
|
||||
// output string - default is '{page}/{totalPages}'; possible variables: {page}, {totalPages}, {startRow}, {endRow} and {totalRows}
|
||||
output: '{startRow} to {endRow} ({totalRows})',
|
||||
|
||||
// apply disabled classname to the pager arrows when the rows at either extreme is visible - default is true
|
||||
updateArrows: true,
|
||||
|
||||
// starting page of the pager (zero based index)
|
||||
page: 0,
|
||||
|
||||
// Number of visible rows - default is 10
|
||||
size: 25,
|
||||
|
||||
// if true, the table will remain the same height no matter how many records are displayed. The space is made up by an empty
|
||||
// table row set to a height to compensate; default is false
|
||||
fixedHeight: false,
|
||||
|
||||
// remove rows from the table to speed up the sort of large tables.
|
||||
// setting this to false, only hides the non-visible rows; needed if you plan to add/remove rows with the pager enabled.
|
||||
removeRows: false,
|
||||
|
||||
// css class names of pager arrows
|
||||
cssNext : '.next', // next page arrow
|
||||
cssPrev : '.prev', // previous page arrow
|
||||
cssFirst : '.first', // go to first page arrow
|
||||
cssLast : '.last', // go to last page arrow
|
||||
cssPageDisplay : '.pagedisplay', // location of where the "output" is displayed
|
||||
cssPageSize : '.pagesize', // page size selector - select dropdown that sets the "size" option
|
||||
cssErrorRow : 'tablesorter-errorRow', // error information row
|
||||
|
||||
// class added to arrows when at the extremes (i.e. prev/first arrows are "disabled" when on the first page)
|
||||
cssDisabled : 'disabled' // Note there is no period "." in front of this class name
|
||||
|
||||
});
|
||||
|
||||
});</script>
|
||||
|
||||
</head>
|
||||
<body id="pager-demo">
|
||||
<div id="banner">
|
||||
<h1>table<em>sorter</em></h1>
|
||||
<h2>Pager plugin - Ajax</h2>
|
||||
<h3>Flexible client-side table sorting</h3>
|
||||
<a href="index.html">Back to documentation</a>
|
||||
</div>
|
||||
|
||||
<div id="main">
|
||||
|
||||
<p></p>
|
||||
<br>
|
||||
<div class="accordion">
|
||||
|
||||
<h3><a href="#">Notes</a></h3>
|
||||
<div>
|
||||
<ul>
|
||||
<li>In <span class="version">v2.13.3</span>, the "ID" column has a default filter setting of ">30" and a descending sort, but neither is applied as this demo is not connected a server (just a basic JSON file).</li>
|
||||
<li>In <span class="version">v2.11</span>, the pager now stores any object returned by the `ajaxProcessing` function in `table.config.pager.ajaxData` (see the ajaxProcessing section below for more details).</li>
|
||||
<li>In <span class="version updated">v2.10</span>, the <code>ajaxProcessing</code> function was updated to only require a total number of rows to be returned, also instead of returning an array of table rows, you can build the table yourself and just return the jQuery object containing those rows. The addon triggers an update.</li>
|
||||
<li><code>{filterList:fcol}</code> was added to the <code>ajaxUrl</code> in version 2.6.</li>
|
||||
<li><code>{sortList:col}</code> was added to the <code>ajaxUrl</code> in version 2.4.5.</li>
|
||||
<li>This update to the pager plugin that interacts with a database via ajax was added in version 2.0.32 and can be applied to the original tablesorter.</li>
|
||||
<li>The <code>ajaxUrl</code> and <code>ajaxProcessing</code> function are both required options for this interaction to work properly.</li>
|
||||
<li>The <code>ajaxUrl</code> contains a replaceable string to send the requested page (<code>{page}</code>), block size (<code>{size}</code>) or sort order (<code>{sortList:name}</code>).</li>
|
||||
<li>The table header and footer text will be updated to match the JSON "header column #" text; but there is an issue with the table rendering improperly if the number of columns in the HTML and the number of columns in the JSON don't match.</li>
|
||||
<li><strong>Limitations of this demo</strong>:
|
||||
<ul>
|
||||
<li>This demo will not work when viewing it locally (except in Firefox) due to communication restrictions between the browser and your desktop.</li>
|
||||
<li>The record size is limited to 25 records because this demo is not interacting with an actual database, but with four JSON files containing 25 records each.</li>
|
||||
<li>Sorting of columns is disabled in this demo because no table data is cached when <code>serverSideSorting</code> is enabled. <del>Sorting of columns is enabled in this demo by setting the <code>serverSideSorting</code> option to <code>false</code> after initialization. It only sorts the current table contents because there is no server to return sorted data</del>.</li>
|
||||
<li>The filters will only update the "Current Ajax url" because again, we're just working with JSON files here.</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<p class="small">* If you have a different JSON format and need help with the processing code, please ask the question on <a href="http://stackoverflow.com/questions/tagged/tablesorter">StackOverflow</a> or message me directly (gmail; wowmotty). Please don't open an issue for help with code.</p>
|
||||
</div>
|
||||
|
||||
<h3><a href="#">ajaxProcessing</a></h3>
|
||||
<div>
|
||||
The <code>ajaxProcessing</code> function is needed to convert your custom JSON format into an array usable by the pager plugin (modified in 2.1.3)<br>
|
||||
<br>
|
||||
So, given this custom JSON format (this is only an example):
|
||||
<pre class="prettyprint lang-javascript">{
|
||||
"total_rows": 80,
|
||||
|
||||
"headers" : [
|
||||
"ID", "Name", "Country Code", "District", "Population"
|
||||
],
|
||||
|
||||
"rows" : [{
|
||||
"ID": 1,
|
||||
"Name": "Kabul",
|
||||
"CountryCode": "AFG",
|
||||
"District": "Kabol",
|
||||
"Population": 1780000
|
||||
}, {
|
||||
"ID": 2,
|
||||
"Name": "Qandahar",
|
||||
"CountryCode": "AFG",
|
||||
"District": "Qandahar",
|
||||
"Population": 237500
|
||||
}, {
|
||||
...
|
||||
}, {
|
||||
"ID": 25,
|
||||
"Name": "Haarlemmermeer",
|
||||
"CountryCode": "NLD",
|
||||
"District": "Noord-Holland",
|
||||
"Population": 110722
|
||||
}]
|
||||
}</pre>
|
||||
<h3>OBJECT returned</h3>
|
||||
<ul>
|
||||
<li>In <span class="version">v2.11</span>, the <code>ajaxProcessing</code> can just return the above object directly (<strong>or don't even bother setting an <code>ajaxProcessing</code> function</strong>).
|
||||
So, if an object is returned by the <code>ajaxProcessing</code> function, the data is stored in <code>table.config.pager.ajaxData</code>:
|
||||
<ul>
|
||||
<li>The object should contain attributes for <code>total</code> (numeric), <code>headers</code> (array) and <code>rows</code> (array of arrays).</li>
|
||||
<li>A replacement <code>output</code> option can also be loaded via this method and must be included in the <code>output</code> attribute (i.e. <code>ajaxData.output</code>).</li>
|
||||
<li>Additional attributes are also available to the output display by using the attribute key wrapped in curly brackets (e.g. <code>{extra}</code> from <code>ajaxData.extra</code>).</li>
|
||||
<li>Additional attributes can also be objects or arrays and can be accessed via the output string as <code>{extra:0}</code> (for arrays) or <code>{extra:key}</code> for objects.</li>
|
||||
<li>The page number is processed first, so it would be possible to use this string <code>{extra:{page}}</code> (<code>{page}</code> is a one-based index), or if you need a different value use <code>{page+1}</code> (zero-based index plus any number), or <code>{page-1}</code> (zero-based index minus any number).</li>
|
||||
<li>For more details, please see <a href="https://github.com/Mottie/tablesorter/issues/326">issue #326</a>.</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<h3>ARRAY returned</h3>
|
||||
<ul>
|
||||
<li>The <code>ajaxProcessing</code> function can return the data in the following format <code>[ total, rows, headers (optional) ]</code>,
|
||||
<br>or in version 2.9+ <code>[ rows, total, headers (optional) ]</code>,
|
||||
<br>or in <span class="version">v2.10</span>, return a jQuery object within the array <code>[ total, $rows ]</code>, or just <code>[ total ]</code>:
|
||||
<pre class="prettyprint lang-javascript">[
|
||||
// total # rows contained in the database
|
||||
80,
|
||||
// row data: array of arrays; each internal array has the table cell data for that row
|
||||
[
|
||||
[ 1, "Kabul", "AFG", "Kabol", 1780000 ], // [ "row1cell1", "row1cell2", ... "row1cellN" ],
|
||||
[ 2, "Qandahar", "AFG", "Qandahar", 237500 ], // [ "row2cell1", "row2cell2", ... "row2cellN" ],
|
||||
...
|
||||
[ 25, "Haarlemmermeer", "NLD", "Noord-Holland", 110722 ] // [ "rowNcell1", "rowNcell2", ... "rowNcellN" ]
|
||||
],
|
||||
[ "ID", "Name", "Country Code", "District", "Population" ] // [ "Header1", "Header2", ... "HeaderN" ] (optional)
|
||||
]</pre></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<h1>Demo</h1>
|
||||
Original Ajax url: <span id="origurl"></span><br>
|
||||
Current Ajax url: <span id="url"></span>
|
||||
<br>
|
||||
<table class="tablesorter">
|
||||
<thead>
|
||||
<tr>
|
||||
<td class="pager sorter-false" colspan="5">
|
||||
<img src="../addons/pager/icons/first.png" class="first" alt="First" />
|
||||
<img src="../addons/pager/icons/prev.png" class="prev" alt="Prev" />
|
||||
<span class="pagedisplay"></span> <!-- this can be any element, including an input -->
|
||||
<img src="../addons/pager/icons/next.png" class="next" alt="Next" />
|
||||
<img src="../addons/pager/icons/last.png" class="last" alt="Last" />
|
||||
<select class="pagesize">
|
||||
<option value="25">25</option>
|
||||
</select>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th data-value=">30">1</th>
|
||||
<th>2</th>
|
||||
<th>3</th>
|
||||
<th>4</th>
|
||||
<th>5</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<th>1</th>
|
||||
<th>2</th>
|
||||
<th>3</th>
|
||||
<th>4</th>
|
||||
<th>5</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="pager" colspan="5">
|
||||
<img src="../addons/pager/icons/first.png" class="first" alt="First" />
|
||||
<img src="../addons/pager/icons/prev.png" class="prev" alt="Prev" />
|
||||
<span class="pagedisplay"></span> <!-- this can be any element, including an input -->
|
||||
<img src="../addons/pager/icons/next.png" class="next" alt="Next" />
|
||||
<img src="../addons/pager/icons/last.png" class="last" alt="Last" />
|
||||
<select class="pagesize">
|
||||
<option value="25">25</option>
|
||||
</select>
|
||||
</td>
|
||||
</tr>
|
||||
</tfoot>
|
||||
<tbody>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<h1>Javascript</h1>
|
||||
<div id="javascript">
|
||||
<pre class="prettyprint lang-javascript"></pre>
|
||||
</div>
|
||||
|
||||
<h1>CSS</h1>
|
||||
<div>
|
||||
<pre class="prettyprint lang-css">/* pager wrapper, div */
|
||||
.pager {
|
||||
padding: 5px;
|
||||
}
|
||||
/* pager wrapper, in thead/tfoot */
|
||||
td.pager {
|
||||
background-color: #e6eeee;
|
||||
}
|
||||
/* pager navigation arrows */
|
||||
.pager img {
|
||||
vertical-align: middle;
|
||||
margin-right: 2px;
|
||||
}
|
||||
/* pager output text */
|
||||
.pager .pagedisplay {
|
||||
font-size: 11px;
|
||||
padding: 0 5px 0 5px;
|
||||
width: 50px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/*** loading ajax indeterminate progress indicator ***/
|
||||
#tablesorterPagerLoading {
|
||||
background: rgba(255,255,255,0.8) url(icons/loading.gif) center center no-repeat;
|
||||
position: absolute;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
/*** css used when "updateArrows" option is true ***/
|
||||
/* the pager itself gets a disabled class when the number of rows is less than the size */
|
||||
.pager.disabled {
|
||||
display: none;
|
||||
}
|
||||
/* hide or fade out pager arrows when the first or last row is visible */
|
||||
.pager img.disabled {
|
||||
/* visibility: hidden */
|
||||
opacity: 0.5;
|
||||
filter: alpha(opacity=50);
|
||||
}</pre>
|
||||
</div>
|
||||
|
||||
<h1>HTML</h1>
|
||||
<div id="html">
|
||||
<pre class="prettyprint lang-html"><table class="tablesorter">
|
||||
<thead>
|
||||
<tr>
|
||||
<td class="pager" colspan="5">
|
||||
<img src="../addons/pager/icons/first.png" class="first"/>
|
||||
<img src="../addons/pager/icons/prev.png" class="prev"/>
|
||||
<span class="pagedisplay"></span> <!-- this can be any element, including an input -->
|
||||
<img src="../addons/pager/icons/next.png" class="next"/>
|
||||
<img src="../addons/pager/icons/last.png" class="last"/>
|
||||
<select class="pagesize">
|
||||
<option value="25">25</option>
|
||||
</select>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>1 data-value="&gt;30"</th> <!-- thead text will be updated from the JSON; make sure the number of columns matches the JSON data -->
|
||||
<th>2</th>
|
||||
<th>3</th>
|
||||
<th>4</th>
|
||||
<th>5</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<th>1</th> <!-- tfoot text will be updated at the same time as the thead -->
|
||||
<th>2</th>
|
||||
<th>3</th>
|
||||
<th>4</th>
|
||||
<th>5</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="pager" colspan="5">
|
||||
<img src="../addons/pager/icons/first.png" class="first"/>
|
||||
<img src="../addons/pager/icons/prev.png" class="prev"/>
|
||||
<span class="pagedisplay"></span> <!-- this can be any element, including an input -->
|
||||
<img src="../addons/pager/icons/next.png" class="next"/>
|
||||
<img src="../addons/pager/icons/last.png" class="last"/>
|
||||
<select class="pagesize">
|
||||
<option value="25">25</option>
|
||||
</select>
|
||||
</td>
|
||||
</tr>
|
||||
</tfoot>
|
||||
<tbody> <!-- tbody will be loaded via JSON -->
|
||||
</tbody>
|
||||
</table></pre>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="next-up">
|
||||
<hr />
|
||||
Next up: <a href="example-pager-filtered.html">Pager plugin + filter widget ››</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<script>
|
||||
var $url = $('#url');
|
||||
$('table')
|
||||
|
||||
// show current URL for the DEMO ONLY
|
||||
.on('changingUrl', function(e, url){
|
||||
$url.html(url);
|
||||
})
|
||||
|
||||
.on('pagerInitialized', function(){
|
||||
// allow THIS demo to sort the content; this variable is automatically set to true when ajax
|
||||
// is used as there isn't any way to sort the server side data from the client side.
|
||||
this.config.serverSideSorting = false;
|
||||
// show original highlighted URL
|
||||
$('#origurl').html( this.config.pager.ajaxUrl.replace(/(\{.*?\})/g, '<span class="results">$1</span>') );
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
468
assets/vendor/tablesorter/docs/example-pager-filtered.html
vendored
Normal file
468
assets/vendor/tablesorter/docs/example-pager-filtered.html
vendored
Normal file
@@ -0,0 +1,468 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery plugin: Tablesorter 2.0 - Pager plugin + Filter widget</title>
|
||||
|
||||
<!-- jQuery -->
|
||||
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
|
||||
|
||||
<!-- Demo stuff -->
|
||||
<link rel="stylesheet" href="css/jq.css">
|
||||
<link href="css/prettify.css" rel="stylesheet">
|
||||
<script src="js/prettify.js"></script>
|
||||
<script src="js/docs.js"></script>
|
||||
|
||||
<!-- Tablesorter: required -->
|
||||
<link rel="stylesheet" href="../css/theme.blue.css">
|
||||
<script src="../js/jquery.tablesorter.js"></script>
|
||||
|
||||
<!-- Tablesorter: optional -->
|
||||
<link rel="stylesheet" href="../addons/pager/jquery.tablesorter.pager.css">
|
||||
<script src="../addons/pager/jquery.tablesorter.pager.js"></script>
|
||||
<script src="../js/jquery.tablesorter.widgets.js"></script>
|
||||
|
||||
<script id="js">$(function(){
|
||||
|
||||
// define pager options
|
||||
var pagerOptions = {
|
||||
// target the pager markup - see the HTML block below
|
||||
container: $(".pager"),
|
||||
// output string - default is '{page}/{totalPages}'; possible variables: {page}, {totalPages}, {startRow}, {endRow} and {totalRows}
|
||||
output: '{startRow} - {endRow} / {filteredRows} ({totalRows})',
|
||||
// if true, the table will remain the same height no matter how many records are displayed. The space is made up by an empty
|
||||
// table row set to a height to compensate; default is false
|
||||
fixedHeight: true,
|
||||
// remove rows from the table to speed up the sort of large tables.
|
||||
// setting this to false, only hides the non-visible rows; needed if you plan to add/remove rows with the pager enabled.
|
||||
removeRows: false,
|
||||
// go to page selector - select dropdown that sets the current page
|
||||
cssGoto: '.gotoPage'
|
||||
};
|
||||
|
||||
// Initialize tablesorter
|
||||
// ***********************
|
||||
$("table")
|
||||
.tablesorter({
|
||||
theme: 'blue',
|
||||
headerTemplate : '{content} {icon}', // new in v2.7. Needed to add the bootstrap icon!
|
||||
widthFixed: true,
|
||||
widgets: ['zebra', 'filter']
|
||||
})
|
||||
|
||||
// initialize the pager plugin
|
||||
// ****************************
|
||||
.tablesorterPager(pagerOptions);
|
||||
|
||||
// Add two new rows using the "addRows" method
|
||||
// the "update" method doesn't work here because not all rows are
|
||||
// present in the table when the pager is applied ("removeRows" is false)
|
||||
// ***********************************************************************
|
||||
var r, $row, num = 50,
|
||||
row = '<tr><td>Student{i}</td><td>{m}</td><td>{g}</td><td>{r}</td><td>{r}</td><td>{r}</td><td>{r}</td><td><button type="button" class="remove" title="Remove this row">X</button></td></tr>' +
|
||||
'<tr><td>Student{j}</td><td>{m}</td><td>{g}</td><td>{r}</td><td>{r}</td><td>{r}</td><td>{r}</td><td><button type="button" class="remove" title="Remove this row">X</button></td></tr>';
|
||||
$('button:contains(Add)').click(function(){
|
||||
// add two rows of random data!
|
||||
r = row.replace(/\{[gijmr]\}/g, function(m){
|
||||
return {
|
||||
'{i}' : num + 1,
|
||||
'{j}' : num + 2,
|
||||
'{r}' : Math.round(Math.random() * 100),
|
||||
'{g}' : Math.random() > 0.5 ? 'male' : 'female',
|
||||
'{m}' : Math.random() > 0.5 ? 'Mathematics' : 'Languages'
|
||||
}[m];
|
||||
});
|
||||
num = num + 2;
|
||||
$row = $(r);
|
||||
$('table')
|
||||
.find('tbody').append($row)
|
||||
.trigger('addRows', [$row]);
|
||||
return false;
|
||||
});
|
||||
|
||||
// Delete a row
|
||||
// *************
|
||||
$('table').delegate('button.remove', 'click' ,function(){
|
||||
var t = $('table');
|
||||
// disabling the pager will restore all table rows
|
||||
t.trigger('disable.pager');
|
||||
// remove chosen row
|
||||
$(this).closest('tr').remove();
|
||||
// restore pager
|
||||
t.trigger('enable.pager');
|
||||
});
|
||||
|
||||
// Destroy pager / Restore pager
|
||||
// **************
|
||||
$('button:contains(Destroy)').click(function(){
|
||||
// Exterminate, annhilate, destroy! http://www.youtube.com/watch?v=LOqn8FxuyFs
|
||||
var $t = $(this);
|
||||
if (/Destroy/.test( $t.text() )){
|
||||
$('table').trigger('destroy.pager');
|
||||
$t.text('Restore Pager');
|
||||
} else {
|
||||
$('table').tablesorterPager(pagerOptions);
|
||||
$t.text('Destroy Pager');
|
||||
}
|
||||
return false;
|
||||
});
|
||||
|
||||
// Disable / Enable
|
||||
// **************
|
||||
$('.toggle').click(function(){
|
||||
var mode = /Disable/.test( $(this).text() );
|
||||
$('table').trigger( (mode ? 'disable' : 'enable') + '.pager');
|
||||
$(this).text( (mode ? 'Enable' : 'Disable') + 'Pager');
|
||||
return false;
|
||||
});
|
||||
$('table').bind('pagerChange', function(){
|
||||
// pager automatically enables when table is sorted.
|
||||
$('.toggle').text('Disable');
|
||||
});
|
||||
|
||||
});</script>
|
||||
</head>
|
||||
<body id="pager-demo">
|
||||
<div id="banner">
|
||||
<h1>table<em>sorter</em></h1>
|
||||
<h2>Pager plugin + Filter widget</h2>
|
||||
<h3>Flexible client-side table sorting</h3>
|
||||
<a href="index.html">Back to documentation</a>
|
||||
</div>
|
||||
|
||||
<div id="main">
|
||||
|
||||
<p class="tip">
|
||||
<em>NOTE!</em> The following are not part of the original plugin:
|
||||
<ul>
|
||||
<li>When using this pager plugin with the filter widget, make sure that the <code>removeRows</code> option is set to <code>false</code> or it won't work.</li>
|
||||
<li>This combination was not possible in tablesorter versions prior to version 2.4.</li>
|
||||
<li>This combination can not be applied to the original tablesorter.</li>
|
||||
</ul>
|
||||
</p>
|
||||
|
||||
<h1>Demo</h1>
|
||||
<br>
|
||||
<button type="button">Add Rows</button> <button type="button" class="toggle">Disable Pager</button> <button type="button">Destroy Pager</button>
|
||||
<br><br>
|
||||
<div class="pager">
|
||||
Page: <select class="gotoPage"></select>
|
||||
<img src="../addons/pager/icons/first.png" class="first" alt="First" title="First page" />
|
||||
<img src="../addons/pager/icons/prev.png" class="prev" alt="Prev" title="Previous page" />
|
||||
<span class="pagedisplay"></span> <!-- this can be any element, including an input -->
|
||||
<img src="../addons/pager/icons/next.png" class="next" alt="Next" title="Next page" />
|
||||
<img src="../addons/pager/icons/last.png" class="last" alt="Last" title= "Last page" />
|
||||
<select class="pagesize">
|
||||
<option selected="selected" value="10">10</option>
|
||||
<option value="20">20</option>
|
||||
<option value="30">30</option>
|
||||
<option value="40">40</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<table class="tablesorter">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Major</th>
|
||||
<th>Sex</th>
|
||||
<th>English</th>
|
||||
<th>Japanese</th>
|
||||
<th>Calculus</th>
|
||||
<th>Geometry</th>
|
||||
<th class="filter-false remove sorter-false"></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Major</th>
|
||||
<th>Sex</th>
|
||||
<th>English</th>
|
||||
<th>Japanese</th>
|
||||
<th>Calculus</th>
|
||||
<th>Geometry</th>
|
||||
<th></th>
|
||||
</tr>
|
||||
</tfoot>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Student01</td>
|
||||
<td>Languages</td>
|
||||
<td>male</td>
|
||||
<td>80</td>
|
||||
<td>70</td>
|
||||
<td>75</td>
|
||||
<td>80</td>
|
||||
<td><button type="button" class="remove" title="Remove this row">X</button></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Student02</td>
|
||||
<td>Mathematics</td>
|
||||
<td>male</td>
|
||||
<td>90</td>
|
||||
<td>88</td>
|
||||
<td>100</td>
|
||||
<td>90</td>
|
||||
<td><button type="button" class="remove" title="Remove this row">X</button></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Student03</td>
|
||||
<td>Languages</td>
|
||||
<td>female</td>
|
||||
<td>85</td>
|
||||
<td>95</td>
|
||||
<td>80</td>
|
||||
<td>85</td>
|
||||
<td><button type="button" class="remove" title="Remove this row">X</button></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Student04</td>
|
||||
<td>Languages</td>
|
||||
<td>male</td>
|
||||
<td>60</td>
|
||||
<td>55</td>
|
||||
<td>100</td>
|
||||
<td>100</td>
|
||||
<td><button type="button" class="remove" title="Remove this row">X</button></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Student05</td>
|
||||
<td>Languages</td>
|
||||
<td>female</td>
|
||||
<td>68</td>
|
||||
<td>80</td>
|
||||
<td>95</td>
|
||||
<td>80</td>
|
||||
<td><button type="button" class="remove" title="Remove this row">X</button></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Student06</td>
|
||||
<td>Mathematics</td>
|
||||
<td>male</td>
|
||||
<td>100</td>
|
||||
<td>99</td>
|
||||
<td>100</td>
|
||||
<td>90</td>
|
||||
<td><button type="button" class="remove" title="Remove this row">X</button></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Student07</td>
|
||||
<td>Mathematics</td>
|
||||
<td>male</td>
|
||||
<td>85</td>
|
||||
<td>68</td>
|
||||
<td>90</td>
|
||||
<td>90</td>
|
||||
<td><button type="button" class="remove" title="Remove this row">X</button></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Student08</td>
|
||||
<td>Languages</td>
|
||||
<td>male</td>
|
||||
<td>100</td>
|
||||
<td>90</td>
|
||||
<td>90</td>
|
||||
<td>85</td>
|
||||
<td><button type="button" class="remove" title="Remove this row">X</button></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Student09</td>
|
||||
<td>Mathematics</td>
|
||||
<td>male</td>
|
||||
<td>80</td>
|
||||
<td>50</td>
|
||||
<td>65</td>
|
||||
<td>75</td>
|
||||
<td><button type="button" class="remove" title="Remove this row">X</button></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Student10</td>
|
||||
<td>Languages</td>
|
||||
<td>male</td>
|
||||
<td>85</td>
|
||||
<td>100</td>
|
||||
<td>100</td>
|
||||
<td>90</td>
|
||||
<td><button type="button" class="remove" title="Remove this row">X</button></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Student11</td>
|
||||
<td>Languages</td>
|
||||
<td>male</td>
|
||||
<td>86</td>
|
||||
<td>85</td>
|
||||
<td>100</td>
|
||||
<td>100</td>
|
||||
<td><button type="button" class="remove" title="Remove this row">X</button></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Student12</td>
|
||||
<td>Mathematics</td>
|
||||
<td>female</td>
|
||||
<td>100</td>
|
||||
<td>75</td>
|
||||
<td>70</td>
|
||||
<td>85</td>
|
||||
<td><button type="button" class="remove" title="Remove this row">X</button></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Student13</td>
|
||||
<td>Languages</td>
|
||||
<td>female</td>
|
||||
<td>100</td>
|
||||
<td>80</td>
|
||||
<td>100</td>
|
||||
<td>90</td>
|
||||
<td><button type="button" class="remove" title="Remove this row">X</button></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Student14</td>
|
||||
<td>Languages</td>
|
||||
<td>female</td>
|
||||
<td>50</td>
|
||||
<td>45</td>
|
||||
<td>55</td>
|
||||
<td>90</td>
|
||||
<td><button type="button" class="remove" title="Remove this row">X</button></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Student15</td>
|
||||
<td>Languages</td>
|
||||
<td>male</td>
|
||||
<td>95</td>
|
||||
<td>35</td>
|
||||
<td>100</td>
|
||||
<td>90</td>
|
||||
<td><button type="button" class="remove" title="Remove this row">X</button></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Student16</td>
|
||||
<td>Languages</td>
|
||||
<td>female</td>
|
||||
<td>100</td>
|
||||
<td>50</td>
|
||||
<td>30</td>
|
||||
<td>70</td>
|
||||
<td><button type="button" class="remove" title="Remove this row">X</button></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Student17</td>
|
||||
<td>Languages</td>
|
||||
<td>female</td>
|
||||
<td>80</td>
|
||||
<td>100</td>
|
||||
<td>55</td>
|
||||
<td>65</td>
|
||||
<td><button type="button" class="remove" title="Remove this row">X</button></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Student18</td>
|
||||
<td>Mathematics</td>
|
||||
<td>male</td>
|
||||
<td>30</td>
|
||||
<td>49</td>
|
||||
<td>55</td>
|
||||
<td>75</td>
|
||||
<td><button type="button" class="remove" title="Remove this row">X</button></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Student19</td>
|
||||
<td>Languages</td>
|
||||
<td>male</td>
|
||||
<td>68</td>
|
||||
<td>90</td>
|
||||
<td>88</td>
|
||||
<td>70</td>
|
||||
<td><button type="button" class="remove" title="Remove this row">X</button></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Student20</td>
|
||||
<td>Mathematics</td>
|
||||
<td>male</td>
|
||||
<td>40</td>
|
||||
<td>45</td>
|
||||
<td>40</td>
|
||||
<td>80</td>
|
||||
<td><button type="button" class="remove" title="Remove this row">X</button></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Student21</td>
|
||||
<td>Languages</td>
|
||||
<td>male</td>
|
||||
<td>50</td>
|
||||
<td>45</td>
|
||||
<td>100</td>
|
||||
<td>100</td>
|
||||
<td><button type="button" class="remove" title="Remove this row">X</button></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Student22</td>
|
||||
<td>Mathematics</td>
|
||||
<td>male</td>
|
||||
<td>100</td>
|
||||
<td>99</td>
|
||||
<td>100</td>
|
||||
<td>90</td>
|
||||
<td><button type="button" class="remove" title="Remove this row">X</button></td>
|
||||
</tr>
|
||||
<tr><td>Student23</td><td>Mathematics</td><td>male</td><td>82</td><td>77</td><td>0</td><td>79</td><td><button type="button" class="remove" title="Remove this row">X</button></td></tr>
|
||||
<tr><td>Student24</td><td>Languages</td><td>female</td><td>100</td><td>91</td><td>13</td><td>82</td><td><button type="button" class="remove" title="Remove this row">X</button></td></tr>
|
||||
<tr><td>Student25</td><td>Mathematics</td><td>male</td><td>22</td><td>96</td><td>82</td><td>53</td><td><button type="button" class="remove" title="Remove this row">X</button></td></tr>
|
||||
<tr><td>Student26</td><td>Languages</td><td>female</td><td>37</td><td>29</td><td>56</td><td>59</td><td><button type="button" class="remove" title="Remove this row">X</button></td></tr>
|
||||
<tr><td>Student27</td><td>Mathematics</td><td>male</td><td>86</td><td>82</td><td>69</td><td>23</td><td><button type="button" class="remove" title="Remove this row">X</button></td></tr>
|
||||
<tr><td>Student28</td><td>Languages</td><td>female</td><td>44</td><td>25</td><td>43</td><td>1</td><td><button type="button" class="remove" title="Remove this row">X</button></td></tr>
|
||||
<tr><td>Student29</td><td>Mathematics</td><td>male</td><td>77</td><td>47</td><td>22</td><td>38</td><td><button type="button" class="remove" title="Remove this row">X</button></td></tr>
|
||||
<tr><td>Student30</td><td>Languages</td><td>female</td><td>19</td><td>35</td><td>23</td><td>10</td><td><button type="button" class="remove" title="Remove this row">X</button></td></tr>
|
||||
<tr><td>Student31</td><td>Mathematics</td><td>male</td><td>90</td><td>27</td><td>17</td><td>50</td><td><button type="button" class="remove" title="Remove this row">X</button></td></tr>
|
||||
<tr><td>Student32</td><td>Languages</td><td>female</td><td>60</td><td>75</td><td>33</td><td>38</td><td><button type="button" class="remove" title="Remove this row">X</button></td></tr>
|
||||
<tr><td>Student33</td><td>Mathematics</td><td>male</td><td>4</td><td>31</td><td>37</td><td>15</td><td><button type="button" class="remove" title="Remove this row">X</button></td></tr>
|
||||
<tr><td>Student34</td><td>Languages</td><td>female</td><td>77</td><td>97</td><td>81</td><td>44</td><td><button type="button" class="remove" title="Remove this row">X</button></td></tr>
|
||||
<tr><td>Student35</td><td>Mathematics</td><td>male</td><td>5</td><td>81</td><td>51</td><td>95</td><td><button type="button" class="remove" title="Remove this row">X</button></td></tr>
|
||||
<tr><td>Student36</td><td>Languages</td><td>female</td><td>70</td><td>61</td><td>70</td><td>94</td><td><button type="button" class="remove" title="Remove this row">X</button></td></tr>
|
||||
<tr><td>Student37</td><td>Mathematics</td><td>male</td><td>60</td><td>3</td><td>61</td><td>84</td><td><button type="button" class="remove" title="Remove this row">X</button></td></tr>
|
||||
<tr><td>Student38</td><td>Languages</td><td>female</td><td>63</td><td>39</td><td>0</td><td>11</td><td><button type="button" class="remove" title="Remove this row">X</button></td></tr>
|
||||
<tr><td>Student39</td><td>Mathematics</td><td>male</td><td>50</td><td>46</td><td>32</td><td>38</td><td><button type="button" class="remove" title="Remove this row">X</button></td></tr>
|
||||
<tr><td>Student40</td><td>Languages</td><td>female</td><td>51</td><td>75</td><td>25</td><td>3</td><td><button type="button" class="remove" title="Remove this row">X</button></td></tr>
|
||||
<tr><td>Student41</td><td>Mathematics</td><td>male</td><td>43</td><td>34</td><td>28</td><td>78</td><td><button type="button" class="remove" title="Remove this row">X</button></td></tr>
|
||||
<tr><td>Student42</td><td>Languages</td><td>female</td><td>11</td><td>89</td><td>60</td><td>95</td><td><button type="button" class="remove" title="Remove this row">X</button></td></tr>
|
||||
<tr><td>Student43</td><td>Mathematics</td><td>male</td><td>48</td><td>92</td><td>18</td><td>88</td><td><button type="button" class="remove" title="Remove this row">X</button></td></tr>
|
||||
<tr><td>Student44</td><td>Languages</td><td>female</td><td>82</td><td>2</td><td>59</td><td>73</td><td><button type="button" class="remove" title="Remove this row">X</button></td></tr>
|
||||
<tr><td>Student45</td><td>Mathematics</td><td>male</td><td>91</td><td>73</td><td>37</td><td>39</td><td><button type="button" class="remove" title="Remove this row">X</button></td></tr>
|
||||
<tr><td>Student46</td><td>Languages</td><td>female</td><td>4</td><td>8</td><td>12</td><td>10</td><td><button type="button" class="remove" title="Remove this row">X</button></td></tr>
|
||||
<tr><td>Student47</td><td>Mathematics</td><td>male</td><td>89</td><td>10</td><td>6</td><td>11</td><td><button type="button" class="remove" title="Remove this row">X</button></td></tr>
|
||||
<tr><td>Student48</td><td>Languages</td><td>female</td><td>90</td><td>32</td><td>21</td><td>18</td><td><button type="button" class="remove" title="Remove this row">X</button></td></tr>
|
||||
<tr><td>Student49</td><td>Mathematics</td><td>male</td><td>42</td><td>49</td><td>49</td><td>72</td><td><button type="button" class="remove" title="Remove this row">X</button></td></tr>
|
||||
<tr><td>Student50</td><td>Languages</td><td>female</td><td>56</td><td>37</td><td>67</td><td>54</td><td><button type="button" class="remove" title="Remove this row">X</button></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<div class="pager">
|
||||
Page: <select class="gotoPage"></select> <img src="../addons/pager/icons/first.png" class="first" alt="First" title="First page" />
|
||||
<img src="../addons/pager/icons/prev.png" class="prev" alt="Prev" title="Previous page" />
|
||||
<span class="pagedisplay"></span> <!-- this can be any element, including an input -->
|
||||
<img src="../addons/pager/icons/next.png" class="next" alt="Next" title="Next page" />
|
||||
<img src="../addons/pager/icons/last.png" class="last" alt="Last" title= "Last page" />
|
||||
<select class="pagesize">
|
||||
<option selected="selected" value="10">10</option>
|
||||
<option value="20">20</option>
|
||||
<option value="30">30</option>
|
||||
<option value="40">40</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<h1>Javascript</h1>
|
||||
<div id="javascript">
|
||||
<pre class="prettyprint lang-javascript"></pre>
|
||||
</div>
|
||||
|
||||
<div class="next-up">
|
||||
<hr />
|
||||
Next up: <a href="example-empty-table.html">Initializing tablesorter on a empty table ››</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
614
assets/vendor/tablesorter/docs/example-pager.html
vendored
Normal file
614
assets/vendor/tablesorter/docs/example-pager.html
vendored
Normal file
@@ -0,0 +1,614 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery plugin: Tablesorter 2.0 - Pager plugin</title>
|
||||
|
||||
<!-- jQuery -->
|
||||
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
|
||||
|
||||
<!-- Demo stuff -->
|
||||
<link rel="stylesheet" href="css/jq.css">
|
||||
<link href="css/prettify.css" rel="stylesheet">
|
||||
<script src="js/prettify.js"></script>
|
||||
<script src="js/docs.js"></script>
|
||||
|
||||
<!-- Tablesorter: required -->
|
||||
<link rel="stylesheet" href="../css/theme.blue.css">
|
||||
<script src="../js/jquery.tablesorter.js"></script>
|
||||
<script src="../js/jquery.tablesorter.widgets.js"></script>
|
||||
|
||||
<!-- Tablesorter: optional -->
|
||||
<link rel="stylesheet" href="../addons/pager/jquery.tablesorter.pager.css">
|
||||
<script src="../addons/pager/jquery.tablesorter.pager.js"></script>
|
||||
|
||||
<script id="js">$(function(){
|
||||
|
||||
// **********************************
|
||||
// Description of ALL pager options
|
||||
// **********************************
|
||||
var pagerOptions = {
|
||||
|
||||
// target the pager markup - see the HTML block below
|
||||
container: $(".pager"),
|
||||
|
||||
// use this url format "http:/mydatabase.com?page={page}&size={size}&{sortList:col}"
|
||||
ajaxUrl: null,
|
||||
|
||||
// modify the url after all processing has been applied
|
||||
customAjaxUrl: function(table, url) { return url; },
|
||||
|
||||
// process ajax so that the data object is returned along with the total number of rows
|
||||
// example: { "data" : [{ "ID": 1, "Name": "Foo", "Last": "Bar" }], "total_rows" : 100 }
|
||||
ajaxProcessing: function(ajax){
|
||||
if (ajax && ajax.hasOwnProperty('data')) {
|
||||
// return [ "data", "total_rows" ];
|
||||
return [ ajax.total_rows, ajax.data ];
|
||||
}
|
||||
},
|
||||
|
||||
// output string - default is '{page}/{totalPages}'
|
||||
// possible variables: {page}, {totalPages}, {filteredPages}, {startRow}, {endRow}, {filteredRows} and {totalRows}
|
||||
output: '{startRow} to {endRow} ({totalRows})',
|
||||
|
||||
// apply disabled classname to the pager arrows when the rows at either extreme is visible - default is true
|
||||
updateArrows: true,
|
||||
|
||||
// starting page of the pager (zero based index)
|
||||
page: 0,
|
||||
|
||||
// Number of visible rows - default is 10
|
||||
size: 10,
|
||||
|
||||
// Save pager page & size if the storage script is loaded (requires $.tablesorter.storage in jquery.tablesorter.widgets.js)
|
||||
savePages : true,
|
||||
|
||||
//defines custom storage key
|
||||
storageKey:'tablesorter-pager',
|
||||
|
||||
// if true, the table will remain the same height no matter how many records are displayed. The space is made up by an empty
|
||||
// table row set to a height to compensate; default is false
|
||||
fixedHeight: true,
|
||||
|
||||
// remove rows from the table to speed up the sort of large tables.
|
||||
// setting this to false, only hides the non-visible rows; needed if you plan to add/remove rows with the pager enabled.
|
||||
removeRows: false,
|
||||
|
||||
// css class names of pager arrows
|
||||
cssNext: '.next', // next page arrow
|
||||
cssPrev: '.prev', // previous page arrow
|
||||
cssFirst: '.first', // go to first page arrow
|
||||
cssLast: '.last', // go to last page arrow
|
||||
cssGoto: '.gotoPage', // select dropdown to allow choosing a page
|
||||
|
||||
cssPageDisplay: '.pagedisplay', // location of where the "output" is displayed
|
||||
cssPageSize: '.pagesize', // page size selector - select dropdown that sets the "size" option
|
||||
|
||||
// class added to arrows when at the extremes (i.e. prev/first arrows are "disabled" when on the first page)
|
||||
cssDisabled: 'disabled', // Note there is no period "." in front of this class name
|
||||
cssErrorRow: 'tablesorter-errorRow' // ajax error information row
|
||||
|
||||
};
|
||||
|
||||
$("table")
|
||||
|
||||
// Initialize tablesorter
|
||||
// ***********************
|
||||
.tablesorter({
|
||||
theme: 'blue',
|
||||
widthFixed: true,
|
||||
widgets: ['zebra']
|
||||
})
|
||||
|
||||
// bind to pager events
|
||||
// *********************
|
||||
.bind('pagerChange pagerComplete pagerInitialized pageMoved', function(e, c){
|
||||
var msg = '"</span> event triggered, ' + (e.type === 'pagerChange' ? 'going to' : 'now on') +
|
||||
' page <span class="typ">' + (c.page + 1) + '/' + c.totalPages + '</span>';
|
||||
$('#display')
|
||||
.append('<li><span class="str">"' + e.type + msg + '</li>')
|
||||
.find('li:first').remove();
|
||||
})
|
||||
|
||||
// initialize the pager plugin
|
||||
// ****************************
|
||||
.tablesorterPager(pagerOptions);
|
||||
|
||||
// Add two new rows using the "addRows" method
|
||||
// the "update" method doesn't work here because not all rows are
|
||||
// present in the table when the pager is applied ("removeRows" is false)
|
||||
// ***********************************************************************
|
||||
var r, $row, num = 50,
|
||||
row = '<tr><td>Student{i}</td><td>{m}</td><td>{g}</td><td>{r}</td><td>{r}</td><td>{r}</td><td>{r}</td><td><button type="button" class="remove" title="Remove this row">X</button></td></tr>' +
|
||||
'<tr><td>Student{j}</td><td>{m}</td><td>{g}</td><td>{r}</td><td>{r}</td><td>{r}</td><td>{r}</td><td><button type="button" class="remove" title="Remove this row">X</button></td></tr>';
|
||||
$('button:contains(Add)').click(function(){
|
||||
// add two rows of random data!
|
||||
r = row.replace(/\{[gijmr]\}/g, function(m){
|
||||
return {
|
||||
'{i}' : num + 1,
|
||||
'{j}' : num + 2,
|
||||
'{r}' : Math.round(Math.random() * 100),
|
||||
'{g}' : Math.random() > 0.5 ? 'male' : 'female',
|
||||
'{m}' : Math.random() > 0.5 ? 'Mathematics' : 'Languages'
|
||||
}[m];
|
||||
});
|
||||
num = num + 2;
|
||||
$row = $(r);
|
||||
$('table')
|
||||
.find('tbody').append($row)
|
||||
.trigger('addRows', [$row]);
|
||||
return false;
|
||||
});
|
||||
|
||||
// Delete a row
|
||||
// *************
|
||||
$('table').delegate('button.remove', 'click' ,function(){
|
||||
var t = $('table');
|
||||
// disabling the pager will restore all table rows
|
||||
// t.trigger('disable.pager');
|
||||
// remove chosen row
|
||||
$(this).closest('tr').remove();
|
||||
// restore pager
|
||||
// t.trigger('enable.pager');
|
||||
t.trigger('update');
|
||||
return false;
|
||||
});
|
||||
|
||||
// Destroy pager / Restore pager
|
||||
// **************
|
||||
$('button:contains(Destroy)').click(function(){
|
||||
// Exterminate, annhilate, destroy! http://www.youtube.com/watch?v=LOqn8FxuyFs
|
||||
var $t = $(this);
|
||||
if (/Destroy/.test( $t.text() )){
|
||||
$('table').trigger('destroy.pager');
|
||||
$t.text('Restore Pager');
|
||||
} else {
|
||||
$('table').tablesorterPager(pagerOptions);
|
||||
$t.text('Destroy Pager');
|
||||
}
|
||||
return false;
|
||||
});
|
||||
|
||||
// Disable / Enable
|
||||
// **************
|
||||
$('.toggle').click(function(){
|
||||
var mode = /Disable/.test( $(this).text() );
|
||||
$('table').trigger( (mode ? 'disable' : 'enable') + '.pager');
|
||||
$(this).text( (mode ? 'Enable' : 'Disable') + 'Pager');
|
||||
return false;
|
||||
});
|
||||
$('table').bind('pagerChange', function(){
|
||||
// pager automatically enables when table is sorted.
|
||||
$('.toggle').text('Disable Pager');
|
||||
});
|
||||
|
||||
});</script>
|
||||
</head>
|
||||
<body id="pager-demo">
|
||||
<div id="banner">
|
||||
<h1>table<em>sorter</em></h1>
|
||||
<h2>Pager plugin</h2>
|
||||
<h3>Flexible client-side table sorting</h3>
|
||||
<a href="index.html">Back to documentation</a>
|
||||
</div>
|
||||
|
||||
<div id="main">
|
||||
|
||||
<p class="tip">
|
||||
<em>NOTE!</em> The following are not part of the original plugin:
|
||||
<ul>
|
||||
<li>This pager plugin can be applied to the original tablesorter, but there is one exception - setting the <code>removeRows</code> option to false will break the sort.</li>
|
||||
<li>There have been lots of changes made in version 2.1, please check out the <a href="https://github.com/Mottie/tablesorter/wiki/Change2">change log</a>.</li>
|
||||
<li>In <span class="version">v2.11</span>, the <code>savePages</code> option was added to saves the current page size and number (requires storage script).</li>
|
||||
</ul>
|
||||
</p>
|
||||
|
||||
<h1>Triggered Events</h1>
|
||||
<ul id="display">
|
||||
<li>Pager events will appear here.</li>
|
||||
<li> </li>
|
||||
<li> </li>
|
||||
</ul>
|
||||
|
||||
<h1>Demo</h1>
|
||||
<br>
|
||||
<button type="button">Add Rows</button> <button type="button" class="toggle">Disable Pager</button> <button type="button">Destroy Pager</button>
|
||||
<br><br>
|
||||
<div class="pager">
|
||||
<img src="../addons/pager/icons/first.png" class="first" alt="First" />
|
||||
<img src="../addons/pager/icons/prev.png" class="prev" alt="Prev" />
|
||||
<span class="pagedisplay"></span> <!-- this can be any element, including an input -->
|
||||
<img src="../addons/pager/icons/next.png" class="next" alt="Next" />
|
||||
<img src="../addons/pager/icons/last.png" class="last" alt="Last" />
|
||||
<select class="pagesize" title="Select page size">
|
||||
<option value="10">10</option>
|
||||
<option value="20">20</option>
|
||||
<option value="30">30</option>
|
||||
<option value="40">40</option>
|
||||
</select>
|
||||
<select class="gotoPage" title="Select page number"></select>
|
||||
</div>
|
||||
|
||||
<table class="tablesorter">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Major</th>
|
||||
<th>Sex</th>
|
||||
<th>English</th>
|
||||
<th>Japanese</th>
|
||||
<th>Calculus</th>
|
||||
<th>Geometry</th>
|
||||
<th class="remove sorter-false"></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Major</th>
|
||||
<th>Sex</th>
|
||||
<th>English</th>
|
||||
<th>Japanese</th>
|
||||
<th>Calculus</th>
|
||||
<th>Geometry</th>
|
||||
<th></th>
|
||||
</tr>
|
||||
</tfoot>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Student01</td>
|
||||
<td>Languages</td>
|
||||
<td>male</td>
|
||||
<td>80</td>
|
||||
<td>70</td>
|
||||
<td>75</td>
|
||||
<td>80</td>
|
||||
<td><button type="button" class="remove" title="Remove this row">X</button></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Student02</td>
|
||||
<td>Mathematics</td>
|
||||
<td>male</td>
|
||||
<td>90</td>
|
||||
<td>88</td>
|
||||
<td>100</td>
|
||||
<td>90</td>
|
||||
<td><button type="button" class="remove" title="Remove this row">X</button></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Student03</td>
|
||||
<td>Languages</td>
|
||||
<td>female</td>
|
||||
<td>85</td>
|
||||
<td>95</td>
|
||||
<td>80</td>
|
||||
<td>85</td>
|
||||
<td><button type="button" class="remove" title="Remove this row">X</button></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Student04</td>
|
||||
<td>Languages</td>
|
||||
<td>male</td>
|
||||
<td>60</td>
|
||||
<td>55</td>
|
||||
<td>100</td>
|
||||
<td>100</td>
|
||||
<td><button type="button" class="remove" title="Remove this row">X</button></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Student05</td>
|
||||
<td>Languages</td>
|
||||
<td>female</td>
|
||||
<td>68</td>
|
||||
<td>80</td>
|
||||
<td>95</td>
|
||||
<td>80</td>
|
||||
<td><button type="button" class="remove" title="Remove this row">X</button></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Student06</td>
|
||||
<td>Mathematics</td>
|
||||
<td>male</td>
|
||||
<td>100</td>
|
||||
<td>99</td>
|
||||
<td>100</td>
|
||||
<td>90</td>
|
||||
<td><button type="button" class="remove" title="Remove this row">X</button></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Student07</td>
|
||||
<td>Mathematics</td>
|
||||
<td>male</td>
|
||||
<td>85</td>
|
||||
<td>68</td>
|
||||
<td>90</td>
|
||||
<td>90</td>
|
||||
<td><button type="button" class="remove" title="Remove this row">X</button></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Student08</td>
|
||||
<td>Languages</td>
|
||||
<td>male</td>
|
||||
<td>100</td>
|
||||
<td>90</td>
|
||||
<td>90</td>
|
||||
<td>85</td>
|
||||
<td><button type="button" class="remove" title="Remove this row">X</button></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Student09</td>
|
||||
<td>Mathematics</td>
|
||||
<td>male</td>
|
||||
<td>80</td>
|
||||
<td>50</td>
|
||||
<td>65</td>
|
||||
<td>75</td>
|
||||
<td><button type="button" class="remove" title="Remove this row">X</button></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Student10</td>
|
||||
<td>Languages</td>
|
||||
<td>male</td>
|
||||
<td>85</td>
|
||||
<td>100</td>
|
||||
<td>100</td>
|
||||
<td>90</td>
|
||||
<td><button type="button" class="remove" title="Remove this row">X</button></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Student11</td>
|
||||
<td>Languages</td>
|
||||
<td>male</td>
|
||||
<td>86</td>
|
||||
<td>85</td>
|
||||
<td>100</td>
|
||||
<td>100</td>
|
||||
<td><button type="button" class="remove" title="Remove this row">X</button></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Student12</td>
|
||||
<td>Mathematics</td>
|
||||
<td>female</td>
|
||||
<td>100</td>
|
||||
<td>75</td>
|
||||
<td>70</td>
|
||||
<td>85</td>
|
||||
<td><button type="button" class="remove" title="Remove this row">X</button></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Student13</td>
|
||||
<td>Languages</td>
|
||||
<td>female</td>
|
||||
<td>100</td>
|
||||
<td>80</td>
|
||||
<td>100</td>
|
||||
<td>90</td>
|
||||
<td><button type="button" class="remove" title="Remove this row">X</button></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Student14</td>
|
||||
<td>Languages</td>
|
||||
<td>female</td>
|
||||
<td>50</td>
|
||||
<td>45</td>
|
||||
<td>55</td>
|
||||
<td>90</td>
|
||||
<td><button type="button" class="remove" title="Remove this row">X</button></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Student15</td>
|
||||
<td>Languages</td>
|
||||
<td>male</td>
|
||||
<td>95</td>
|
||||
<td>35</td>
|
||||
<td>100</td>
|
||||
<td>90</td>
|
||||
<td><button type="button" class="remove" title="Remove this row">X</button></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Student16</td>
|
||||
<td>Languages</td>
|
||||
<td>female</td>
|
||||
<td>100</td>
|
||||
<td>50</td>
|
||||
<td>30</td>
|
||||
<td>70</td>
|
||||
<td><button type="button" class="remove" title="Remove this row">X</button></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Student17</td>
|
||||
<td>Languages</td>
|
||||
<td>female</td>
|
||||
<td>80</td>
|
||||
<td>100</td>
|
||||
<td>55</td>
|
||||
<td>65</td>
|
||||
<td><button type="button" class="remove" title="Remove this row">X</button></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Student18</td>
|
||||
<td>Mathematics</td>
|
||||
<td>male</td>
|
||||
<td>30</td>
|
||||
<td>49</td>
|
||||
<td>55</td>
|
||||
<td>75</td>
|
||||
<td><button type="button" class="remove" title="Remove this row">X</button></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Student19</td>
|
||||
<td>Languages</td>
|
||||
<td>male</td>
|
||||
<td>68</td>
|
||||
<td>90</td>
|
||||
<td>88</td>
|
||||
<td>70</td>
|
||||
<td><button type="button" class="remove" title="Remove this row">X</button></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Student20</td>
|
||||
<td>Mathematics</td>
|
||||
<td>male</td>
|
||||
<td>40</td>
|
||||
<td>45</td>
|
||||
<td>40</td>
|
||||
<td>80</td>
|
||||
<td><button type="button" class="remove" title="Remove this row">X</button></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Student21</td>
|
||||
<td>Languages</td>
|
||||
<td>male</td>
|
||||
<td>50</td>
|
||||
<td>45</td>
|
||||
<td>100</td>
|
||||
<td>100</td>
|
||||
<td><button type="button" class="remove" title="Remove this row">X</button></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Student22</td>
|
||||
<td>Mathematics</td>
|
||||
<td>male</td>
|
||||
<td>100</td>
|
||||
<td>99</td>
|
||||
<td>100</td>
|
||||
<td>90</td>
|
||||
<td><button type="button" class="remove" title="Remove this row">X</button></td>
|
||||
</tr>
|
||||
<tr><td>Student23</td><td>Mathematics</td><td>male</td><td>82</td><td>77</td><td>0</td><td>79</td><td><button type="button" class="remove" title="Remove this row">X</button></td></tr>
|
||||
<tr><td>Student24</td><td>Languages</td><td>female</td><td>100</td><td>91</td><td>13</td><td>82</td><td><button type="button" class="remove" title="Remove this row">X</button></td></tr>
|
||||
<tr><td>Student25</td><td>Mathematics</td><td>male</td><td>22</td><td>96</td><td>82</td><td>53</td><td><button type="button" class="remove" title="Remove this row">X</button></td></tr>
|
||||
<tr><td>Student26</td><td>Languages</td><td>female</td><td>37</td><td>29</td><td>56</td><td>59</td><td><button type="button" class="remove" title="Remove this row">X</button></td></tr>
|
||||
<tr><td>Student27</td><td>Mathematics</td><td>male</td><td>86</td><td>82</td><td>69</td><td>23</td><td><button type="button" class="remove" title="Remove this row">X</button></td></tr>
|
||||
<tr><td>Student28</td><td>Languages</td><td>female</td><td>44</td><td>25</td><td>43</td><td>1</td><td><button type="button" class="remove" title="Remove this row">X</button></td></tr>
|
||||
<tr><td>Student29</td><td>Mathematics</td><td>male</td><td>77</td><td>47</td><td>22</td><td>38</td><td><button type="button" class="remove" title="Remove this row">X</button></td></tr>
|
||||
<tr><td>Student30</td><td>Languages</td><td>female</td><td>19</td><td>35</td><td>23</td><td>10</td><td><button type="button" class="remove" title="Remove this row">X</button></td></tr>
|
||||
<tr><td>Student31</td><td>Mathematics</td><td>male</td><td>90</td><td>27</td><td>17</td><td>50</td><td><button type="button" class="remove" title="Remove this row">X</button></td></tr>
|
||||
<tr><td>Student32</td><td>Languages</td><td>female</td><td>60</td><td>75</td><td>33</td><td>38</td><td><button type="button" class="remove" title="Remove this row">X</button></td></tr>
|
||||
<tr><td>Student33</td><td>Mathematics</td><td>male</td><td>4</td><td>31</td><td>37</td><td>15</td><td><button type="button" class="remove" title="Remove this row">X</button></td></tr>
|
||||
<tr><td>Student34</td><td>Languages</td><td>female</td><td>77</td><td>97</td><td>81</td><td>44</td><td><button type="button" class="remove" title="Remove this row">X</button></td></tr>
|
||||
<tr><td>Student35</td><td>Mathematics</td><td>male</td><td>5</td><td>81</td><td>51</td><td>95</td><td><button type="button" class="remove" title="Remove this row">X</button></td></tr>
|
||||
<tr><td>Student36</td><td>Languages</td><td>female</td><td>70</td><td>61</td><td>70</td><td>94</td><td><button type="button" class="remove" title="Remove this row">X</button></td></tr>
|
||||
<tr><td>Student37</td><td>Mathematics</td><td>male</td><td>60</td><td>3</td><td>61</td><td>84</td><td><button type="button" class="remove" title="Remove this row">X</button></td></tr>
|
||||
<tr><td>Student38</td><td>Languages</td><td>female</td><td>63</td><td>39</td><td>0</td><td>11</td><td><button type="button" class="remove" title="Remove this row">X</button></td></tr>
|
||||
<tr><td>Student39</td><td>Mathematics</td><td>male</td><td>50</td><td>46</td><td>32</td><td>38</td><td><button type="button" class="remove" title="Remove this row">X</button></td></tr>
|
||||
<tr><td>Student40</td><td>Languages</td><td>female</td><td>51</td><td>75</td><td>25</td><td>3</td><td><button type="button" class="remove" title="Remove this row">X</button></td></tr>
|
||||
<tr><td>Student41</td><td>Mathematics</td><td>male</td><td>43</td><td>34</td><td>28</td><td>78</td><td><button type="button" class="remove" title="Remove this row">X</button></td></tr>
|
||||
<tr><td>Student42</td><td>Languages</td><td>female</td><td>11</td><td>89</td><td>60</td><td>95</td><td><button type="button" class="remove" title="Remove this row">X</button></td></tr>
|
||||
<tr><td>Student43</td><td>Mathematics</td><td>male</td><td>48</td><td>92</td><td>18</td><td>88</td><td><button type="button" class="remove" title="Remove this row">X</button></td></tr>
|
||||
<tr><td>Student44</td><td>Languages</td><td>female</td><td>82</td><td>2</td><td>59</td><td>73</td><td><button type="button" class="remove" title="Remove this row">X</button></td></tr>
|
||||
<tr><td>Student45</td><td>Mathematics</td><td>male</td><td>91</td><td>73</td><td>37</td><td>39</td><td><button type="button" class="remove" title="Remove this row">X</button></td></tr>
|
||||
<tr><td>Student46</td><td>Languages</td><td>female</td><td>4</td><td>8</td><td>12</td><td>10</td><td><button type="button" class="remove" title="Remove this row">X</button></td></tr>
|
||||
<tr><td>Student47</td><td>Mathematics</td><td>male</td><td>89</td><td>10</td><td>6</td><td>11</td><td><button type="button" class="remove" title="Remove this row">X</button></td></tr>
|
||||
<tr><td>Student48</td><td>Languages</td><td>female</td><td>90</td><td>32</td><td>21</td><td>18</td><td><button type="button" class="remove" title="Remove this row">X</button></td></tr>
|
||||
<tr><td>Student49</td><td>Mathematics</td><td>male</td><td>42</td><td>49</td><td>49</td><td>72</td><td><button type="button" class="remove" title="Remove this row">X</button></td></tr>
|
||||
<tr><td>Student50</td><td>Languages</td><td>female</td><td>56</td><td>37</td><td>67</td><td>54</td><td><button type="button" class="remove" title="Remove this row">X</button></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<div class="pager">
|
||||
<img src="../addons/pager/icons/first.png" class="first" alt="First" />
|
||||
<img src="../addons/pager/icons/prev.png" class="prev" alt="Prev" />
|
||||
<span class="pagedisplay"></span> <!-- this can be any element, including an input -->
|
||||
<img src="../addons/pager/icons/next.png" class="next" alt="Next" />
|
||||
<img src="../addons/pager/icons/last.png" class="last" alt="Last" />
|
||||
<select class="pagesize" title="Select page size">
|
||||
<option value="10">10</option>
|
||||
<option value="20">20</option>
|
||||
<option value="30">30</option>
|
||||
<option value="40">40</option>
|
||||
</select>
|
||||
<select class="gotoPage" title="Select page number"></select>
|
||||
</div>
|
||||
|
||||
<h1>Javascript</h1>
|
||||
<div id="javascript">
|
||||
<pre class="prettyprint lang-javascript"></pre>
|
||||
</div>
|
||||
|
||||
<h1>CSS</h1>
|
||||
<div>
|
||||
<pre class="prettyprint lang-css">/* pager wrapper, div */
|
||||
.tablesorter-pager {
|
||||
padding: 5px;
|
||||
}
|
||||
/* pager wrapper, in thead/tfoot */
|
||||
td.tablesorter-pager {
|
||||
background-color: #e6eeee;
|
||||
margin: 0; /* needed for bootstrap .pager gets a 18px bottom margin */
|
||||
}
|
||||
/* pager navigation arrows */
|
||||
.tablesorter-pager img {
|
||||
vertical-align: middle;
|
||||
margin-right: 2px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* pager output text */
|
||||
.tablesorter-pager .pagedisplay {
|
||||
padding: 0 5px 0 5px;
|
||||
width: 50px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* pager element reset (needed for bootstrap) */
|
||||
.tablesorter-pager select {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/*** css used when "updateArrows" option is true ***/
|
||||
/* the pager itself gets a disabled class when the number of rows is less than the size */
|
||||
.tablesorter-pager.disabled {
|
||||
display: none;
|
||||
}
|
||||
/* hide or fade out pager arrows when the first or last row is visible */
|
||||
.tablesorter-pager .disabled {
|
||||
/* visibility: hidden */
|
||||
opacity: 0.5;
|
||||
filter: alpha(opacity=50);
|
||||
cursor: default;
|
||||
}</pre>
|
||||
</div>
|
||||
|
||||
<h1>HTML</h1>
|
||||
<div id="html">
|
||||
<pre class="prettyprint lang-html"><table class="tablesorter">
|
||||
<!-- view page source to see the entire table -->
|
||||
</table>
|
||||
|
||||
<!-- pager -->
|
||||
<div id="pager" class="pager">
|
||||
<form>
|
||||
<img src="first.png" class="first"/>
|
||||
<img src="prev.png" class="prev"/>
|
||||
<span class="pagedisplay"></span> <!-- this can be any element, including an input -->
|
||||
<img src="next.png" class="next"/>
|
||||
<img src="last.png" class="last"/>
|
||||
<select class="pagesize">
|
||||
<option selected="selected" value="10">10</option>
|
||||
<option value="20">20</option>
|
||||
<option value="30">30</option>
|
||||
<option value="40">40</option>
|
||||
</select>
|
||||
</form>
|
||||
</div></pre>
|
||||
|
||||
</div>
|
||||
|
||||
<a id="change-log"></a>
|
||||
<h1>Pager Change Log</h1>
|
||||
<ul>
|
||||
<li>Moved to <a href="https://github.com/Mottie/tablesorter/wiki/Change2">wiki pages</a>.</li>
|
||||
</ul>
|
||||
|
||||
<div class="next-up">
|
||||
<hr />
|
||||
Next up: <a href="example-pager-ajax.html">Pager plugin - Ajax ››</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
154
assets/vendor/tablesorter/docs/example-parsers-advanced.html
vendored
Normal file
154
assets/vendor/tablesorter/docs/example-parsers-advanced.html
vendored
Normal file
@@ -0,0 +1,154 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery plugin: Tablesorter 2.0 - Writing custom parsers, advanced use</title>
|
||||
|
||||
<!-- jQuery -->
|
||||
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
|
||||
|
||||
<!-- Demo stuff -->
|
||||
<link rel="stylesheet" href="css/jq.css">
|
||||
<link href="css/prettify.css" rel="stylesheet">
|
||||
<script src="js/prettify.js"></script>
|
||||
<script src="js/docs.js"></script>
|
||||
|
||||
<!-- Tablesorter: required -->
|
||||
<link rel="stylesheet" href="../css/theme.blue.css">
|
||||
<script src="../js/jquery.tablesorter.js"></script>
|
||||
|
||||
<script id="js">// add parser through the tablesorter addParser method
|
||||
$(function(){
|
||||
|
||||
$.tablesorter.addParser({
|
||||
// set a unique id
|
||||
id: 'data',
|
||||
is: function(s) {
|
||||
// return false so this parser is not auto detected
|
||||
return false;
|
||||
},
|
||||
format: function(s, table, cell, cellIndex) {
|
||||
var $cell = $(cell);
|
||||
// I could have used $(cell).data(), then we get back an object which contains both
|
||||
// data-lastname & data-date; but I wanted to make this demo a bit more straight-forward
|
||||
// and easier to understand.
|
||||
|
||||
// first column (zero-based index) has lastname data attribute
|
||||
if (cellIndex === 0) {
|
||||
// returns lastname data-attribute, or cell text (s) if it doesn't exist
|
||||
return $cell.attr('data-lastname') || s;
|
||||
|
||||
// third column has date data attribute
|
||||
} else if (cellIndex === 2) {
|
||||
// return "mm-dd" that way we don't need to use "new Date()" to process it
|
||||
return $cell.attr('data-date') || s;
|
||||
}
|
||||
|
||||
// return cell text, just in case
|
||||
return s;
|
||||
},
|
||||
// flag for filter widget (true = ALWAYS search parsed values; false = search cell text)
|
||||
parsed: false,
|
||||
// set type, either numeric or text
|
||||
type: 'text'
|
||||
});
|
||||
|
||||
$('table').tablesorter({
|
||||
theme: 'blue',
|
||||
headers: {
|
||||
0 : { sorter: 'data' },
|
||||
2 : { sorter: 'data' }
|
||||
},
|
||||
widgets: ['zebra']
|
||||
});
|
||||
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="banner">
|
||||
<h1>table<em>sorter</em></h1>
|
||||
<h2>Writing custom parsers, advanced use</h2>
|
||||
<h3>Flexible client-side table sorting</h3>
|
||||
<a href="index.html">Back to documentation</a>
|
||||
</div>
|
||||
|
||||
<div id="main">
|
||||
|
||||
<p class="tip">
|
||||
<em>NOTE!</em>
|
||||
<ul>
|
||||
<li>In <span class="version">v2.15.0</span>, the <code>parsed</code> parameter
|
||||
<ul>
|
||||
<li>This parameter is a flag used by the filter widget.</li>
|
||||
<li>When <code>true</code>, the filter widget will only search through parsed data for matches.</li>
|
||||
<li>If <code>false</code> (default value), the filter widget will search through the cell text for matches.</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>This method of writing custom parsers will NOT work with the original tablesorter 2.0.5b plugin because the format function does not consistently provide the <code>cell</code> and <code>cellIndex</code> parameters.</li>
|
||||
</ul>
|
||||
</p>
|
||||
|
||||
<h1>Demo</h1>
|
||||
<div id="demo"><table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name (Last)</th>
|
||||
<th>Originally from...</th>
|
||||
<th>Birthday</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td data-lastname="Allen">Joe Allen</td>
|
||||
<td>South Carolina</td>
|
||||
<td data-date="01-15">Jan 15</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-lastname="Torres">Lisa Torres</td>
|
||||
<td>Maryland</td>
|
||||
<td data-date="03-02">March 2nd</td> <!-- leading zeros needed to sort properly! -->
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-lastname="Franklin">Peter Louis Franklin</td>
|
||||
<td>Coventry</td>
|
||||
<td data-date="12-26">Boxing Day (Dec 26th)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-lastname="Jones">Maria Consuela de Los Angeles Ortiz Del Toro-Jones</td>
|
||||
<td>Texas</td>
|
||||
<td data-date="05-10">10 Mayo</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-lastname="Bigglesworth">Mike "the Smasher" Bigglesworth</td>
|
||||
<td>Rhode Island</td>
|
||||
<td data-date="06-22">22nd of June</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-lastname="Smith">Fredrick Smith</td>
|
||||
<td>Ohio</td>
|
||||
<td data-date="03-10">10th Mar</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table></div>
|
||||
|
||||
<h1>Javascript</h1>
|
||||
<div id="javascript">
|
||||
<pre class="prettyprint lang-javascript"></pre>
|
||||
</div>
|
||||
<h1>HTML</h1>
|
||||
<div id="html">
|
||||
<pre class="prettyprint lang-html"></pre>
|
||||
</div>
|
||||
|
||||
<div class="next-up">
|
||||
<hr />
|
||||
Next up: <a href="example-option-text-extraction.html">Dealing with markup inside cells (textExtraction function) ››</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
131
assets/vendor/tablesorter/docs/example-parsers-class-name.html
vendored
Normal file
131
assets/vendor/tablesorter/docs/example-parsers-class-name.html
vendored
Normal file
@@ -0,0 +1,131 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery plugin: Tablesorter 2.0 - Disable or set the column parser using class names</title>
|
||||
|
||||
<!-- jQuery -->
|
||||
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
|
||||
|
||||
<!-- Demo stuff -->
|
||||
<link rel="stylesheet" href="css/jq.css">
|
||||
<link href="css/prettify.css" rel="stylesheet">
|
||||
<script src="js/prettify.js"></script>
|
||||
<script src="js/docs.js"></script>
|
||||
|
||||
<!-- Tablesorter: required -->
|
||||
<link rel="stylesheet" href="../css/theme.blue.css">
|
||||
<script src="../js/jquery.tablesorter.js"></script>
|
||||
|
||||
<script id="js">$(function(){
|
||||
$("table").tablesorter({ theme: 'blue' });
|
||||
});</script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="banner">
|
||||
<h1>table<em>sorter</em></h1>
|
||||
<h2>Disable or set the column parser using class names</h2>
|
||||
<h3>Flexible client-side table sorting</h3>
|
||||
<a href="index.html">Back to documentation</a>
|
||||
</div>
|
||||
<div id="main">
|
||||
|
||||
<p class="tip">
|
||||
<em>NOTE!</em>
|
||||
<ul>
|
||||
<li>In tablesorter version 2.0.5 and older, only the metadata and headers options methods were available to set the parsers.</li>
|
||||
<li>In versions 2.0.11+, parsers could be set using class names.</li>
|
||||
<li>Currently (versions 2.3+), parsers can be set using any of the following methods (they all do the same thing), in order of priority:
|
||||
<ul>
|
||||
<li>jQuery data <code>data-sorter="text"</code> (see the Javascript block below on how to set it directly).</li>
|
||||
<li>metadata <code>class="{ sorter: "text" }"</code>. This requires the metadata plugin.</li>
|
||||
<li>headers option <code>headers : { 0 : { sorter: "text" } }</code>.</li>
|
||||
<li>header class name <code>class="sorter-text"</code>.</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</p>
|
||||
|
||||
<h1>Demo</h1>
|
||||
<div id="demo"><table class="tablesorter">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="sorter-text">First Name</th>
|
||||
<th class="sorter-text">Last Name</th>
|
||||
<th class="sorter-false">Age</th>
|
||||
<th class="sorter-currency string-min">Total</th> <!-- class="string-min" treats strings in this numeric column as a large negative number -->
|
||||
<th class="sorter-percent empty-top">Discount</th> <!-- class="empty-top" sorts empty cells to the top -->
|
||||
<th class="sorter-usLongDate">Date</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Peter</td>
|
||||
<td>Parker</td>
|
||||
<td>28</td>
|
||||
<td>($9.99)</td>
|
||||
<td>20%</td>
|
||||
<td>Jul 6, 2006 8:14 AM</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>John</td>
|
||||
<td></td>
|
||||
<td>33</td>
|
||||
<td>$19.99</td>
|
||||
<td>25%</td>
|
||||
<td>Dec 10, 2002 5:14 AM</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Clark</td>
|
||||
<td>Kent</td>
|
||||
<td>18</td>
|
||||
<td></td>
|
||||
<td>44%</td>
|
||||
<td>Jan 12, 2003 11:14 AM</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Bruce</td>
|
||||
<td>Almighty</td>
|
||||
<td>45</td>
|
||||
<td>$153.19</td>
|
||||
<td>44%</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Bruce</td>
|
||||
<td>Evans</td>
|
||||
<td>22</td>
|
||||
<td>N/A</td>
|
||||
<td></td>
|
||||
<td>Jan 18, 2007 9:12 AM</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td>Evans</td>
|
||||
<td>18</td>
|
||||
<td>$13.19</td>
|
||||
<td>11%</td>
|
||||
<td>Jul 6, 2006 8:14 AM</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table></div>
|
||||
|
||||
<h1>Javascript</h1>
|
||||
<div id="javascript">
|
||||
<pre class="prettyprint lang-javascript"></pre>
|
||||
</div>
|
||||
<h1>HTML</h1>
|
||||
<div id="html">
|
||||
<pre class="prettyprint lang-html"></pre>
|
||||
</div>
|
||||
|
||||
<div class="next-up">
|
||||
<hr />
|
||||
Next up: <a href="example-parsers-jquery-data.html">Disable or set the column parser using jQuery data ››</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
175
assets/vendor/tablesorter/docs/example-parsers-dates.html
vendored
Normal file
175
assets/vendor/tablesorter/docs/example-parsers-dates.html
vendored
Normal file
@@ -0,0 +1,175 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery plugin: Tablesorter - Assorted date parsers</title>
|
||||
|
||||
<!-- jQuery -->
|
||||
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
|
||||
|
||||
<!-- Demo stuff -->
|
||||
<link rel="stylesheet" href="css/jq.css">
|
||||
<link href="css/prettify.css" rel="stylesheet">
|
||||
<script src="js/prettify.js"></script>
|
||||
<script src="js/docs.js"></script>
|
||||
<style>
|
||||
th { width: 20%; }
|
||||
</style>
|
||||
|
||||
<link href="../css/theme.blue.css" rel="stylesheet">
|
||||
<script src="../js/jquery.tablesorter.js"></script>
|
||||
|
||||
<!-- load month, weekday and two digit year parsers -->
|
||||
<script src="../js/parsers/parser-date-month.js"></script>
|
||||
<script src="../js/parsers/parser-date-weekday.js"></script>
|
||||
<script src="../js/parsers/parser-date-two-digit-year.js"></script>
|
||||
|
||||
<!-- http://sugarjs.com/dates#comparing_dates -->
|
||||
<script src="http://sugarjs.com/release/current/sugar.min.js"></script>
|
||||
<script src="../js/parsers/parser-date.js"></script>
|
||||
|
||||
<script id="js">$(function() {
|
||||
|
||||
// call the tablesorter plugin
|
||||
$("table").tablesorter({
|
||||
theme : 'blue',
|
||||
widgets : ["zebra"],
|
||||
// date range used by the two-digit year parser (added v2.14.0)
|
||||
dateRange : 30
|
||||
});
|
||||
|
||||
});</script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="banner">
|
||||
<h1>table<em>sorter</em></h1>
|
||||
<h2>Assorted date parsers</h2>
|
||||
<h3>Flexible client-side table sorting</h3>
|
||||
<a href="index.html">Back to documentation</a>
|
||||
</div>
|
||||
<div id="main">
|
||||
|
||||
<p class="tip">
|
||||
<em>NOTE!</em>
|
||||
<ul>
|
||||
<li>Parse Dates with these parsers
|
||||
<ul>
|
||||
<li>The "Date" column is using the <a href="http://sugarjs.com/dates#comparing_dates">sugar</a> library to parse dates. Make sure to include the sugar library and the sugar-date-parser.</li>
|
||||
<li>The "Weekday" column uses the included "weekday" parser. You can modify parser to match whatever language you are using.</li>
|
||||
<li>The "Month" column uses the included "month" parser. You can also modify the month names within the parser to match whatever language you are using.</li>
|
||||
<li>The "Year" column is just using the included two digit year parser:
|
||||
<ul>
|
||||
<li>Formats for "mmddyy", "ddmmyy" and "yymmdd" are available</li>
|
||||
<li>Within the parser code is a <code>range</code> variable which is set to <code>50</code> years range, which sets the date be within +/- range of the listed two digit year.</li>
|
||||
<li>So if the current year is <code>2020</code>, and the listed two digit year is <code>80</code> (<code>2080 - 2020 > 50</code>), it becomes <code>1980</code>.</li>
|
||||
<li>If the listed two digit year is <code>50</code> (<code>2050 - 2020 < 50</code>), then it becomes <code>2050</code>. I hope that makes it clearer.</li>
|
||||
<li>Try out the two digit year calculator below the table.</li>
|
||||
<li>In <span class="version">v2.14.0</span>, the range can be set using the <code>dateRange</code> option (see the initialization code below).</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>The "Time" column is using the built-in time parser which has been always been included with tablesorter .</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</p>
|
||||
|
||||
<h1>Demo</h1>
|
||||
<div id="demo"><table class="tablesorter">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="sorter-sugar">Date</th>
|
||||
<th class="sorter-weekday">Weekday</th>
|
||||
<th class="sorter-month">Month</th>
|
||||
<th class="sorter-mmddyy">MM/DD/YY</th> <!-- "sorter-ddmmyy" also available -->
|
||||
<th class="sorter-time">Time</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>next friday</td><td>Friday</td><td>Aug</td><td>1/1/12</td><td>12:00 PM</td></tr>
|
||||
<tr><td>today</td><td>Thurs</td><td>September</td><td>1/1/12</td><td>00:00</td></tr>
|
||||
<tr><td>last Tuesday</td><td>Fri</td><td>Mar</td><td>1/1/10</td><td>18:00</td></tr>
|
||||
<tr><td>the day after tomorrow</td><td>Wed</td><td>July</td><td>1/1/13</td><td>13:00</td></tr>
|
||||
<tr><td>2010-05-25T12:30:40.299+01:00</td><td>Monday</td><td>Jan</td><td>1/1/11</td><td>1:30 PM</td></tr>
|
||||
<tr><td>May 25th of next year</td><td>Tues</td><td>Nov</td><td>1/1/11</td><td>14:00</td></tr>
|
||||
<tr><td>25 May 2010</td><td>Tuesday</td><td>November</td><td>1/1/11</td><td>1:58 PM</td></tr>
|
||||
<tr><td>the last day of March</td><td>Mon</td><td>December</td><td>1/1/12</td><td>2:10 PM</td></tr>
|
||||
<tr><td>last month</td><td>Wednesday</td><td>April</td><td>1/1/14</td><td>13:50</td></tr>
|
||||
<tr><td>one day before yesterday</td><td>Thursday</td><td>Feb</td><td>1/1/08</td><td>4:00 AM</td></tr>
|
||||
</tbody>
|
||||
</table></div>
|
||||
|
||||
<h3>Two digit year calculator:</h3>
|
||||
<div>two digit year <input class="tdy" type="number" min="0" max="99" value="20"> becomes <span class="result">2020</span></div>
|
||||
<div class="params">
|
||||
( <label>range</label> <input class="range" type="number" value="50" min="0" max="99">
|
||||
<label>"current year"</label> <input class="current" type="number" value="2011" min="1900" max="9999"> )
|
||||
</div>
|
||||
|
||||
<h1>Page Header</h1>
|
||||
<div>
|
||||
<pre class="prettyprint lang-html"><!-- blue theme stylesheet with additional css styles added in v2.0.17 -->
|
||||
<link rel="stylesheet" href="../css/theme.blue.css">
|
||||
<!-- tablesorter plugin -->
|
||||
<script src="../js/jquery.tablesorter.js"></script>
|
||||
|
||||
<!-- load month, weekday and two digit year parsers -->
|
||||
<script src="../js/parsers/parser-date-month.js"></script>
|
||||
<script src="../js/parsers/parser-date-weekday.js"></script>
|
||||
<script src="../js/parsers/parser-date-two-digit-year.js"></script>
|
||||
|
||||
<!-- http://sugarjs.com/dates#comparing_dates -->
|
||||
<script src="../js/sugar.js"></script>
|
||||
<script src="../js/parsers/parser-date-sugar.js"></script></pre>
|
||||
</div>
|
||||
|
||||
<h1>Javascript</h1>
|
||||
<div id="javascript">
|
||||
<pre class="prettyprint lang-javascript"></pre>
|
||||
</div>
|
||||
|
||||
<h1>HTML</h1>
|
||||
<div id="html">
|
||||
<pre class="prettyprint lang-html"></pre>
|
||||
</div>
|
||||
|
||||
<div class="next-up">
|
||||
<hr />
|
||||
Next up: <a href="example-widget-filter.html">Applying the filter widget ››</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.result, .tdy { color: red; }
|
||||
.params { font-size: 0.8em; }
|
||||
</style>
|
||||
<script>
|
||||
$(function(){
|
||||
var tdy = $('.tdy'), // two digit year
|
||||
a = $('.result'), // answer
|
||||
r = $('.range'), // range
|
||||
c = $('.current'), // current year
|
||||
y = new Date().getFullYear();
|
||||
|
||||
tdy.val( (y + 20).toString().slice(-2) ); // use this year + 20
|
||||
c.val( y );
|
||||
|
||||
$('input').on('change', function(){
|
||||
var y = parseInt(tdy.val(), 10),
|
||||
result = 1900 + y,
|
||||
range = parseInt(r.val(), 10);
|
||||
if (y < 10) { tdy.val('0' + y); }
|
||||
y = parseInt(c.val(), 10);
|
||||
while (y - result > range) {
|
||||
result += 100;
|
||||
}
|
||||
a.html(result);
|
||||
}).change();
|
||||
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
128
assets/vendor/tablesorter/docs/example-parsers-feet-inch-fraction.html
vendored
Normal file
128
assets/vendor/tablesorter/docs/example-parsers-feet-inch-fraction.html
vendored
Normal file
@@ -0,0 +1,128 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery plugin: Tablesorter 2.0 - Feet-inch-fraction parser</title>
|
||||
|
||||
<!-- jQuery -->
|
||||
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
|
||||
|
||||
<!-- Demo stuff -->
|
||||
<link rel="stylesheet" href="css/jq.css">
|
||||
<link href="css/prettify.css" rel="stylesheet">
|
||||
<script src="js/prettify.js"></script>
|
||||
<script src="js/docs.js"></script>
|
||||
<style>
|
||||
th { width: 50%; }
|
||||
</style>
|
||||
|
||||
<!-- Tablesorter: required -->
|
||||
<link rel="stylesheet" href="../css/theme.blue.css">
|
||||
<script src="../js/jquery.tablesorter.js"></script>
|
||||
<script src="../js/jquery.tablesorter.widgets.js"></script>
|
||||
|
||||
<script src="../js/parsers/parser-feet-inch-fraction.js"></script>
|
||||
|
||||
<script id="js">$(function() {
|
||||
|
||||
$('table').tablesorter({
|
||||
theme: 'blue',
|
||||
headers: {
|
||||
0: { sorter: 'distance' },
|
||||
1: { sorter: 'distance' }
|
||||
},
|
||||
widgets: ['zebra']
|
||||
});
|
||||
|
||||
});</script>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<div id="banner">
|
||||
<h1>table<em>sorter</em></h1>
|
||||
<h2>Feet-inch-fraction parser</h2>
|
||||
<h3>Flexible client-side table sorting</h3>
|
||||
<a href="index.html">Back to documentation</a>
|
||||
</div>
|
||||
<div id="main">
|
||||
|
||||
<h1>Demo</h1>
|
||||
<button type="button" class="toggleparsedvalue">toggle</button> parsed values within the column
|
||||
<div id="demo">
|
||||
<table class="tablesorter">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Distance (feet & inches)</th>
|
||||
<th>Fractions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>3'</td><td>1½</td></tr>
|
||||
<tr><td>11"</td><td>22/12</td></tr>
|
||||
<tr><td>5'</td><td>3¼</td></tr>
|
||||
<tr><td>3"</td><td>5 ½</td></tr>
|
||||
<tr><td>½"</td><td>2¾</td></tr>
|
||||
|
||||
<tr><td>5' 11"</td><td>¾</td></tr>
|
||||
<tr><td>10' 11"</td><td>⅛</td></tr>
|
||||
<tr><td>10' 1"</td><td>5/6</td></tr>
|
||||
<tr><td>10' 4"</td><td>11/16</td></tr>
|
||||
<tr><td>5' 9"</td><td>⅜</td></tr>
|
||||
<tr><td>5 1/2'</td><td>2</td></tr>
|
||||
|
||||
<tr><td>5' 3/4"</td><td>2⅞</td></tr>
|
||||
<tr><td>5' 5/8"</td><td>3 ¾</td></tr>
|
||||
<tr><td>5' 3 1/2"</td><td>3 ⅛</td></tr>
|
||||
|
||||
<tr><td>10' 3⅛"</td><td>3/7</td></tr>
|
||||
|
||||
<tr><td>10' 2⅜"</td><td>3⅜</td></tr>
|
||||
<tr><td>10' 3⅝"</td><td>3 ½</td></tr>
|
||||
<tr><td>10' 2⅞"</td><td>3 ⅝</td></tr>
|
||||
<tr><td>5' 3¼"</td><td>2⅝</td></tr>
|
||||
<tr><td>5 ' 2 ½ "</td><td>2/3</td></tr>
|
||||
<tr><td>10' 2¾"</td><td>5 ⅝</td></tr>
|
||||
|
||||
<tr><td>5' 2 ½"</td><td>5 ⅜</td></tr>
|
||||
<tr><td>5' 2.5"</td><td>5/16</td></tr>
|
||||
|
||||
<tr><td>5' 2 1/2"</td><td>2 3/5</td></tr>
|
||||
|
||||
<tr><td> 10 ' 1 "</td><td>3</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<h1>Page Header</h1>
|
||||
<div>
|
||||
<pre class="prettyprint lang-html"><!-- blue theme stylesheet -->
|
||||
<link rel="stylesheet" href="../css/theme.blue.css">
|
||||
<!-- tablesorter plugin -->
|
||||
<script src="../js/jquery.tablesorter.js"></script>
|
||||
|
||||
<!-- load feet-inch-fraction parser -->
|
||||
<script src="../js/parsers/parser-feet-inch-fraction.js"></script></pre>
|
||||
</div>
|
||||
|
||||
<h1>Javascript</h1>
|
||||
<div id="javascript">
|
||||
<pre class="prettyprint lang-javascript"></pre>
|
||||
</div>
|
||||
|
||||
<h1>HTML</h1>
|
||||
<div id="html">
|
||||
<pre class="prettyprint lang-html"></pre>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<script>
|
||||
$(function(){
|
||||
// add parsed values to columns [0,1]
|
||||
addParsedValues($('table'), [0,1], function(num){ return Math.round(num * 100)/100; });
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
190
assets/vendor/tablesorter/docs/example-parsers-file-type.html
vendored
Normal file
190
assets/vendor/tablesorter/docs/example-parsers-file-type.html
vendored
Normal file
@@ -0,0 +1,190 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery plugin: Tablesorter 2.0 - File Type Parser</title>
|
||||
|
||||
<!-- jQuery -->
|
||||
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
|
||||
|
||||
<!-- Demo stuff -->
|
||||
<link rel="stylesheet" href="css/jq.css">
|
||||
<link href="css/prettify.css" rel="stylesheet">
|
||||
<script src="js/prettify.js"></script>
|
||||
<script src="js/docs.js"></script>
|
||||
|
||||
<style id="css">tr.group-header td {
|
||||
background: #eee;
|
||||
}
|
||||
.group-name {
|
||||
text-transform: uppercase;
|
||||
font-weight: bold;
|
||||
}
|
||||
.group-count {
|
||||
color: #999;
|
||||
}
|
||||
.group-hidden {
|
||||
display: none;
|
||||
}
|
||||
.group-header, .group-header td {
|
||||
user-select: none;
|
||||
-moz-user-select: none;
|
||||
}
|
||||
/* collapsed arrow */
|
||||
tr.group-header td i {
|
||||
display: inline-block;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-top: 4px solid transparent;
|
||||
border-bottom: 4px solid #888;
|
||||
border-right: 4px solid #888;
|
||||
border-left: 4px solid transparent;
|
||||
margin-right: 7px;
|
||||
user-select: none;
|
||||
-moz-user-select: none;
|
||||
}
|
||||
tr.group-header.collapsed td i {
|
||||
border-top: 5px solid transparent;
|
||||
border-bottom: 5px solid transparent;
|
||||
border-left: 5px solid #888;
|
||||
border-right: 0;
|
||||
margin-right: 10px;
|
||||
}</style>
|
||||
|
||||
<!-- Tablesorter: required -->
|
||||
<link rel="stylesheet" href="../css/theme.blue.css">
|
||||
<script src="../js/jquery.tablesorter.js"></script>
|
||||
<script src="../js/jquery.tablesorter.widgets.js"></script>
|
||||
|
||||
<!-- grouping widget -->
|
||||
<script src="../js/parsers/parser-file-type.js"></script>
|
||||
<script src="../js/widgets/widget-grouping.js"></script>
|
||||
|
||||
<script id="js">$(function() {
|
||||
|
||||
// basic list from http://en.wikipedia.org/wiki/List_of_file_formats
|
||||
// there is no need to include this unless you plan on replacing the
|
||||
// default settings completely
|
||||
$.tablesorter.fileTypes = {
|
||||
// divides filetype extensions in the equivalent list below
|
||||
separator : '|',
|
||||
equivalents : {
|
||||
"3D Image" : "3dm|3ds|dwg|max|obj",
|
||||
"Audio" : "aif|aac|ape|flac|la|m4a|mid|midi|mp2|mp3|ogg|ra|raw|rm|wav|wma",
|
||||
"Compressed" : "7z|bin|cab|cbr|gz|gzip|iso|lha|lz|rar|tar|tgz|zip|zipx|zoo",
|
||||
"Database" : "csv|dat|db|dbf|json|ldb|mdb|myd|pdb|sql|tsv|wdb|wmdb|xlr|xls|xlsx|xml",
|
||||
"Development" : "asm|c|class|cls|cpp|cc|cs|cxx|cbp|cs|dba|fla|h|java|lua|pl|py|pyc|pyo|sh|sln|r|rb|vb",
|
||||
"Document" : "doc|docx|odt|ott|pages|pdf|rtf|tex|wpd|wps|wrd|wri",
|
||||
"Executable" : "apk|app|com|exe|gadget|lnk|msi",
|
||||
"Fonts" : "eot|fnt|fon|otf|ttf|woff",
|
||||
"Icons" : "ani|cur|icns|ico",
|
||||
"Images" : "bmp|gif|jpg|jpeg|jpe|jp2|pic|png|psd|tga|tif|tiff|wmf|webp",
|
||||
"Presentation" : "pps|ppt",
|
||||
"Published" : "chp|epub|lit|pub|ppp|fm|mobi",
|
||||
"Script" : "as|bat|cgi|cmd|jar|js|lua|scpt|scptd|sh|vbs|vb|wsf",
|
||||
"Styles" : "css|less|sass",
|
||||
"Text" : "info|log|md|markdown|nfo|tex|text|txt",
|
||||
"Vectors" : "awg|ai|eps|cdr|ps|svg",
|
||||
"Video" : "asf|avi|flv|m4v|mkv|mov|mp4|mpe|mpeg|mpg|ogg|rm|rv|swf|vob|wmv",
|
||||
"Web" : "asp|aspx|cer|cfm|htm|html|php|url|xhtml"
|
||||
}
|
||||
};
|
||||
|
||||
// To add a custom equivalent, define:
|
||||
// $.tablesorter.fileTypes.equivalents['xx'] = "A|B|C";
|
||||
|
||||
// This demo uses the group widget to organize the file type equivalents
|
||||
$("table").tablesorter({
|
||||
theme: 'blue',
|
||||
widgets : [ 'group', 'zebra' ],
|
||||
widgetOptions: {
|
||||
group_separator : '-' // default setting
|
||||
}
|
||||
});
|
||||
|
||||
});</script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="banner">
|
||||
<h1>table<em>sorter</em></h1>
|
||||
<h2>File Type Parser</h2>
|
||||
<h3>Flexible client-side table sorting</h3>
|
||||
<a href="index.html">Back to documentation</a>
|
||||
</div>
|
||||
<div id="main">
|
||||
|
||||
<p></p>
|
||||
<br>
|
||||
|
||||
<ul>
|
||||
<li>If this parser finds the file type extension within the equivalents list, it will add the equivalents group name to the beginning of the file so that during sorting, those file names will sort by the group they are in.</li>
|
||||
<li>Please look in the javascript code section below for a full list of default equivalents. This list is by no means extensive, but it can be easily modified or extended as needed.</li>
|
||||
<li>To add a new group to the equivalents list, just define a new group, <em>before initializing tablesorter</em>, as follows:
|
||||
<pre class="prettyprint lang-javascript">$.tablesorter.fileTypes.equivalents['xx'] = "A|B|C"</pre>
|
||||
</li>
|
||||
<li>But lets say your table is primarily being used to sort font file names, but you notice "svg" is listed under "vectors" (graphics) so you want to modify the equivalents list. Do it as follows:
|
||||
<pre class="prettyprint lang-javascript">$.tablesorter.fileTypes.equivalents["Vectors"] = "awg|ai|eps|cdr"; // redefine vectors without "svg"
|
||||
$.tablesorter.fileTypes.equivalents["Fonts"] += '|svg'; // just add it to the end (but first include the vertical bar = shift+\; above the enter key)!</pre>
|
||||
</li>
|
||||
<li>This parser only looks to see if an extension exists within the equivalents list, so any separator can be used (spaces, commas or vertical bars).</li>
|
||||
</ul>
|
||||
|
||||
<h1>Demo</h1>
|
||||
<div id="demo">
|
||||
|
||||
<button>Swap</button> (swap media column between "group-separator-1" & "group-separator-2")
|
||||
|
||||
<table class="tablesorter">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="sorter-filetype group-separator">Desktop Files</th>
|
||||
<th class="sorter-filetype group-separator-1">Tablesorter Files</th>
|
||||
<th id="media" class="group-separator-2">Media</th>
|
||||
<th class="sorter-filetype group-separator-1">Media Files</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>github.url</td><td>package.json</td><td>Music Disc #1 - Green Day - Boulevard of Broken Dreams</td><td>Muse - Supermassive Black Hole.mp3</td></tr>
|
||||
<tr><td>tablesorter.zip</td><td>readme.md</td><td>Music Disc #1 - Green Day - Holiday</td><td>Gorillaz - Feel Good Inc.mp3</td></tr>
|
||||
<tr><td>learn-git.pdf</td><td>index.html</td><td>Music Disc #1 - M83 - Midnight City</td><td>M83 - Midnight City.mp4</td></tr>
|
||||
<tr><td>pancake-cat.jpg</td><td>jquery.tablesorter.js</td><td>Music Disc #1 - Bob Marley - Everything is Gonna Be Alright</td><td>Radiohead - Creep.ogg</td></tr>
|
||||
<tr><td>to-do-list.txt</td><td>theme.blue.css</td><td>Music Disc #1 - Bob Marley - Jamming</td><td>Ellie Goulding - Lights.flv</td></tr>
|
||||
<tr><td>css-tips.docx</td><td>theme.less</td><td>Music Disc #1 - Bob Marley - Oh, Baby I Love Your Way</td><td>Imagine Dragons - Radioactive.avi</td></tr>
|
||||
<tr><td>frisbee-cat.png</td><td>black-asc.gif</td><td>Music Disc #1 - Bob Marley - Red Red Wine</td><td>Muse - Supermassive Black Hole.avi</td></tr>
|
||||
<tr><td>Diablo.lnk</td><td>green-unsorted.psd</td><td>Music Disc #1 - Bob Marley - No Woman No Cry</td><td>Alex Clare - Too Close.wma</td></tr>
|
||||
<tr><td>Warcraft.lnk</td><td>jquery.tablesorter.widgets.js</td><td>Music Disc #2 - Sublime - Santeria</td><td>The XX - Intro.mp3</td></tr>
|
||||
<tr><td>google.url</td><td>glyphicons-halflings.png</td><td>Music Disc #2 - Sublime - What I Got</td><td>AWOLNATION - Sail.wmv</td></tr>
|
||||
<tr><td>swimming-cat.gif</td><td>component.json</td><td>Music Disc #2 - Massive Attack - Teardrop</td><td>Of Monsters and Men - Little Talks.m4a</td></tr>
|
||||
<tr><td>photo-album.zip</td><td>themes.html</td><td>Music Disc #2 - Massive Attack - Dissolved Girl</td><td>Nina Simone - Feeling Good.flac</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<h1>Javascript</h1>
|
||||
<div id="javascript">
|
||||
<pre class="prettyprint lang-javascript"></pre>
|
||||
</div>
|
||||
<h1>HTML</h1>
|
||||
<div id="html">
|
||||
<pre class="prettyprint lang-html"></pre>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
/* DEMO ONLY CODE */
|
||||
$(function(){
|
||||
$('button').click(function(){
|
||||
$('#media').toggleClass('group-separator-1 group-separator-2');
|
||||
$('table').trigger('sorton', [ [[2,0]] ]);
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<div class="next-up">
|
||||
<hr />
|
||||
Next up: <a href="example-option-sort-force.html">Force a default sorting order ››</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
393
assets/vendor/tablesorter/docs/example-parsers-ignore-articles.html
vendored
Normal file
393
assets/vendor/tablesorter/docs/example-parsers-ignore-articles.html
vendored
Normal file
@@ -0,0 +1,393 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery plugin: Tablesorter 2.0 - Ignore leading articles parser</title>
|
||||
|
||||
<!-- jQuery -->
|
||||
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
|
||||
|
||||
<!-- Demo stuff -->
|
||||
<link rel="stylesheet" href="css/jq.css">
|
||||
<link href="css/prettify.css" rel="stylesheet">
|
||||
<script src="js/prettify.js"></script>
|
||||
<script src="js/docs.js"></script>
|
||||
|
||||
<!-- Tablesorter: required -->
|
||||
<link rel="stylesheet" href="../css/theme.blue.css">
|
||||
<script src="../js/jquery.tablesorter.js"></script>
|
||||
|
||||
<script src="../js/parsers/parser-ignore-articles.js"></script>
|
||||
|
||||
<script id="js">$(function() {
|
||||
|
||||
$('table').tablesorter({
|
||||
theme: 'blue',
|
||||
widgets: ['zebra'],
|
||||
sortList: [[2, 0]],
|
||||
headers: {
|
||||
2: {
|
||||
sorter: 'ignoreArticles',
|
||||
ignoreArticles : 'en'
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
});</script>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<div id="banner">
|
||||
<h1>table<em>sorter</em></h1>
|
||||
<h2>Ignore leading articles parser</h2>
|
||||
<h3>Flexible client-side table sorting</h3>
|
||||
<a href="index.html">Back to documentation</a>
|
||||
</div>
|
||||
<div id="main">
|
||||
|
||||
<p class="tip">
|
||||
<em>NOTE!</em>
|
||||
<ul>
|
||||
<li>This parser can not be applied to the original plugin.</li>
|
||||
<li>Set the language to use by adding any of the following (they all do the same thing), set in order of priority (<span class="version">v2.8.2</span>):
|
||||
<ul>
|
||||
<li>jQuery data <code>data-ignore-articles="fr"</code>.</li>
|
||||
<li>metadata <code>class="{ ignoreArticles : 'fr' }"</code>. This requires the metadata plugin.</li>
|
||||
<li>headers option <code>headers : { 0 : { ignoreArticles : 'fr' } }</code>.</li>
|
||||
<li>header class name <code>class="ignoreArticles-fr"</code>.</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>To add a custom language to the parser, use the following code:
|
||||
<pre class="prettyprint lang-javascript">$.extend( $.tablesorter.ignoreArticles, {
|
||||
"xx" : "a, l'_, de la"
|
||||
});
|
||||
|
||||
$('table').tablesorter({
|
||||
headers: {
|
||||
2: {
|
||||
sorter: 'ignoreArticles',
|
||||
ignoreArticles : 'xx'
|
||||
}
|
||||
}
|
||||
});</pre>
|
||||
<ul>
|
||||
<li>where <code>xx</code> is the <code>ignoreArticles</code> id (abbreviation for the language)</li>
|
||||
<li>Each leading article must be separated by a comma and will be case-insensitive.</li>
|
||||
<li>Leading articles will only be removed if they are followed by a space; spaces are automatically included when parsed unless the article definition is followed by an underscore. See the <code>l'_</code> note below.</li>
|
||||
<li><code>a</code> is an example of a leading article which will be removed. So, "A Fistfull of Dollars" will only parse "Fistfull of Dollars" and will sort with the other words that start with an "F".</li>
|
||||
<li><code>l'_</code> includes an underscore (<code>_</code>); this tells the parser to <strong><em>not</em></strong> add a space after the word. So a title like "l'enfant" will parse as "enfant".</li>
|
||||
<li><code>de la</code> is an example showing that the parser can remove a multiple-word article.</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>Some languages have been included by default. The information below was obtained from <a href="http://en.wikipedia.org/wiki/Article_%28grammar%29#Variation_among_languages">this wikipedia page</a>, so if you discover any errors, or if you want to contribute another language, please <a href="https://github.com/Mottie/tablesorter/issues">open an issue</a>.
|
||||
<pre class="prettyprint lang-javascript">$.tablesorter.ignoreArticles = {
|
||||
"en" : "the, a, an",
|
||||
"de" : "der, die, das, des, dem, den, ein, eine, einer, eines, einem, einen",
|
||||
"nl" : "de, het, de, een",
|
||||
"es" : "el, la, lo, los, las, un, una, unos, unas",
|
||||
"pt" : "o, a, os, as, um, uma, uns, umas",
|
||||
"fr" : "le, la, l'_, les, un, une, des",
|
||||
"it" : "il, lo, la, l'_, i, gli, le, un', uno, una, un",
|
||||
"hu" : "a, az, egy"
|
||||
};</pre></li>
|
||||
</ul>
|
||||
</p>
|
||||
|
||||
<h1>Demo</h1>
|
||||
<br>
|
||||
<div id="demo"><h2><a href="http://www.imdb.com/chart/top">IMDB top 250 movies</a> (3/27/2013)</h2>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<td class="center">Rank</td>
|
||||
<td class="center">Rating</td>
|
||||
<td>Title</td> <!-- data-sorter="ignoreArticles" data-ignore-articles="en" -->
|
||||
<td class="right">Votes</td>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td class="right">1.</td><td class="center">9.2</td><td><a href="http://www.imdb.com/title/tt0111161/">The Shawshank Redemption</a> (1994)</td><td class="right">941,067</td></tr>
|
||||
<tr><td class="right">2.</td><td class="center">9.2</td><td><a href="http://www.imdb.com/title/tt0068646/">The Godfather</a> (1972)</td><td class="right">673,484</td></tr>
|
||||
<tr><td class="right">3.</td><td class="center">9.0</td><td><a href="http://www.imdb.com/title/tt0071562/">The Godfather: Part II</a> (1974)</td><td class="right">434,176</td></tr>
|
||||
<tr><td class="right">4.</td><td class="center">8.9</td><td><a href="http://www.imdb.com/title/tt0110912/">Pulp Fiction</a> (1994)</td><td class="right">732,799</td></tr>
|
||||
<tr><td class="right">5.</td><td class="center">8.9</td><td><a href="http://www.imdb.com/title/tt0060196/">The Good, the Bad and the Ugly</a> (1966)</td><td class="right">286,482</td></tr>
|
||||
<tr><td class="right">6.</td><td class="center">8.9</td><td><a href="http://www.imdb.com/title/tt0050083/">12 Angry Men</a> (1957)</td><td class="right">231,572</td></tr>
|
||||
<tr><td class="right">7.</td><td class="center">8.9</td><td><a href="http://www.imdb.com/title/tt0468569/">The Dark Knight</a> (2008)</td><td class="right">917,028</td></tr>
|
||||
<tr><td class="right">8.</td><td class="center">8.9</td><td><a href="http://www.imdb.com/title/tt0108052/">Schindler's List</a> (1993)</td><td class="right">483,623</td></tr>
|
||||
<tr><td class="right">9.</td><td class="center">8.8</td><td><a href="http://www.imdb.com/title/tt0167260/">The Lord of the Rings: The Return of the King</a> (2003)</td><td class="right">672,581</td></tr>
|
||||
<tr><td class="right">10.</td><td class="center">8.8</td><td><a href="http://www.imdb.com/title/tt0137523/">Fight Club</a> (1999)</td><td class="right">716,995</td></tr>
|
||||
<tr><td class="right">11.</td><td class="center">8.8</td><td><a href="http://www.imdb.com/title/tt0080684/">Star Wars: Episode V - The Empire Strikes Back</a> (1980)</td><td class="right">462,561</td></tr>
|
||||
<tr><td class="right">12.</td><td class="center">8.8</td><td><a href="http://www.imdb.com/title/tt0120737/">The Lord of the Rings: The Fellowship of the Ring</a> (2001)</td><td class="right">697,724</td></tr>
|
||||
<tr><td class="right">13.</td><td class="center">8.8</td><td><a href="http://www.imdb.com/title/tt0073486/">One Flew Over the Cuckoo's Nest</a> (1975)</td><td class="right">393,499</td></tr>
|
||||
<tr><td class="right">14.</td><td class="center">8.7</td><td><a href="http://www.imdb.com/title/tt1375666/">Inception</a> (2010)</td><td class="right">732,630</td></tr>
|
||||
<tr><td class="right">15.</td><td class="center">8.7</td><td><a href="http://www.imdb.com/title/tt0099685/">Goodfellas</a> (1990)</td><td class="right">411,044</td></tr>
|
||||
<tr><td class="right">16.</td><td class="center">8.7</td><td><a href="http://www.imdb.com/title/tt0076759/">Star Wars</a> (1977)</td><td class="right">518,660</td></tr>
|
||||
<tr><td class="right">17.</td><td class="center">8.7</td><td><a href="http://www.imdb.com/title/tt0047478/">Seven Samurai</a> (1954)</td><td class="right">146,754</td></tr>
|
||||
<tr><td class="right">18.</td><td class="center">8.7</td><td><a href="http://www.imdb.com/title/tt0109830/">Forrest Gump</a> (1994)</td><td class="right">617,489</td></tr>
|
||||
<tr><td class="right">19.</td><td class="center">8.7</td><td><a href="http://www.imdb.com/title/tt0133093/">The Matrix</a> (1999)</td><td class="right">679,951</td></tr>
|
||||
<tr><td class="right">20.</td><td class="center">8.7</td><td><a href="http://www.imdb.com/title/tt0167261/">The Lord of the Rings: The Two Towers</a> (2002)</td><td class="right">603,969</td></tr>
|
||||
<tr><td class="right">21.</td><td class="center">8.7</td><td><a href="http://www.imdb.com/title/tt0317248/">City of God</a> (2002)</td><td class="right">308,820</td></tr>
|
||||
<tr><td class="right">22.</td><td class="center">8.6</td><td><a href="http://www.imdb.com/title/tt0114369/">Se7en</a> (1995)</td><td class="right">547,794</td></tr>
|
||||
<tr><td class="right">23.</td><td class="center">8.6</td><td><a href="http://www.imdb.com/title/tt0102926/">The Silence of the Lambs</a> (1991)</td><td class="right">459,251</td></tr>
|
||||
<tr><td class="right">24.</td><td class="center">8.6</td><td><a href="http://www.imdb.com/title/tt0064116/">Once Upon a Time in the West</a> (1968)</td><td class="right">129,773</td></tr>
|
||||
<tr><td class="right">25.</td><td class="center">8.6</td><td><a href="http://www.imdb.com/title/tt0034583/">Casablanca</a> (1942)</td><td class="right">252,435</td></tr>
|
||||
<tr><td class="right">26.</td><td class="center">8.6</td><td><a href="http://www.imdb.com/title/tt0114814/">The Usual Suspects</a> (1995)</td><td class="right">431,028</td></tr>
|
||||
<tr><td class="right">27.</td><td class="center">8.6</td><td><a href="http://www.imdb.com/title/tt0082971/">Raiders of the Lost Ark</a> (1981)</td><td class="right">394,043</td></tr>
|
||||
<tr><td class="right">28.</td><td class="center">8.6</td><td><a href="http://www.imdb.com/title/tt0047396/">Rear Window</a> (1954)</td><td class="right">190,219</td></tr>
|
||||
<tr><td class="right">29.</td><td class="center">8.6</td><td><a href="http://www.imdb.com/title/tt0038650/">It's a Wonderful Life</a> (1946)</td><td class="right">163,164</td></tr>
|
||||
<tr><td class="right">30.</td><td class="center">8.6</td><td><a href="http://www.imdb.com/title/tt0054215/">Psycho</a> (1960)</td><td class="right">239,467</td></tr>
|
||||
<tr><td class="right">31.</td><td class="center">8.6</td><td><a href="http://www.imdb.com/title/tt0110413/">Léon: The Professional</a> (1994)</td><td class="right">399,997</td></tr>
|
||||
<tr><td class="right">32.</td><td class="center">8.5</td><td><a href="http://www.imdb.com/title/tt0043014/">Sunset Blvd.</a> (1950)</td><td class="right">85,756</td></tr>
|
||||
<tr><td class="right">33.</td><td class="center">8.5</td><td><a href="http://www.imdb.com/title/tt0120586/">American History X</a> (1998)</td><td class="right">433,917</td></tr>
|
||||
<tr><td class="right">34.</td><td class="center">8.5</td><td><a href="http://www.imdb.com/title/tt0209144/">Memento</a> (2000)</td><td class="right">495,175</td></tr>
|
||||
<tr><td class="right">35.</td><td class="center">8.5</td><td><a href="http://www.imdb.com/title/tt0078788/">Apocalypse Now</a> (1979)</td><td class="right">276,646</td></tr>
|
||||
<tr><td class="right">36.</td><td class="center">8.5</td><td><a href="http://www.imdb.com/title/tt0103064/">Terminator 2: Judgment Day</a> (1991)</td><td class="right">425,770</td></tr>
|
||||
<tr><td class="right">37.</td><td class="center">8.5</td><td><a href="http://www.imdb.com/title/tt0120815/">Saving Private Ryan</a> (1998)</td><td class="right">482,123</td></tr>
|
||||
<tr><td class="right">38.</td><td class="center">8.5</td><td><a href="http://www.imdb.com/title/tt0057012/">Dr. Strangelove or: How I Learned to Stop Worrying and Love the Bomb</a> (1964)</td><td class="right">226,703</td></tr>
|
||||
<tr><td class="right">39.</td><td class="center">8.5</td><td><a href="http://www.imdb.com/title/tt0021749/">City Lights</a> (1931)</td><td class="right">54,820</td></tr>
|
||||
<tr><td class="right">40.</td><td class="center">8.5</td><td><a href="http://www.imdb.com/title/tt0078748/">Alien</a> (1979)</td><td class="right">319,629</td></tr>
|
||||
<tr><td class="right">41.</td><td class="center">8.5</td><td><a href="http://www.imdb.com/title/tt1853728/">Django Unchained</a> (2012)</td><td class="right">263,202</td></tr>
|
||||
<tr><td class="right">42.</td><td class="center">8.5</td><td><a href="http://www.imdb.com/title/tt0053125/">North by Northwest</a> (1959)</td><td class="right">139,339</td></tr>
|
||||
<tr><td class="right">43.</td><td class="center">8.5</td><td><a href="http://www.imdb.com/title/tt0245429/">Spirited Away</a> (2001)</td><td class="right">211,121</td></tr>
|
||||
<tr><td class="right">44.</td><td class="center">8.5</td><td><a href="http://www.imdb.com/title/tt0027977/">Modern Times</a> (1936)</td><td class="right">69,431</td></tr>
|
||||
<tr><td class="right">45.</td><td class="center">8.5</td><td><a href="http://www.imdb.com/title/tt0033467/">Citizen Kane</a> (1941)</td><td class="right">197,473</td></tr>
|
||||
<tr><td class="right">46.</td><td class="center">8.5</td><td><a href="http://www.imdb.com/title/tt1345836/">The Dark Knight Rises</a> (2012)</td><td class="right">568,024</td></tr>
|
||||
<tr><td class="right">47.</td><td class="center">8.5</td><td><a href="http://www.imdb.com/title/tt0081505/">The Shining</a> (1980)</td><td class="right">333,295</td></tr>
|
||||
<tr><td class="right">48.</td><td class="center">8.5</td><td><a href="http://www.imdb.com/title/tt0088763/">Back to the Future</a> (1985)</td><td class="right">377,606</td></tr>
|
||||
<tr><td class="right">49.</td><td class="center">8.4</td><td><a href="http://www.imdb.com/title/tt0253474/">The Pianist</a> (2002)</td><td class="right">260,234</td></tr>
|
||||
<tr><td class="right">50.</td><td class="center">8.4</td><td><a href="http://www.imdb.com/title/tt0407887/">The Departed</a> (2006)</td><td class="right">478,100</td></tr>
|
||||
<tr><td class="right">51.</td><td class="center">8.4</td><td><a href="http://www.imdb.com/title/tt0118799/">Life Is Beautiful</a> (1997)</td><td class="right">206,585</td></tr>
|
||||
<tr><td class="right">52.</td><td class="center">8.4</td><td><a href="http://www.imdb.com/title/tt0022100/">M</a> (1931)</td><td class="right">62,112</td></tr>
|
||||
<tr><td class="right">53.</td><td class="center">8.4</td><td><a href="http://www.imdb.com/title/tt0052357/">Vertigo</a> (1958)</td><td class="right">145,330</td></tr>
|
||||
<tr><td class="right">54.</td><td class="center">8.4</td><td><a href="http://www.imdb.com/title/tt0169547/">American Beauty</a> (1999)</td><td class="right">495,829</td></tr>
|
||||
<tr><td class="right">55.</td><td class="center">8.4</td><td><a href="http://www.imdb.com/title/tt0050825/">Paths of Glory</a> (1957)</td><td class="right">70,416</td></tr>
|
||||
<tr><td class="right">56.</td><td class="center">8.4</td><td><a href="http://www.imdb.com/title/tt0075314/">Taxi Driver</a> (1976)</td><td class="right">285,135</td></tr>
|
||||
<tr><td class="right">57.</td><td class="center">8.4</td><td><a href="http://www.imdb.com/title/tt0036775/">Double Indemnity</a> (1944)</td><td class="right">59,206</td></tr>
|
||||
<tr><td class="right">58.</td><td class="center">8.4</td><td><a href="http://www.imdb.com/title/tt0090605/">Aliens</a> (1986)</td><td class="right">289,891</td></tr>
|
||||
<tr><td class="right">59.</td><td class="center">8.4</td><td><a href="http://www.imdb.com/title/tt0435761/">Toy Story 3</a> (2010)</td><td class="right">277,784</td></tr>
|
||||
<tr><td class="right">60.</td><td class="center">8.4</td><td><a href="http://www.imdb.com/title/tt0910970/">WALL·E</a> (2008)</td><td class="right">376,223</td></tr>
|
||||
<tr><td class="right">61.</td><td class="center">8.4</td><td><a href="http://www.imdb.com/title/tt0405094/">The Lives of Others</a> (2006)</td><td class="right">147,553</td></tr>
|
||||
<tr><td class="right">62.</td><td class="center">8.4</td><td><a href="http://www.imdb.com/title/tt0172495/">Gladiator</a> (2000)</td><td class="right">528,198</td></tr>
|
||||
<tr><td class="right">63.</td><td class="center">8.4</td><td><a href="http://www.imdb.com/title/tt0120689/">The Green Mile</a> (1999)</td><td class="right">390,685</td></tr>
|
||||
<tr><td class="right">64.</td><td class="center">8.4</td><td><a href="http://www.imdb.com/title/tt1675434/">The Intouchables</a> (2011)</td><td class="right">164,584</td></tr>
|
||||
<tr><td class="right">65.</td><td class="center">8.4</td><td><a href="http://www.imdb.com/title/tt0066921/">A Clockwork Orange</a> (1971)</td><td class="right">318,549</td></tr>
|
||||
<tr><td class="right">66.</td><td class="center">8.4</td><td><a href="http://www.imdb.com/title/tt0211915/">Amélie</a> (2001)</td><td class="right">314,747</td></tr>
|
||||
<tr><td class="right">67.</td><td class="center">8.4</td><td><a href="http://www.imdb.com/title/tt0032553/">The Great Dictator</a> (1940)</td><td class="right">68,287</td></tr>
|
||||
<tr><td class="right">68.</td><td class="center">8.4</td><td><a href="http://www.imdb.com/title/tt0482571/">The Prestige</a> (2006)</td><td class="right">432,239</td></tr>
|
||||
<tr><td class="right">69.</td><td class="center">8.4</td><td><a href="http://www.imdb.com/title/tt0056172/">Lawrence of Arabia</a> (1962)</td><td class="right">117,981</td></tr>
|
||||
<tr><td class="right">70.</td><td class="center">8.4</td><td><a href="http://www.imdb.com/title/tt0056592/">To Kill a Mockingbird</a> (1962)</td><td class="right">128,498</td></tr>
|
||||
<tr><td class="right">71.</td><td class="center">8.4</td><td><a href="http://www.imdb.com/title/tt0105236/">Reservoir Dogs</a> (1992)</td><td class="right">369,352</td></tr>
|
||||
<tr><td class="right">72.</td><td class="center">8.4</td><td><a href="http://www.imdb.com/title/tt0082096/">Das Boot</a> (1981)</td><td class="right">106,465</td></tr>
|
||||
<tr><td class="right">73.</td><td class="center">8.4</td><td><a href="http://www.imdb.com/title/tt0041959/">The Third Man</a> (1949)</td><td class="right">73,465</td></tr>
|
||||
<tr><td class="right">74.</td><td class="center">8.4</td><td><a href="http://www.imdb.com/title/tt0180093/">Requiem for a Dream</a> (2000)</td><td class="right">336,877</td></tr>
|
||||
<tr><td class="right">75.</td><td class="center">8.3</td><td><a href="http://www.imdb.com/title/tt0095765/">Cinema Paradiso</a> (1988)</td><td class="right">81,418</td></tr>
|
||||
<tr><td class="right">76.</td><td class="center">8.3</td><td><a href="http://www.imdb.com/title/tt0040897/">The Treasure of the Sierra Madre</a> (1948)</td><td class="right">49,807</td></tr>
|
||||
<tr><td class="right">77.</td><td class="center">8.3</td><td><a href="http://www.imdb.com/title/tt0338013/">Eternal Sunshine of the Spotless Mind</a> (2004)</td><td class="right">389,500</td></tr>
|
||||
<tr><td class="right">78.</td><td class="center">8.3</td><td><a href="http://www.imdb.com/title/tt0110357/">The Lion King</a> (1994)</td><td class="right">313,388</td></tr>
|
||||
<tr><td class="right">79.</td><td class="center">8.3</td><td><a href="http://www.imdb.com/title/tt0087843/">Once Upon a Time in America</a> (1984)</td><td class="right">129,414</td></tr>
|
||||
<tr><td class="right">80.</td><td class="center">8.3</td><td><a href="http://www.imdb.com/title/tt0086190/">Star Wars: Episode VI - Return of the Jedi</a> (1983)</td><td class="right">361,397</td></tr>
|
||||
<tr><td class="right">81.</td><td class="center">8.3</td><td><a href="http://www.imdb.com/title/tt0093058/">Full Metal Jacket</a> (1987)</td><td class="right">270,902</td></tr>
|
||||
<tr><td class="right">82.</td><td class="center">8.3</td><td><a href="http://www.imdb.com/title/tt0119488/">L.A. Confidential</a> (1997)</td><td class="right">264,295</td></tr>
|
||||
<tr><td class="right">83.</td><td class="center">8.3</td><td><a href="http://www.imdb.com/title/tt0071315/">Chinatown</a> (1974)</td><td class="right">130,976</td></tr>
|
||||
<tr><td class="right">84.</td><td class="center">8.3</td><td><a href="http://www.imdb.com/title/tt0112573/">Braveheart</a> (1995)</td><td class="right">426,632</td></tr>
|
||||
<tr><td class="right">85.</td><td class="center">8.3</td><td><a href="http://www.imdb.com/title/tt0364569/">Oldboy</a> (2003)</td><td class="right">189,333</td></tr>
|
||||
<tr><td class="right">86.</td><td class="center">8.3</td><td><a href="http://www.imdb.com/title/tt0071853/">Monty Python and the Holy Grail</a> (1975)</td><td class="right">239,427</td></tr>
|
||||
<tr><td class="right">87.</td><td class="center">8.3</td><td><a href="http://www.imdb.com/title/tt0045152/">Singin' in the Rain</a> (1952)</td><td class="right">89,152</td></tr>
|
||||
<tr><td class="right">88.</td><td class="center">8.3</td><td><a href="http://www.imdb.com/title/tt0053291/">Some Like It Hot</a> (1959)</td><td class="right">107,775</td></tr>
|
||||
<tr><td class="right">89.</td><td class="center">8.3</td><td><a href="http://www.imdb.com/title/tt0017136/">Metropolis</a> (1927)</td><td class="right">66,774</td></tr>
|
||||
<tr><td class="right">90.</td><td class="center">8.3</td><td><a href="http://www.imdb.com/title/tt0086879/">Amadeus</a> (1984)</td><td class="right">162,968</td></tr>
|
||||
<tr><td class="right">91.</td><td class="center">8.3</td><td><a href="http://www.imdb.com/title/tt0040522/">Bicycle Thieves</a> (1948)</td><td class="right">50,266</td></tr>
|
||||
<tr><td class="right">92.</td><td class="center">8.3</td><td><a href="http://www.imdb.com/title/tt0042876/">Rashomon</a> (1950)</td><td class="right">61,981</td></tr>
|
||||
<tr><td class="right">93.</td><td class="center">8.3</td><td><a href="http://www.imdb.com/title/tt0062622/">2001: A Space Odyssey</a> (1968)</td><td class="right">246,317</td></tr>
|
||||
<tr><td class="right">94.</td><td class="center">8.3</td><td><a href="http://www.imdb.com/title/tt0042192/">All About Eve</a> (1950)</td><td class="right">51,722</td></tr>
|
||||
<tr><td class="right">95.</td><td class="center">8.3</td><td><a href="http://www.imdb.com/title/tt0105695/">Unforgiven</a> (1992)</td><td class="right">169,421</td></tr>
|
||||
<tr><td class="right">96.</td><td class="center">8.3</td><td><a href="http://www.imdb.com/title/tt0070735/">The Sting</a> (1973)</td><td class="right">104,985</td></tr>
|
||||
<tr><td class="right">97.</td><td class="center">8.3</td><td><a href="http://www.imdb.com/title/tt0097576/">Indiana Jones and the Last Crusade</a> (1989)</td><td class="right">298,740</td></tr>
|
||||
<tr><td class="right">98.</td><td class="center">8.3</td><td><a href="http://www.imdb.com/title/tt0053604/">The Apartment</a> (1960)</td><td class="right">62,712</td></tr>
|
||||
<tr><td class="right">99.</td><td class="center">8.3</td><td><a href="http://www.imdb.com/title/tt0081398/">Raging Bull</a> (1980)</td><td class="right">144,339</td></tr>
|
||||
<tr><td class="right">100.</td><td class="center">8.3</td><td><a href="http://www.imdb.com/title/tt0050212/">The Bridge on the River Kwai</a> (1957)</td><td class="right">92,073</td></tr>
|
||||
<tr><td class="right">101.</td><td class="center">8.3</td><td><a href="http://www.imdb.com/title/tt0051201/">Witness for the Prosecution</a> (1957)</td><td class="right">31,562</td></tr>
|
||||
<tr><td class="right">102.</td><td class="center">8.3</td><td><a href="http://www.imdb.com/title/tt0095327/">Grave of the Fireflies</a> (1988)</td><td class="right">65,417</td></tr>
|
||||
<tr><td class="right">103.</td><td class="center">8.3</td><td><a href="http://www.imdb.com/title/tt0095016/">Die Hard</a> (1988)</td><td class="right">349,451</td></tr>
|
||||
<tr><td class="right">104.</td><td class="center">8.3</td><td><a href="http://www.imdb.com/title/tt0372784/">Batman Begins</a> (2005)</td><td class="right">535,306</td></tr>
|
||||
<tr><td class="right">105.</td><td class="center">8.3</td><td><a href="http://www.imdb.com/title/tt1832382/">A Separation</a> (2011)</td><td class="right">79,685</td></tr>
|
||||
<tr><td class="right">106.</td><td class="center">8.3</td><td><a href="http://www.imdb.com/title/tt0055630/">Yojimbo</a> (1961)</td><td class="right">44,988</td></tr>
|
||||
<tr><td class="right">107.</td><td class="center">8.3</td><td><a href="http://www.imdb.com/title/tt0208092/">Snatch.</a> (2000)</td><td class="right">344,587</td></tr>
|
||||
<tr><td class="right">108.</td><td class="center">8.3</td><td><a href="http://www.imdb.com/title/tt0361748/">Inglourious Basterds</a> (2009)</td><td class="right">436,200</td></tr>
|
||||
<tr><td class="right">109.</td><td class="center">8.3</td><td><a href="http://www.imdb.com/title/tt0059578/">For a Few Dollars More</a> (1965)</td><td class="right">83,738</td></tr>
|
||||
<tr><td class="right">110.</td><td class="center">8.3</td><td><a href="http://www.imdb.com/title/tt0363163/">Downfall</a> (2004)</td><td class="right">149,623</td></tr>
|
||||
<tr><td class="right">111.</td><td class="center">8.3</td><td><a href="http://www.imdb.com/title/tt0457430/">Pan's Labyrinth</a> (2006)</td><td class="right">277,965</td></tr>
|
||||
<tr><td class="right">112.</td><td class="center">8.2</td><td><a href="http://www.imdb.com/title/tt0057115/">The Great Escape</a> (1963)</td><td class="right">98,813</td></tr>
|
||||
<tr><td class="right">113.</td><td class="center">8.2</td><td><a href="http://www.imdb.com/title/tt0031679/">Mr. Smith Goes to Washington</a> (1939)</td><td class="right">49,357</td></tr>
|
||||
<tr><td class="right">114.</td><td class="center">8.2</td><td><a href="http://www.imdb.com/title/tt1049413/">Up</a> (2009)</td><td class="right">319,413</td></tr>
|
||||
<tr><td class="right">115.</td><td class="center">8.2</td><td><a href="http://www.imdb.com/title/tt0047296/">On the Waterfront</a> (1954)</td><td class="right">62,092</td></tr>
|
||||
<tr><td class="right">116.</td><td class="center">8.2</td><td><a href="http://www.imdb.com/title/tt0114709/">Toy Story</a> (1995)</td><td class="right">319,895</td></tr>
|
||||
<tr><td class="right">117.</td><td class="center">8.2</td><td><a href="http://www.imdb.com/title/tt0080678/">The Elephant Man</a> (1980)</td><td class="right">98,958</td></tr>
|
||||
<tr><td class="right">118.</td><td class="center">8.2</td><td><a href="http://www.imdb.com/title/tt0050976/">The Seventh Seal</a> (1957)</td><td class="right">66,074</td></tr>
|
||||
<tr><td class="right">119.</td><td class="center">8.2</td><td><a href="http://www.imdb.com/title/tt0113277/">Heat</a> (1995)</td><td class="right">261,142</td></tr>
|
||||
<tr><td class="right">120.</td><td class="center">8.2</td><td><a href="http://www.imdb.com/title/tt0017925/">The General</a> (1926)</td><td class="right">31,115</td></tr>
|
||||
<tr><td class="right">121.</td><td class="center">8.2</td><td><a href="http://www.imdb.com/title/tt0033870/">The Maltese Falcon</a> (1941)</td><td class="right">73,450</td></tr>
|
||||
<tr><td class="right">122.</td><td class="center">8.2</td><td><a href="http://www.imdb.com/title/tt0083658/">Blade Runner</a> (1982)</td><td class="right">293,867</td></tr>
|
||||
<tr><td class="right">123.</td><td class="center">8.2</td><td><a href="http://www.imdb.com/title/tt1205489/">Gran Torino</a> (2008)</td><td class="right">316,184</td></tr>
|
||||
<tr><td class="right">124.</td><td class="center">8.2</td><td><a href="http://www.imdb.com/title/tt0032976/">Rebecca</a> (1940)</td><td class="right">54,605</td></tr>
|
||||
<tr><td class="right">125.</td><td class="center">8.2</td><td><a href="http://www.imdb.com/title/tt0012349/">The Kid</a> (1921)</td><td class="right">30,188</td></tr>
|
||||
<tr><td class="right">126.</td><td class="center">8.2</td><td><a href="http://www.imdb.com/title/tt0050986/">Wild Strawberries</a> (1957)</td><td class="right">36,922</td></tr>
|
||||
<tr><td class="right">127.</td><td class="center">8.2</td><td><a href="http://www.imdb.com/title/tt0086250/">Scarface</a> (1983)</td><td class="right">301,908</td></tr>
|
||||
<tr><td class="right">128.</td><td class="center">8.2</td><td><a href="http://www.imdb.com/title/tt0116282/">Fargo</a> (1996)</td><td class="right">256,474</td></tr>
|
||||
<tr><td class="right">129.</td><td class="center">8.2</td><td><a href="http://www.imdb.com/title/tt0118715/">The Big Lebowski</a> (1998)</td><td class="right">308,325</td></tr>
|
||||
<tr><td class="right">130.</td><td class="center">8.2</td><td><a href="http://www.imdb.com/title/tt0052311/">Touch of Evil</a> (1958)</td><td class="right">47,592</td></tr>
|
||||
<tr><td class="right">131.</td><td class="center">8.2</td><td><a href="http://www.imdb.com/title/tt0089881/">Ran</a> (1985)</td><td class="right">50,064</td></tr>
|
||||
<tr><td class="right">132.</td><td class="center">8.2</td><td><a href="http://www.imdb.com/title/tt0077416/">The Deer Hunter</a> (1978)</td><td class="right">145,262</td></tr>
|
||||
<tr><td class="right">133.</td><td class="center">8.2</td><td><a href="http://www.imdb.com/title/tt0061512/">Cool Hand Luke</a> (1967)</td><td class="right">75,625</td></tr>
|
||||
<tr><td class="right">134.</td><td class="center">8.2</td><td><a href="http://www.imdb.com/title/tt0015864/">The Gold Rush</a> (1925)</td><td class="right">36,715</td></tr>
|
||||
<tr><td class="right">135.</td><td class="center">8.1</td><td><a href="http://www.imdb.com/title/tt0120735/">Lock, Stock and Two Smoking Barrels</a> (1998)</td><td class="right">244,635</td></tr>
|
||||
<tr><td class="right">136.</td><td class="center">8.1</td><td><a href="http://www.imdb.com/title/tt0401792/">Sin City</a> (2005)</td><td class="right">415,871</td></tr>
|
||||
<tr><td class="right">137.</td><td class="center">8.1</td><td><a href="http://www.imdb.com/title/tt0477348/">No Country for Old Men</a> (2007)</td><td class="right">353,912</td></tr>
|
||||
<tr><td class="right">138.</td><td class="center">8.1</td><td><a href="http://www.imdb.com/title/tt0025316/">It Happened One Night</a> (1934)</td><td class="right">38,738</td></tr>
|
||||
<tr><td class="right">139.</td><td class="center">8.1</td><td><a href="http://www.imdb.com/title/tt0044079/">Strangers on a Train</a> (1951)</td><td class="right">56,857</td></tr>
|
||||
<tr><td class="right">140.</td><td class="center">8.1</td><td><a href="http://www.imdb.com/title/tt0848228/">The Avengers</a> (2012)</td><td class="right">475,869</td></tr>
|
||||
<tr><td class="right">141.</td><td class="center">8.1</td><td><a href="http://www.imdb.com/title/tt0073195/">Jaws</a> (1975)</td><td class="right">236,363</td></tr>
|
||||
<tr><td class="right">142.</td><td class="center">8.1</td><td><a href="http://www.imdb.com/title/tt0167404/">The Sixth Sense</a> (1999)</td><td class="right">422,262</td></tr>
|
||||
<tr><td class="right">143.</td><td class="center">8.1</td><td><a href="http://www.imdb.com/title/tt0091763/">Platoon</a> (1986)</td><td class="right">180,937</td></tr>
|
||||
<tr><td class="right">144.</td><td class="center">8.1</td><td><a href="http://www.imdb.com/title/tt0112641/">Casino</a> (1995)</td><td class="right">192,252</td></tr>
|
||||
<tr><td class="right">145.</td><td class="center">8.1</td><td><a href="http://www.imdb.com/title/tt0084787/">The Thing</a> (1982)</td><td class="right">155,679</td></tr>
|
||||
<tr><td class="right">146.</td><td class="center">8.1</td><td><a href="http://www.imdb.com/title/tt0117951/">Trainspotting</a> (1996)</td><td class="right">273,789</td></tr>
|
||||
<tr><td class="right">147.</td><td class="center">8.1</td><td><a href="http://www.imdb.com/title/tt0044706/">High Noon</a> (1952)</td><td class="right">51,097</td></tr>
|
||||
<tr><td class="right">148.</td><td class="center">8.1</td><td><a href="http://www.imdb.com/title/tt0064115/">Butch Cassidy and the Sundance Kid</a> (1969)</td><td class="right">91,992</td></tr>
|
||||
<tr><td class="right">149.</td><td class="center">8.1</td><td><a href="http://www.imdb.com/title/tt0032138/">The Wizard of Oz</a> (1939)</td><td class="right">169,985</td></tr>
|
||||
<tr><td class="right">150.</td><td class="center">8.1</td><td><a href="http://www.imdb.com/title/tt0395169/">Hotel Rwanda</a> (2004)</td><td class="right">161,201</td></tr>
|
||||
<tr><td class="right">151.</td><td class="center">8.1</td><td><a href="http://www.imdb.com/title/tt0266697/">Kill Bill: Vol. 1</a> (2003)</td><td class="right">419,696</td></tr>
|
||||
<tr><td class="right">152.</td><td class="center">8.1</td><td><a href="http://www.imdb.com/title/tt0119217/">Good Will Hunting</a> (1997)</td><td class="right">312,846</td></tr>
|
||||
<tr><td class="right">153.</td><td class="center">8.1</td><td><a href="http://www.imdb.com/title/tt1291584/">Warrior</a> (2011)</td><td class="right">159,949</td></tr>
|
||||
<tr><td class="right">154.</td><td class="center">8.1</td><td><a href="http://www.imdb.com/title/tt1305806/">The Secret in Their Eyes</a> (2009)</td><td class="right">63,447</td></tr>
|
||||
<tr><td class="right">155.</td><td class="center">8.1</td><td><a href="http://www.imdb.com/title/tt0075686/">Annie Hall</a> (1977)</td><td class="right">112,605</td></tr>
|
||||
<tr><td class="right">156.</td><td class="center">8.1</td><td><a href="http://www.imdb.com/title/tt0031381/">Gone with the Wind</a> (1939)</td><td class="right">133,071</td></tr>
|
||||
<tr><td class="right">157.</td><td class="center">8.1</td><td><a href="http://www.imdb.com/title/tt0038787/">Notorious</a> (1946)</td><td class="right">47,266</td></tr>
|
||||
<tr><td class="right">158.</td><td class="center">8.1</td><td><a href="http://www.imdb.com/title/tt0032551/">The Grapes of Wrath</a> (1940)</td><td class="right">37,590</td></tr>
|
||||
<tr><td class="right">159.</td><td class="center">8.1</td><td><a href="http://www.imdb.com/title/tt0758758/">Into the Wild</a> (2007)</td><td class="right">226,286</td></tr>
|
||||
<tr><td class="right">160.</td><td class="center">8.1</td><td><a href="http://www.imdb.com/title/tt0096283/">My Neighbor Totoro</a> (1988)</td><td class="right">74,354</td></tr>
|
||||
<tr><td class="right">161.</td><td class="center">8.1</td><td><a href="http://www.imdb.com/title/tt0434409/">V for Vendetta</a> (2005)</td><td class="right">445,345</td></tr>
|
||||
<tr><td class="right">162.</td><td class="center">8.1</td><td><a href="http://www.imdb.com/title/tt0079470/">Life of Brian</a> (1979)</td><td class="right">163,492</td></tr>
|
||||
<tr><td class="right">163.</td><td class="center">8.1</td><td><a href="http://www.imdb.com/title/tt0266543/">Finding Nemo</a> (2003)</td><td class="right">351,617</td></tr>
|
||||
<tr><td class="right">164.</td><td class="center">8.1</td><td><a href="http://www.imdb.com/title/tt0892769/">How to Train Your Dragon</a> (2010)</td><td class="right">207,521</td></tr>
|
||||
<tr><td class="right">165.</td><td class="center">8.1</td><td><a href="http://www.imdb.com/title/tt0046912/">Dial M for Murder</a> (1954)</td><td class="right">57,132</td></tr>
|
||||
<tr><td class="right">166.</td><td class="center">8.1</td><td><a href="http://www.imdb.com/title/tt1504320/">The King's Speech</a> (2010)</td><td class="right">247,037</td></tr>
|
||||
<tr><td class="right">167.</td><td class="center">8.1</td><td><a href="http://www.imdb.com/title/tt0469494/">There Will Be Blood</a> (2007)</td><td class="right">224,943</td></tr>
|
||||
<tr><td class="right">168.</td><td class="center">8.1</td><td><a href="http://www.imdb.com/title/tt0052618/">Ben-Hur</a> (1959)</td><td class="right">95,091</td></tr>
|
||||
<tr><td class="right">169.</td><td class="center">8.1</td><td><a href="http://www.imdb.com/title/tt0088247/">The Terminator</a> (1984)</td><td class="right">334,304</td></tr>
|
||||
<tr><td class="right">170.</td><td class="center">8.1</td><td><a href="http://www.imdb.com/title/tt0038355/">The Big Sleep</a> (1946)</td><td class="right">42,449</td></tr>
|
||||
<tr><td class="right">171.</td><td class="center">8.1</td><td><a href="http://www.imdb.com/title/tt0074958/">Network</a> (1976)</td><td class="right">61,922</td></tr>
|
||||
<tr><td class="right">172.</td><td class="center">8.1</td><td><a href="http://www.imdb.com/title/tt0048424/">The Night of the Hunter</a> (1955)</td><td class="right">39,940</td></tr>
|
||||
<tr><td class="right">173.</td><td class="center">8.1</td><td><a href="http://www.imdb.com/title/tt0405159/">Million Dollar Baby</a> (2004)</td><td class="right">267,944</td></tr>
|
||||
<tr><td class="right">174.</td><td class="center">8.1</td><td><a href="http://www.imdb.com/title/tt0092005/">Stand by Me</a> (1986)</td><td class="right">159,982</td></tr>
|
||||
<tr><td class="right">175.</td><td class="center">8.1</td><td><a href="http://www.imdb.com/title/tt0107048/">Groundhog Day</a> (1993)</td><td class="right">250,675</td></tr>
|
||||
<tr><td class="right">176.</td><td class="center">8.1</td><td><a href="http://www.imdb.com/title/tt0246578/">Donnie Darko</a> (2001)</td><td class="right">358,003</td></tr>
|
||||
<tr><td class="right">177.</td><td class="center">8.1</td><td><a href="http://www.imdb.com/title/tt0903624/">The Hobbit: An Unexpected Journey</a> (2012)</td><td class="right">260,350</td></tr>
|
||||
<tr><td class="right">178.</td><td class="center">8.1</td><td><a href="http://www.imdb.com/title/tt0114746/">Twelve Monkeys</a> (1995)</td><td class="right">282,004</td></tr>
|
||||
<tr><td class="right">179.</td><td class="center">8.1</td><td><a href="http://www.imdb.com/title/tt0072890/">Dog Day Afternoon</a> (1975)</td><td class="right">111,658</td></tr>
|
||||
<tr><td class="right">180.</td><td class="center">8.1</td><td><a href="http://www.imdb.com/title/tt0947798/">Black Swan</a> (2010)</td><td class="right">325,866</td></tr>
|
||||
<tr><td class="right">181.</td><td class="center">8.1</td><td><a href="http://www.imdb.com/title/tt0245712/">Amores Perros</a> (2000)</td><td class="right">108,303</td></tr>
|
||||
<tr><td class="right">182.</td><td class="center">8.1</td><td><a href="http://www.imdb.com/title/tt0053198/">The 400 Blows</a> (1959)</td><td class="right">40,671</td></tr>
|
||||
<tr><td class="right">183.</td><td class="center">8.1</td><td><a href="http://www.imdb.com/title/tt0978762/">Mary and Max</a> (2009)</td><td class="right">57,268</td></tr>
|
||||
<tr><td class="right">184.</td><td class="center">8.1</td><td><a href="http://www.imdb.com/title/tt0440963/">The Bourne Ultimatum</a> (2007)</td><td class="right">285,964</td></tr>
|
||||
<tr><td class="right">185.</td><td class="center">8.1</td><td><a href="http://www.imdb.com/title/tt0454876/">Life of Pi</a> (2012)</td><td class="right">156,722</td></tr>
|
||||
<tr><td class="right">186.</td><td class="center">8.1</td><td><a href="http://www.imdb.com/title/tt0083987/">Gandhi</a> (1982)</td><td class="right">96,275</td></tr>
|
||||
<tr><td class="right">187.</td><td class="center">8.1</td><td><a href="http://www.imdb.com/title/tt0060827/">Persona</a> (1966)</td><td class="right">31,689</td></tr>
|
||||
<tr><td class="right">188.</td><td class="center">8.0</td><td><a href="http://www.imdb.com/title/tt0347149/">Howl's Moving Castle</a> (2004)</td><td class="right">104,225</td></tr>
|
||||
<tr><td class="right">189.</td><td class="center">8.0</td><td><a href="http://www.imdb.com/title/tt0049406/">The Killing</a> (1956)</td><td class="right">39,702</td></tr>
|
||||
<tr><td class="right">190.</td><td class="center">8.0</td><td><a href="http://www.imdb.com/title/tt0061722/">The Graduate</a> (1967)</td><td class="right">133,213</td></tr>
|
||||
<tr><td class="right">191.</td><td class="center">8.0</td><td><a href="http://www.imdb.com/title/tt0093779/">The Princess Bride</a> (1987)</td><td class="right">186,593</td></tr>
|
||||
<tr><td class="right">192.</td><td class="center">8.0</td><td><a href="http://www.imdb.com/title/tt0268978/">A Beautiful Mind</a> (2001)</td><td class="right">296,347</td></tr>
|
||||
<tr><td class="right">193.</td><td class="center">8.0</td><td><a href="http://www.imdb.com/title/tt0056801/">8½</a> (1963)</td><td class="right">48,845</td></tr>
|
||||
<tr><td class="right">194.</td><td class="center">8.0</td><td><a href="http://www.imdb.com/title/tt1010048/">Slumdog Millionaire</a> (2008)</td><td class="right">373,963</td></tr>
|
||||
<tr><td class="right">195.</td><td class="center">8.0</td><td><a href="http://www.imdb.com/title/tt0054997/">The Hustler</a> (1961)</td><td class="right">38,935</td></tr>
|
||||
<tr><td class="right">196.</td><td class="center">8.0</td><td><a href="http://www.imdb.com/title/tt0061184/">Who's Afraid of Virginia Woolf?</a> (1966)</td><td class="right">33,649</td></tr>
|
||||
<tr><td class="right">197.</td><td class="center">8.0</td><td><a href="http://www.imdb.com/title/tt0047528/">La strada</a> (1954)</td><td class="right">28,752</td></tr>
|
||||
<tr><td class="right">198.</td><td class="center">8.0</td><td><a href="http://www.imdb.com/title/tt0075148/">Rocky</a> (1976)</td><td class="right">193,474</td></tr>
|
||||
<tr><td class="right">199.</td><td class="center">8.0</td><td><a href="http://www.imdb.com/title/tt0056218/">The Manchurian Candidate</a> (1962)</td><td class="right">48,813</td></tr>
|
||||
<tr><td class="right">200.</td><td class="center">8.0</td><td><a href="http://www.imdb.com/title/tt0052561/">Anatomy of a Murder</a> (1959)</td><td class="right">28,092</td></tr>
|
||||
<tr><td class="right">201.</td><td class="center">8.0</td><td><a href="http://www.imdb.com/title/tt1655442/">The Artist</a> (2011/I)</td><td class="right">113,331</td></tr>
|
||||
<tr><td class="right">202.</td><td class="center">8.0</td><td><a href="http://www.imdb.com/title/tt0065214/">The Wild Bunch</a> (1969)</td><td class="right">46,187</td></tr>
|
||||
<tr><td class="right">203.</td><td class="center">8.0</td><td><a href="http://www.imdb.com/title/tt0070047/">The Exorcist</a> (1973)</td><td class="right">188,999</td></tr>
|
||||
<tr><td class="right">204.</td><td class="center">8.0</td><td><a href="http://www.imdb.com/title/tt0046359/">Stalag 17</a> (1953)</td><td class="right">30,022</td></tr>
|
||||
<tr><td class="right">205.</td><td class="center">8.0</td><td><a href="http://www.imdb.com/title/tt0040746/">Rope</a> (1948)</td><td class="right">57,554</td></tr>
|
||||
<tr><td class="right">206.</td><td class="center">8.0</td><td><a href="http://www.imdb.com/title/tt0056217/">The Man Who Shot Liberty Valance</a> (1962)</td><td class="right">35,292</td></tr>
|
||||
<tr><td class="right">207.</td><td class="center">8.0</td><td><a href="http://www.imdb.com/title/tt0072684/">Barry Lyndon</a> (1975)</td><td class="right">62,239</td></tr>
|
||||
<tr><td class="right">208.</td><td class="center">8.0</td><td><a href="http://www.imdb.com/title/tt0069281/">Sleuth</a> (1972)</td><td class="right">26,820</td></tr>
|
||||
<tr><td class="right">209.</td><td class="center">8.0</td><td><a href="http://www.imdb.com/title/tt0079944/">Stalker</a> (1979)</td><td class="right">38,428</td></tr>
|
||||
<tr><td class="right">210.</td><td class="center">8.0</td><td><a href="http://www.imdb.com/title/tt0338564/">Infernal Affairs</a> (2002)</td><td class="right">57,096</td></tr>
|
||||
<tr><td class="right">211.</td><td class="center">8.0</td><td><a href="http://www.imdb.com/title/tt0107207/">In the Name of the Father</a> (1993)</td><td class="right">54,640</td></tr>
|
||||
<tr><td class="right">212.</td><td class="center">8.0</td><td><a href="http://www.imdb.com/title/tt0120382/">The Truman Show</a> (1998)</td><td class="right">345,615</td></tr>
|
||||
<tr><td class="right">213.</td><td class="center">8.0</td><td><a href="http://www.imdb.com/title/tt0046250/">Roman Holiday</a> (1953)</td><td class="right">55,590</td></tr>
|
||||
<tr><td class="right">214.</td><td class="center">8.0</td><td><a href="http://www.imdb.com/title/tt0353969/">Memories of Murder</a> (2003)</td><td class="right">27,373</td></tr>
|
||||
<tr><td class="right">215.</td><td class="center">8.0</td><td><a href="http://www.imdb.com/title/tt0325980/">Pirates of the Caribbean: The Curse of the Black Pearl</a> (2003)</td><td class="right">457,277</td></tr>
|
||||
<tr><td class="right">216.</td><td class="center">8.0</td><td><a href="http://www.imdb.com/title/tt1136608/">District 9</a> (2009)</td><td class="right">332,916</td></tr>
|
||||
<tr><td class="right">217.</td><td class="center">8.0</td><td><a href="http://www.imdb.com/title/tt0198781/">Monsters, Inc.</a> (2001)</td><td class="right">277,654</td></tr>
|
||||
<tr><td class="right">218.</td><td class="center">8.0</td><td><a href="http://www.imdb.com/title/tt0058461/">A Fistful of Dollars</a> (1964)</td><td class="right">71,024</td></tr>
|
||||
<tr><td class="right">219.</td><td class="center">8.0</td><td><a href="http://www.imdb.com/title/tt1220719/">Ip Man</a> (2008)</td><td class="right">70,724</td></tr>
|
||||
<tr><td class="right">220.</td><td class="center">8.0</td><td><a href="http://www.imdb.com/title/tt0401383/">The Diving Bell and the Butterfly</a> (2007)</td><td class="right">61,322</td></tr>
|
||||
<tr><td class="right">221.</td><td class="center">8.0</td><td><a href="http://www.imdb.com/title/tt0382932/">Ratatouille</a> (2007)</td><td class="right">274,240</td></tr>
|
||||
<tr><td class="right">222.</td><td class="center">8.0</td><td><a href="http://www.imdb.com/title/tt1201607/">Harry Potter and the Deathly Hallows: Part 2</a> (2011)</td><td class="right">257,398</td></tr>
|
||||
<tr><td class="right">223.</td><td class="center">8.0</td><td><a href="http://www.imdb.com/title/tt0796366/">Star Trek</a> (2009)</td><td class="right">291,734</td></tr>
|
||||
<tr><td class="right">224.</td><td class="center">8.0</td><td><a href="http://www.imdb.com/title/tt0044081/">A Streetcar Named Desire</a> (1951)</td><td class="right">54,316</td></tr>
|
||||
<tr><td class="right">225.</td><td class="center">8.0</td><td><a href="http://www.imdb.com/title/tt1659337/">The Perks of Being a Wallflower</a> (2012)</td><td class="right">98,357</td></tr>
|
||||
<tr><td class="right">226.</td><td class="center">8.0</td><td><a href="http://www.imdb.com/title/tt0113247/">La Haine</a> (1995)</td><td class="right">54,972</td></tr>
|
||||
<tr><td class="right">227.</td><td class="center">8.0</td><td><a href="http://www.imdb.com/title/tt0101414/">Beauty and the Beast</a> (1991)</td><td class="right">163,508</td></tr>
|
||||
<tr><td class="right">228.</td><td class="center">8.0</td><td><a href="http://www.imdb.com/title/tt1130884/">Shutter Island</a> (2010)</td><td class="right">370,474</td></tr>
|
||||
<tr><td class="right">229.</td><td class="center">8.0</td><td><a href="http://www.imdb.com/title/tt1187043/">3 Idiots</a> (2009)</td><td class="right">63,883</td></tr>
|
||||
<tr><td class="right">230.</td><td class="center">8.0</td><td><a href="http://www.imdb.com/title/tt0020629/">All Quiet on the Western Front</a> (1930)</td><td class="right">34,318</td></tr>
|
||||
<tr><td class="right">231.</td><td class="center">8.0</td><td><a href="http://www.imdb.com/title/tt0063522/">Rosemary's Baby</a> (1968)</td><td class="right">91,657</td></tr>
|
||||
<tr><td class="right">232.</td><td class="center">8.0</td><td><a href="http://www.imdb.com/title/tt0087544/">Nausicaä of the Valley of the Wind</a> (1984)</td><td class="right">45,761</td></tr>
|
||||
<tr><td class="right">233.</td><td class="center">8.0</td><td><a href="http://www.imdb.com/title/tt0095953/">Rain Man</a> (1988)</td><td class="right">235,025</td></tr>
|
||||
<tr><td class="right">234.</td><td class="center">8.0</td><td><a href="http://www.imdb.com/title/tt0042546/">Harvey</a> (1950)</td><td class="right">33,525</td></tr>
|
||||
<tr><td class="right">235.</td><td class="center">8.0</td><td><a href="http://www.imdb.com/title/tt1255953/">Incendies</a> (2010)</td><td class="right">29,047</td></tr>
|
||||
<tr><td class="right">236.</td><td class="center">8.0</td><td><a href="http://www.imdb.com/title/tt0986264/">Like Stars on Earth</a> (2007)</td><td class="right">28,610</td></tr>
|
||||
<tr><td class="right">237.</td><td class="center">8.0</td><td><a href="http://www.imdb.com/title/tt0327056/">Mystic River</a> (2003)</td><td class="right">225,582</td></tr>
|
||||
<tr><td class="right">238.</td><td class="center">8.0</td><td><a href="http://www.imdb.com/title/tt0107290/">Jurassic Park</a> (1993)</td><td class="right">290,452</td></tr>
|
||||
<tr><td class="right">239.</td><td class="center">8.0</td><td><a href="http://www.imdb.com/title/tt0079522/">Manhattan</a> (1979)</td><td class="right">68,578</td></tr>
|
||||
<tr><td class="right">240.</td><td class="center">8.0</td><td><a href="http://www.imdb.com/title/tt0070511/">Papillon</a> (1973)</td><td class="right">53,163</td></tr>
|
||||
<tr><td class="right">241.</td><td class="center">8.0</td><td><a href="http://www.imdb.com/title/tt0374546/">Spring, Summer, Fall, Winter... and Spring</a> (2003)</td><td class="right">36,974</td></tr>
|
||||
<tr><td class="right">242.</td><td class="center">8.0</td><td><a href="http://www.imdb.com/title/tt1125849/">The Wrestler</a> (2008)</td><td class="right">187,480</td></tr>
|
||||
<tr><td class="right">243.</td><td class="center">8.0</td><td><a href="http://www.imdb.com/title/tt0013442/">Nosferatu</a> (1922)</td><td class="right">47,665</td></tr>
|
||||
<tr><td class="right">244.</td><td class="center">8.0</td><td><a href="http://www.imdb.com/title/tt1454029/">The Help</a> (2011)</td><td class="right">150,081</td></tr>
|
||||
<tr><td class="right">245.</td><td class="center">8.0</td><td><a href="http://www.imdb.com/title/tt0118694/">In the Mood for Love</a> (2000)</td><td class="right">43,683</td></tr>
|
||||
<tr><td class="right">246.</td><td class="center">8.0</td><td><a href="http://www.imdb.com/title/tt0319061/">Big Fish</a> (2003)</td><td class="right">253,904</td></tr>
|
||||
<tr><td class="right">247.</td><td class="center">7.9</td><td><a href="http://www.imdb.com/title/tt0094226/">The Untouchables</a> (1987)</td><td class="right">146,540</td></tr>
|
||||
<tr><td class="right">248.</td><td class="center">7.9</td><td><a href="http://www.imdb.com/title/tt0036613/">Arsenic and Old Lace</a> (1944)</td><td class="right">41,392</td></tr>
|
||||
<tr><td class="right">249.</td><td class="center">7.9</td><td><a href="http://www.imdb.com/title/tt0092067/">Castle in the Sky</a> (1986)</td><td class="right">47,537</td></tr>
|
||||
<tr><td class="right">250.</td><td class="center">7.9</td><td><a href="http://www.imdb.com/title/tt0053221/">Rio Bravo</a> (1959)</td><td class="right">29,442</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
</div>
|
||||
|
||||
<h1>Page Header</h1>
|
||||
<div>
|
||||
<pre class="prettyprint lang-html"><!-- tablesorter -->
|
||||
<link rel="stylesheet" href="../css/theme.blue.css">
|
||||
<script src="../js/jquery.tablesorter.js"></script>
|
||||
|
||||
<!-- load ignore-articles parser -->
|
||||
<script src="../js/parsers/parser-ignore-articles.js"></script>
|
||||
<script>
|
||||
$(function() {
|
||||
|
||||
$('table').tablesorter({
|
||||
theme: 'blue',
|
||||
widgets: ['zebra'],
|
||||
sortList: [[2, 0]],
|
||||
headers: {
|
||||
2: {
|
||||
sorter: 'ignoreArticles',
|
||||
ignoreArticles : 'fr'
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
});
|
||||
</script></pre>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body></html>
|
||||
136
assets/vendor/tablesorter/docs/example-parsers-ip-address.html
vendored
Normal file
136
assets/vendor/tablesorter/docs/example-parsers-ip-address.html
vendored
Normal file
@@ -0,0 +1,136 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery plugin: Tablesorter 2.0 - IP address parsers</title>
|
||||
|
||||
<!-- jQuery -->
|
||||
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
|
||||
|
||||
<!-- Demo stuff -->
|
||||
<link rel="stylesheet" href="css/jq.css">
|
||||
<link href="css/prettify.css" rel="stylesheet">
|
||||
<script src="js/prettify.js"></script>
|
||||
<script src="js/docs.js"></script>
|
||||
|
||||
<!-- Tablesorter: required -->
|
||||
<link rel="stylesheet" href="../css/theme.blue.css">
|
||||
<script src="../js/jquery.tablesorter.js"></script>
|
||||
|
||||
<script src="../js/parsers/parser-ipv6.js"></script>
|
||||
|
||||
<script id="js">$(function() {
|
||||
|
||||
$('table').tablesorter({
|
||||
theme: 'blue',
|
||||
widgets: ['zebra'],
|
||||
sortList: [[2, 0]],
|
||||
headers: {
|
||||
2: {
|
||||
sorter: 'ipv6Address'
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
});</script>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<div id="banner">
|
||||
<h1>table<em>sorter</em></h1>
|
||||
<h2>IPv4 & IPv6 address parsers</h2>
|
||||
<h3>Flexible client-side table sorting</h3>
|
||||
<a href="index.html">Back to documentation</a>
|
||||
</div>
|
||||
<div id="main">
|
||||
|
||||
<p class="tip">
|
||||
<em>NOTE!</em>
|
||||
<ul>
|
||||
<li>This parser can be applied to the original plugin.</li>
|
||||
<li>The default "ipAdress" parser (IPv4) is included with the original tablesorter.</li>
|
||||
<li>A parser for IPv6 was added in <span class="version">v2.12</span> and named "ipv6Address":
|
||||
<ul>
|
||||
<li>Unlike some other custom parsers, this one will auto-detect & check for a valid IPv6 address since the same address can be represented in many different ways. Some examples are shown in the demo table below.</li>
|
||||
<li>IPv6 addresses are stored in the cache in their canonical decimal form, without the colons, for faster & easier numerical sorting.</li>
|
||||
<li><a href="../test.html?testNumber=19">Extensive unit tests</a> are included with this parser.</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>If the parser doesn't auto-detect which column has IPv6 addresses, use the headers sorter option to set it:
|
||||
<pre class="prettyprint lang-javascript">$(function(){
|
||||
$('table').tablesorter({
|
||||
headers: {
|
||||
2: {
|
||||
sorter: 'ipv6Address'
|
||||
}
|
||||
}
|
||||
});
|
||||
});</pre>
|
||||
</li>
|
||||
</ul>
|
||||
</p>
|
||||
|
||||
<h1>Demo</h1>
|
||||
<button type="button" class="toggleparsedvalue">Toggle parsed values</button>
|
||||
<br>
|
||||
<div id="demo">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<td>Name</td>
|
||||
<td>IPv4</td>
|
||||
<td>IPv6</td>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>Fred</td><td>1.2.3.4</td><td>f0f0::1</td></tr>
|
||||
<tr><td>Ginger</td><td>1.1.1.1</td><td>f0::1</td></tr>
|
||||
<tr><td>Mike</td><td>2.222.33.44</td><td>1:2:3:4:5::7:8</td></tr>
|
||||
<tr><td>George</td><td>255.255.255.255</td><td>::2:3:4</td></tr>
|
||||
<tr><td>Harry</td><td>251.2.33.4</td><td>f0f0:f::1</td></tr>
|
||||
<tr><td>Frank</td><td>251.002.31.4</td><td>::</td></tr>
|
||||
<tr><td>Kristy</td><td>2.221.003.4</td><td>0:0:0:0:0:0:0:0</td></tr>
|
||||
<tr><td>Lily</td><td>251.02.32.4</td><td>f0f0::f:1</td></tr>
|
||||
<tr><td>Maria</td><td>1.2.3.44</td><td>1:2:3:4:5:6:1.2.3.4</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
</div>
|
||||
|
||||
<h1>Page Header</h1>
|
||||
<div>
|
||||
<pre class="prettyprint lang-html"><!-- tablesorter -->
|
||||
<link rel="stylesheet" href="../css/theme.blue.css">
|
||||
<script src="../js/jquery.tablesorter.js"></script>
|
||||
|
||||
<!-- load ipv6 parser -->
|
||||
<script src="../js/parsers/parser-ipv6.js"></script>
|
||||
<script>
|
||||
$(function() {
|
||||
|
||||
$('table').tablesorter({
|
||||
theme: 'blue',
|
||||
widgets: ['zebra'],
|
||||
sortList: [[1, 0]],
|
||||
headers: {
|
||||
1: {
|
||||
sorter: 'ipv6Address'
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
});
|
||||
</script></pre>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<script>
|
||||
$(function(){
|
||||
// add parsed values to columns [0,1]
|
||||
addParsedValues($('table'), [1,2]);
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
</body></html>
|
||||
119
assets/vendor/tablesorter/docs/example-parsers-jquery-data.html
vendored
Normal file
119
assets/vendor/tablesorter/docs/example-parsers-jquery-data.html
vendored
Normal file
@@ -0,0 +1,119 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery plugin: Tablesorter 2.0 - Disable or set the column parser using jQuery data</title>
|
||||
|
||||
<!-- jQuery -->
|
||||
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
|
||||
|
||||
<!-- Demo stuff -->
|
||||
<link rel="stylesheet" href="css/jq.css">
|
||||
<link href="css/prettify.css" rel="stylesheet">
|
||||
<script src="js/prettify.js"></script>
|
||||
<script src="js/docs.js"></script>
|
||||
|
||||
<!-- Tablesorter: required -->
|
||||
<link rel="stylesheet" href="../css/theme.blue.css">
|
||||
<script src="../js/jquery.tablesorter.js"></script>
|
||||
|
||||
<script id="js">$(function(){
|
||||
$("table").tablesorter({ theme: 'blue' });
|
||||
});</script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="banner">
|
||||
<h1>table<em>sorter</em></h1>
|
||||
<h2>Disable or set the column parser using jQuery data</h2>
|
||||
<h3>Flexible client-side table sorting</h3>
|
||||
<a href="index.html">Back to documentation</a>
|
||||
</div>
|
||||
<div id="main">
|
||||
|
||||
<p class="tip">
|
||||
<em>NOTE!</em> This functionality was added in version 2.2.3 (it is not part of the original plugin).
|
||||
</p>
|
||||
|
||||
<h1>Demo</h1>
|
||||
<div id="demo"><table class="tablesorter">
|
||||
<thead>
|
||||
<tr>
|
||||
<th data-sorter="text">First Name</th>
|
||||
<th data-sorter="text">Last Name</th>
|
||||
<th data-sorter="false">Age</th>
|
||||
<th data-sorter="currency" data-string="min">Total</th> <!-- data-string="min" treats strings in this numeric column as a large negative number -->
|
||||
<th data-sorter="percent" data-empty="top">Discount</th> <!-- data-empty="top" sorts empty cells to the top -->
|
||||
<th data-sorter="usLongDate">Date</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Peter</td>
|
||||
<td>Parker</td>
|
||||
<td>28</td>
|
||||
<td>($9.99)</td>
|
||||
<td>20%</td>
|
||||
<td>Jul 6, 2006 8:14 AM</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>John</td>
|
||||
<td></td>
|
||||
<td>33</td>
|
||||
<td>$19.99</td>
|
||||
<td>25%</td>
|
||||
<td>Dec 10, 2002 5:14 AM</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Clark</td>
|
||||
<td>Kent</td>
|
||||
<td>18</td>
|
||||
<td></td>
|
||||
<td>44%</td>
|
||||
<td>Jan 12, 2003 11:14 AM</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Bruce</td>
|
||||
<td>Almighty</td>
|
||||
<td>45</td>
|
||||
<td>$153.19</td>
|
||||
<td>44%</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Bruce</td>
|
||||
<td>Evans</td>
|
||||
<td>22</td>
|
||||
<td>N/A</td>
|
||||
<td></td>
|
||||
<td>Jan 18, 2007 9:12 AM</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td>Evans</td>
|
||||
<td>22</td>
|
||||
<td>$13.19</td>
|
||||
<td>11%</td>
|
||||
<td>Jan 18, 2007 9:12 AM</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table></div>
|
||||
|
||||
<h1>Javascript</h1>
|
||||
<div id="javascript">
|
||||
<pre class="prettyprint lang-javascript"></pre>
|
||||
</div>
|
||||
<h1>HTML</h1>
|
||||
<div id="html">
|
||||
<pre class="prettyprint lang-html"></pre>
|
||||
</div>
|
||||
|
||||
<div class="next-up">
|
||||
<hr />
|
||||
Next up: <a href="example-option-date-format.html">Changing the date format ››</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
123
assets/vendor/tablesorter/docs/example-parsers-metric.html
vendored
Normal file
123
assets/vendor/tablesorter/docs/example-parsers-metric.html
vendored
Normal file
@@ -0,0 +1,123 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery plugin: Tablesorter - Metric Parser</title>
|
||||
|
||||
<!-- jQuery -->
|
||||
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
|
||||
|
||||
<!-- Demo stuff -->
|
||||
<link rel="stylesheet" href="css/jq.css">
|
||||
<link href="css/prettify.css" rel="stylesheet">
|
||||
<script src="js/prettify.js"></script>
|
||||
<script src="js/docs.js"></script>
|
||||
<style>
|
||||
th { width: 20%; }
|
||||
</style>
|
||||
|
||||
<link href="../css/theme.blue.css" rel="stylesheet">
|
||||
<script src="../js/jquery.tablesorter.js"></script>
|
||||
|
||||
<!-- load metric parser -->
|
||||
<script src="../js/parsers/parser-metric.js"></script>
|
||||
|
||||
<script id="js">$(function() {
|
||||
|
||||
$("table").tablesorter({
|
||||
theme : 'blue',
|
||||
widgets : ["zebra"]
|
||||
});
|
||||
|
||||
});</script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="banner">
|
||||
<h1>table<em>sorter</em></h1>
|
||||
<h2>Metric parser</h2>
|
||||
<h3>Flexible client-side table sorting</h3>
|
||||
<a href="index.html">Back to documentation</a>
|
||||
</div>
|
||||
<div id="main">
|
||||
|
||||
<p class="tip">
|
||||
<em>NOTE!</em>
|
||||
<ul>
|
||||
<li>This parser will convert numbers with metric prefixes ("Mega", "Giga", etc) into appropriate values so they are sorted correctly.</li>
|
||||
<li>The base name must be included in the header:
|
||||
<ul>
|
||||
<li>The base is the unit of measure, such as "byte", "meter", "liter", etc.</li>
|
||||
<li>When saving the base, include both the abbreviation and full name of the base separated by a vertical bar (shift-\) <code>b|byte</code>.</li>
|
||||
<li>Store this information within the header's data-attribute (<code>data-metric-name="b|byte"</code>).</li>
|
||||
<li>If no base information is found, it will default to <code>m|meter</code>.</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>Because metric prefixes can be applied to binary values, the parser will calculate the cached value based on the binary multiple, i.e. <code>"1 kb"</code> is actually <code>"1024 bytes"</code>. See <a href="http://en.wikipedia.org/wiki/Unit_prefix#Binary_prefixes">this article</a> for more details.</li>
|
||||
<li>This parser does not (yet) support the IEC recommendations for binary prefixes (i.e. "kibibyte (Kib)", "mebibyte (MiB)", etc).</li>
|
||||
<li>Supported prefixes include: Yotta (10<sup>24</sup>), Zetta (10<sup>21</sup>), Exa (10<sup>18</sup>), Peta (10<sup>15</sup>), Tera (10<sup>12</sup>), Giga (10<sup>9</sup>), Mega (10<sup>6</sup>), kilo (10<sup>3</sup>), hecto (10<sup>2</sup>), deka (10<sup>1</sup>), deci (10<sup>-1</sup>), centi (10<sup>-2</sup>), milli (10<sup>-3</sup>), micro (10<sup>-6</sup>), nano (10<sup>-9</sup>), pico (10<sup>-12</sup>), femto (10<sup>-15</sup>), atto (10<sup>-18</sup>), zepto (10<sup>-21</sup>) and yocto (10<sup>-24</sup>).</li>
|
||||
<li>This demo includes the stored metric values within the table cells, toggle the view using the button below.</li>
|
||||
</ul>
|
||||
</p>
|
||||
|
||||
<h1>Demo</h1>
|
||||
<button type="button" class="toggleparsedvalue">Toggle parsed values</button>
|
||||
<div id="demo"><table class="tablesorter">
|
||||
<thead>
|
||||
<tr><th class="sorter-metric" data-metric-name="b|byte">Metric (binary) Size</th>
|
||||
<th class="sorter-metric" data-metric-name="m|meter">Metric Length</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>1 byte</td><td>1 nm</td></tr>
|
||||
<tr><td>1 kb</td><td>1 kilometer</td></tr>
|
||||
<tr><td>1 Gigabyte</td><td>1 Gm</td></tr>
|
||||
<tr><td>10 Mb</td><td>1 Tm</td></tr>
|
||||
<tr><td>1 Mb</td><td>1,000 mm</td></tr>
|
||||
<tr><td>1 Tb</td><td>1 meter</td></tr>
|
||||
<tr><td>1 Petabyte</td><td>1 hm</td></tr>
|
||||
<tr><td>1 Zb</td><td>1 dam</td></tr>
|
||||
<tr><td>1,025 Mb</td><td>1 Mm</td></tr>
|
||||
<tr><td>1,000 kilobytes</td><td>1 dm</td></tr>
|
||||
<tr><td>1 Eb</td><td>1 µm</td></tr>
|
||||
<tr><td>1023 Mb</td><td>1 pm</td></tr>
|
||||
</tbody>
|
||||
</table></div>
|
||||
|
||||
<h1>Page Header</h1>
|
||||
<div>
|
||||
<pre class="prettyprint lang-html"><!-- blue theme stylesheet with additional css styles added in v2.0.17 -->
|
||||
<link rel="stylesheet" href="../css/theme.blue.css">
|
||||
<!-- tablesorter plugin -->
|
||||
<script src="../js/jquery.tablesorter.js"></script>
|
||||
|
||||
<!-- load metric parser -->
|
||||
<script src="../js/parsers/parser-metric.js"></script>
|
||||
</div>
|
||||
|
||||
<h1>Javascript</h1>
|
||||
<div id="javascript">
|
||||
<pre class="prettyprint lang-javascript"></pre>
|
||||
</div>
|
||||
|
||||
<h1>HTML</h1>
|
||||
<div id="html">
|
||||
<pre class="prettyprint lang-html"></pre>
|
||||
</div>
|
||||
|
||||
<div class="next-up">
|
||||
<hr />
|
||||
Next up: <a href="example-widget-filter.html">Applying the filter widget ››</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<script>
|
||||
$(function(){
|
||||
// add parsed values to columns [0,1]
|
||||
addParsedValues($('table'), [0,1], function(num){ return num.toExponential(); });
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
170
assets/vendor/tablesorter/docs/example-parsers.html
vendored
Normal file
170
assets/vendor/tablesorter/docs/example-parsers.html
vendored
Normal file
@@ -0,0 +1,170 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery plugin: Tablesorter 2.0 - Writing custom parsers</title>
|
||||
|
||||
<!-- jQuery -->
|
||||
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
|
||||
|
||||
<!-- Demo stuff -->
|
||||
<link rel="stylesheet" href="css/jq.css">
|
||||
<link href="css/prettify.css" rel="stylesheet">
|
||||
<script src="js/prettify.js"></script>
|
||||
<script src="js/docs.js"></script>
|
||||
|
||||
<!-- Tablesorter: required -->
|
||||
<link rel="stylesheet" href="../css/theme.blue.css">
|
||||
<script src="../js/jquery.tablesorter.js"></script>
|
||||
<script src="../addons/pager/jquery.tablesorter.pager.js"></script>
|
||||
|
||||
<script id="js">// add parser through the tablesorter addParser method
|
||||
$.tablesorter.addParser({
|
||||
// set a unique id
|
||||
id: 'grades',
|
||||
is: function(s, table, cell) {
|
||||
// return false so this parser is not auto detected
|
||||
return false;
|
||||
},
|
||||
format: function(s, table, cell, cellIndex) {
|
||||
// format your data for normalization
|
||||
return s.toLowerCase()
|
||||
.replace(/good/,2)
|
||||
.replace(/medium/,1)
|
||||
.replace(/bad/,0);
|
||||
},
|
||||
// set type, either numeric or text
|
||||
type: 'numeric'
|
||||
});
|
||||
|
||||
$(function() {
|
||||
$("table").tablesorter({
|
||||
theme: 'blue'
|
||||
// "sorter-grades" added as a class name in the HTML (new in v2.0.11)
|
||||
// or un-comment out the option below
|
||||
// ,headers: { 6: { sorter: 'grades' } }
|
||||
});
|
||||
|
||||
});</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="banner">
|
||||
<h1>table<em>sorter</em></h1>
|
||||
<h2>Writing custom parsers</h2>
|
||||
<h3>Flexible client-side table sorting</h3>
|
||||
<a href="index.html">Back to documentation</a>
|
||||
</div>
|
||||
|
||||
<div id="main">
|
||||
|
||||
<div class="tip">
|
||||
Notes about the <code>addParser</code> template:
|
||||
<ul>
|
||||
<li>The <code>id</code> block is required and must be unique.</li>
|
||||
<li>The <code>is</code> block will allow the parser to be used for autodetecting the parser
|
||||
<ul>
|
||||
<li>Most custom parsers are made for a specific set of data/column, so the <code>is</code> block usually just returns false telling the plugin that the parser doesn't match any columns.</li>
|
||||
<li>If so desired, the function provides three parameters: <code>s</code> contains the text from the cell, <code>table</code> is the table DOM element and <code>cell</code> is the current cell DOM element.</li>
|
||||
<li>This function must <code>return true</code> before the plugin will use the custom parser's format block to process the column content.</li>
|
||||
<li>In version 2.7.4, the <code>is</code> block became optional because most parsers just return false.</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>The <code>format</code> block is used to normalize your data and return it to the plugin for sorting
|
||||
<ul>
|
||||
<li>Within this function, modify the given text from the cell (<code>s</code>) or obtain parameters and/or other data from the cell (<code>cell</code>) then return this data to the plugin.</li>
|
||||
<li>As an example, the date parser takes the date string (e.g. <code>"12/25/2013"</code>) and converts it into a numeric value (<code>1387951200000</code>; <a href="https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Date/getTime">ref</a>) to make sorting and comparing dates easier.</li>
|
||||
<li>Use the <code>cellIndex</code> if the cells within columns contain different data - see this demo for an example.</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>The <code>parsed</code> block (added <span class="version">v2.15.0</span>)
|
||||
<ul>
|
||||
<li>This parameter is a flag used by the filter widget.</li>
|
||||
<li>When <code>true</code>, the filter widget will only search through parsed data for matches.</li>
|
||||
<li>If <code>false</code> (default value), the filter widget will search through the cell text for matches.</li>
|
||||
<li>Currently, only the parsers for inputs, checkboxes and selects have this parameter set to <code>true</code>.</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>The <code>type</code> block sets the type of sort to use:
|
||||
<ul>
|
||||
<li>Set it to either <code>"text"</code> or <code>"numeric"</code>.</li>
|
||||
<li>This tells the plugin the type of sorter to use.</li>
|
||||
<li>Text type sorting uses a natural sort and is a tiny bit slower than a pure numeric sort.</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<h3>Add Parser Template</h3>
|
||||
<pre class="prettyprint lang-javascript">$.tablesorter.addParser({
|
||||
// use a unique id
|
||||
id: 'myparser',
|
||||
is: function(s, table, cell) {
|
||||
// s is the text from the cell
|
||||
// table is the current table (as a DOM element; not jQuery object)
|
||||
// cell is the current table cell (DOM element)
|
||||
// return false if you don't want this parser to be auto detected
|
||||
return false;
|
||||
},
|
||||
format: function(s, table, cell, cellIndex) {
|
||||
// s is the text from the cell
|
||||
// table is the current table (as a DOM element; not jQuery object)
|
||||
// cell is the current table cell (DOM element)
|
||||
// cellIndex is the current cell's column index
|
||||
// format your data for normalization
|
||||
// (i.e. do something to get and/or modify your data, then return it)
|
||||
return s;
|
||||
},
|
||||
// flag for filter widget (true = ALWAYS search parsed values; false = search cell text)
|
||||
parsed: false,
|
||||
// set the type to either numeric or text (text uses a natural sort function
|
||||
// so it will work for everything, but numeric is faster for numbers
|
||||
type: 'numeric'
|
||||
});</pre>
|
||||
|
||||
<h1>Demo</h1>
|
||||
<div id="demo"><table class="tablesorter">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="sorter-text">Name</th>
|
||||
<th>Major</th>
|
||||
<th>Gender</th>
|
||||
<th>English</th>
|
||||
<th>Japanese</th>
|
||||
<th>Calculus</th>
|
||||
<th class="sorter-grades">Overall grades</th> <!-- set the column parser using a class name -->
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>Student01</td><td>Languages</td><td>male</td><td>80</td><td>70</td><td>75</td><td>medium</td></tr>
|
||||
<tr><td>Student02</td><td>Mathematics</td><td>male</td><td>90</td><td>88</td><td>100</td><td>good</td></tr>
|
||||
<tr><td>Student03</td><td>Languages</td><td>female</td><td>85</td><td>95</td><td>80</td><td>good</td></tr>
|
||||
<tr><td>Student04</td><td>Languages</td><td>male</td><td>20</td><td>50</td><td>65</td><td>bad</td></tr>
|
||||
<tr><td>Student05</td><td>Mathematics</td><td>female</td><td>70</td><td>78</td><td>70</td><td>medium</td></tr>
|
||||
<tr><td>Student06</td><td>Mathematics</td><td>male</td><td>44</td><td>65</td><td>60</td><td>bad</td></tr>
|
||||
</tbody>
|
||||
</table></div>
|
||||
|
||||
<h1>Javascript</h1>
|
||||
<h3>Grades Parser Code</h3>
|
||||
<div id="javascript">
|
||||
<pre class="prettyprint lang-javascript"></pre>
|
||||
</div>
|
||||
<h1>HTML</h1>
|
||||
<p class="tip">
|
||||
<em>NOTE!</em> Assigning the parser using a class name was added in version 2.0.11 (it is not part of the original plugin; use the <code>headers</code> option in older versions).
|
||||
</p>
|
||||
<div id="html">
|
||||
<pre class="prettyprint lang-html"></pre>
|
||||
</div>
|
||||
|
||||
<div class="next-up">
|
||||
<hr />
|
||||
Next up: <a href="example-parsers-advanced.html">Writing custom parsers, advanced ››</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
134
assets/vendor/tablesorter/docs/example-trigger-sort.html
vendored
Normal file
134
assets/vendor/tablesorter/docs/example-trigger-sort.html
vendored
Normal file
@@ -0,0 +1,134 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery plugin: Tablesorter 2.0 - Sort table using a link outside the table</title>
|
||||
|
||||
<!-- jQuery -->
|
||||
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
|
||||
|
||||
<!-- Demo stuff -->
|
||||
<link rel="stylesheet" href="css/jq.css">
|
||||
<link href="css/prettify.css" rel="stylesheet">
|
||||
<script src="js/prettify.js"></script>
|
||||
<script src="js/docs.js"></script>
|
||||
|
||||
<!-- Tablesorter: required -->
|
||||
<link rel="stylesheet" href="../css/theme.blue.css">
|
||||
<script src="../js/jquery.tablesorter.js"></script>
|
||||
<script src="../addons/pager/jquery.tablesorter.pager.js"></script>
|
||||
|
||||
<script id="js">$(function() {
|
||||
|
||||
$("table").tablesorter({ theme: 'blue' });
|
||||
|
||||
// ****************************************
|
||||
// sort the "First Name" and "Age" columns
|
||||
// ****************************************
|
||||
$("#trigger-link").click(function() {
|
||||
// set sorting column and direction, this will sort on the
|
||||
// first and third column the column index starts at zero
|
||||
var sorting = [[0,0],[2,0]];
|
||||
// sort on the first column and third columns
|
||||
$("table").trigger("sorton",[sorting]);
|
||||
// return false to stop default link action
|
||||
return false;
|
||||
});
|
||||
|
||||
// ****************************************
|
||||
// toggle the sort on the 5th column
|
||||
// (Discount) - New in v2.9!
|
||||
// ****************************************
|
||||
$("#toggle-link").click(function() {
|
||||
$("table thead").find("th:eq(4)").trigger("sort");
|
||||
return false;
|
||||
});
|
||||
|
||||
});</script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="banner">
|
||||
<h1>table<em>sorter</em></h1>
|
||||
<h2>Sort table using a link outside the table</h2>
|
||||
<h3>Flexible client-side table sorting</h3>
|
||||
<a href="index.html">Back to documentation</a>
|
||||
</div>
|
||||
<div id="main">
|
||||
<h1>Demo</h1>
|
||||
<div id="demo"><table class="tablesorter">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>First Name</th>
|
||||
<th>Last Name</th>
|
||||
<th>Age</th>
|
||||
<th>Total</th>
|
||||
<th>Discount</th>
|
||||
<th>Date</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Peter</td>
|
||||
<td>Parker</td>
|
||||
<td>28</td>
|
||||
<td>$9.99</td>
|
||||
<td>20%</td>
|
||||
<td>Jul 6, 2006 8:14 AM</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>John</td>
|
||||
<td>Hood</td>
|
||||
<td>33</td>
|
||||
<td>$19.99</td>
|
||||
<td>25%</td>
|
||||
<td>Dec 10, 2002 5:14 AM</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Clark</td>
|
||||
<td>Kent</td>
|
||||
<td>18</td>
|
||||
<td>$15.89</td>
|
||||
<td>44%</td>
|
||||
<td>Jan 12, 2003 11:14 AM</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Bruce</td>
|
||||
<td>Almighty</td>
|
||||
<td>45</td>
|
||||
<td>$153.19</td>
|
||||
<td>44%</td>
|
||||
<td>Jan 18, 2001 9:12 AM</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Bruce</td>
|
||||
<td>Evans</td>
|
||||
<td>22</td>
|
||||
<td>$13.19</td>
|
||||
<td>11%</td>
|
||||
<td>Jan 18, 2007 9:12 AM</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<a href="#" id="trigger-link">Sort first and third columns</a> |
|
||||
<a href="#" id="toggle-link">Toggle sort on the "Discount" column</a> (v2.9)
|
||||
</div>
|
||||
|
||||
<h1>Javascript</h1>
|
||||
<div id="javascript">
|
||||
<pre class="prettyprint lang-javascript"></pre>
|
||||
</div>
|
||||
<h1>HTML</h1>
|
||||
<div id="html">
|
||||
<pre class="prettyprint lang-html"></pre>
|
||||
</div>
|
||||
|
||||
<div class="next-up">
|
||||
<hr />
|
||||
Next up: <a href="example-option-sort-force.html">Force a default sorting order ››</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
1111
assets/vendor/tablesorter/docs/example-triggers.html
vendored
Normal file
1111
assets/vendor/tablesorter/docs/example-triggers.html
vendored
Normal file
File diff suppressed because it is too large
Load Diff
114
assets/vendor/tablesorter/docs/example-update-all.html
vendored
Normal file
114
assets/vendor/tablesorter/docs/example-update-all.html
vendored
Normal file
@@ -0,0 +1,114 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery plugin: Tablesorter 2.0 - Update headers & table body (updateAll)</title>
|
||||
|
||||
<!-- jQuery -->
|
||||
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
|
||||
|
||||
<!-- Demo stuff -->
|
||||
<link rel="stylesheet" href="css/jq.css">
|
||||
<link href="css/prettify.css" rel="stylesheet">
|
||||
<script src="js/prettify.js"></script>
|
||||
<script src="js/docs.js"></script>
|
||||
|
||||
<!-- Tablesorter: required -->
|
||||
<link rel="stylesheet" href="../css/theme.blue.css">
|
||||
<script src="../js/jquery.tablesorter.js"></script>
|
||||
|
||||
<script id="js">$(function() {
|
||||
|
||||
// Set up empty table with second and first columns pre-sorted
|
||||
$("table").tablesorter({ theme : 'blue', sortList: [[2,0]] });
|
||||
|
||||
|
||||
var indx = 0;
|
||||
$("#update").on('click', function() {
|
||||
|
||||
// prevent link from removing all data from the column
|
||||
if (indx++ < 2) {
|
||||
|
||||
// append new html to thead & tbody
|
||||
$("table thead th:eq(2)").html("Age");
|
||||
$("table tbody").find('td:nth-child(3)').html(function(i,h){
|
||||
return h.substring(1); // remove x & y prefix
|
||||
});
|
||||
|
||||
var resort = true, // re-apply the current sort
|
||||
callback = function(){
|
||||
// do something after the updateAll method has completed
|
||||
};
|
||||
|
||||
// let the plugin know that we made a update, then the plugin will
|
||||
// automatically sort the table based on the header settings
|
||||
$("table").trigger("updateAll", [ resort, callback ]);
|
||||
|
||||
}
|
||||
return false;
|
||||
});
|
||||
|
||||
});</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="banner">
|
||||
<h1>table<em>sorter</em></h1>
|
||||
<h2>Update headers & table body (updateAll)</h2>
|
||||
<h3>Flexible client-side table sorting</h3>
|
||||
<a href="index.html">Back to documentation</a>
|
||||
</div>
|
||||
|
||||
<div id="main">
|
||||
|
||||
<p class="tip">
|
||||
<em>NOTE!</em>
|
||||
<ul>
|
||||
<li>This demo uses the <code>updateAll</code> method (<span class="version">v2.8</span>).</li>
|
||||
<li>This method allows you to update the cache with data from both the <code>thead</code> and <code>tbody</code> of the table.</li>
|
||||
<li>The <code>update</code> method only updates the cache from the <code>tbody</code>.</li>
|
||||
</ul>
|
||||
</p>
|
||||
|
||||
<h1>Demo</h1>
|
||||
<div id="demo"><table class="tablesorter">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>First Name</th>
|
||||
<th>Last Name</th>
|
||||
<th>Value</th>
|
||||
<th>Total</th>
|
||||
<th>Discount</th>
|
||||
<th>Date</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>Peter</td><td>Parker</td><td>x28</td><td>$9.99</td><td>20%</td><td>Jul 6, 2006 8:14 AM</td></tr>
|
||||
<tr><td>John</td><td>Hood</td><td>y33</td><td>$19.99</td><td>25%</td><td>Dec 10, 2002 5:14 AM</td></tr>
|
||||
<tr><td>Clark</td><td>Kent</td><td>y18</td><td>$15.89</td><td>44%</td><td>Jan 12, 2003 11:14 AM</td></tr>
|
||||
<tr><td>Bruce</td><td>Almighty</td><td>x45</td><td>$153.19</td><td>44%</td><td>Jan 18, 2001 9:12 AM</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<a href="#" id="update">Modify the entire value column</a>
|
||||
</div>
|
||||
|
||||
<h1>Javascript</h1>
|
||||
<div id="javascript">
|
||||
<pre class="prettyprint lang-javascript"></pre>
|
||||
</div>
|
||||
<h1>HTML</h1>
|
||||
<div id="html">
|
||||
<pre class="prettyprint lang-html"></pre>
|
||||
|
||||
<div class="next-up">
|
||||
<hr />
|
||||
Next up: <a href="example-update-cell.html">Update the table after cell content has changed ››</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
138
assets/vendor/tablesorter/docs/example-update-cell.html
vendored
Normal file
138
assets/vendor/tablesorter/docs/example-update-cell.html
vendored
Normal file
@@ -0,0 +1,138 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery plugin: Tablesorter 2.0 - Updating a table cell</title>
|
||||
|
||||
<!-- jQuery -->
|
||||
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
|
||||
|
||||
<!-- Demo stuff -->
|
||||
<link rel="stylesheet" href="css/jq.css">
|
||||
<link href="css/prettify.css" rel="stylesheet">
|
||||
<script src="js/prettify.js"></script>
|
||||
<script src="js/docs.js"></script>
|
||||
|
||||
<!-- Tablesorter: required -->
|
||||
<link rel="stylesheet" href="../css/theme.blue.css">
|
||||
<script src="../js/jquery.tablesorter.js"></script>
|
||||
|
||||
<style>
|
||||
.discount { cursor: pointer; }
|
||||
</style>
|
||||
|
||||
<script id="js">$(function() {
|
||||
|
||||
$("table").tablesorter({ theme: 'blue', sortList: [[3,1],[0,0]] });
|
||||
|
||||
$("table tbody td.discount").click(function() {
|
||||
|
||||
// randomize a number
|
||||
var resort = "", // resort variable set to anything BUT false (without quotes) will trigger the automatic resort
|
||||
discount = '$' + Math.round(Math.random() * Math.random() * 100) + '.' + ('0' + Math.round(Math.random() * Math.random() * 100)).slice(-2),
|
||||
callback = function(table){ /* do something */ };
|
||||
$(this).text(discount);
|
||||
|
||||
// set resort flag to false to prevent automatic resort
|
||||
// leave the resort flag as undefined, or with any other value, to automatically resort the table
|
||||
$("table").trigger("updateCell",[this, resort, callback]);
|
||||
|
||||
return false;
|
||||
});
|
||||
|
||||
});</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="banner">
|
||||
<h1>table<em>sorter</em></h1>
|
||||
<h2>Updating a table cell</h2>
|
||||
<h3>Flexible client-side table sorting</h3>
|
||||
<a href="index.html">Back to documentation</a>
|
||||
</div>
|
||||
|
||||
<div id="main">
|
||||
|
||||
<p class="tip">
|
||||
<em>NOTE!</em>
|
||||
<ul>
|
||||
<li>Click on any value in the Total column to change it to a random amount.</li>
|
||||
<li>This option is part of the original plugin.</li>
|
||||
<li>Automatic resorting after "updateCell" is triggered was added in version 2.0.14.</li>
|
||||
</ul>
|
||||
</p>
|
||||
|
||||
<h1>Demo</h1>
|
||||
<div id="demo"><table class="tablesorter">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>First Name</th>
|
||||
<th>Last Name</th>
|
||||
<th>Age</th>
|
||||
<th>Total</th>
|
||||
<th>Discount</th>
|
||||
<th>Date</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Peter</td>
|
||||
<td>Parker</td>
|
||||
<td>28</td>
|
||||
<td class="discount">$9.99</td>
|
||||
<td>20%</td>
|
||||
<td>Jul 6, 2006 8:14 AM</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>John</td>
|
||||
<td>Hood</td>
|
||||
<td>33</td>
|
||||
<td class="discount">$19.99</td>
|
||||
<td>25%</td>
|
||||
<td>Dec 10, 2002 5:14 AM</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Clark</td>
|
||||
<td>Kent</td>
|
||||
<td>18</td>
|
||||
<td class="discount">$15.89</td>
|
||||
<td>44%</td>
|
||||
<td>Jan 12, 2003 11:14 AM</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Bruce</td>
|
||||
<td>Almighty</td>
|
||||
<td>45</td>
|
||||
<td class="discount">$153.19</td>
|
||||
<td>44%</td>
|
||||
<td>Jan 18, 2001 9:12 AM</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Bruce</td>
|
||||
<td>Evans</td>
|
||||
<td>22</td>
|
||||
<td class="discount">$13.19</td>
|
||||
<td>11%</td>
|
||||
<td>Jan 18, 2007 9:12 AM</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table></div>
|
||||
|
||||
<h1>Javascript</h1>
|
||||
<div id="javascript">
|
||||
<pre class="prettyprint lang-javascript"></pre>
|
||||
</div>
|
||||
<h1>HTML</h1>
|
||||
<div id="html">
|
||||
<pre class="prettyprint lang-html"></pre>
|
||||
</div>
|
||||
|
||||
<div class="next-up">
|
||||
<hr />
|
||||
Next up: <a href="example-option-render-header.html">Modify how the header is rendered to allow for custom styling ››</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
452
assets/vendor/tablesorter/docs/example-widget-align-character.html
vendored
Normal file
452
assets/vendor/tablesorter/docs/example-widget-align-character.html
vendored
Normal file
@@ -0,0 +1,452 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery plugin: Tablesorter 2.0 - Align Character Widget (beta)</title>
|
||||
|
||||
<!-- jQuery -->
|
||||
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
|
||||
|
||||
<!-- Demo stuff -->
|
||||
<link rel="stylesheet" href="css/jq.css">
|
||||
<link href="css/prettify.css" rel="stylesheet">
|
||||
<link class="ui-theme" rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/cupertino/jquery-ui.css">
|
||||
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
|
||||
<script src="js/prettify.js"></script>
|
||||
<script src="js/docs.js"></script>
|
||||
|
||||
<!-- Tablesorter: required -->
|
||||
<link rel="stylesheet" href="../css/theme.blue.css">
|
||||
<script src="../js/jquery.tablesorter.js"></script>
|
||||
<script src="../js/jquery.tablesorter.widgets.js"></script>
|
||||
|
||||
<script src="../js/widgets/widget-alignChar.js"></script>
|
||||
|
||||
<style>
|
||||
/* demo stuff */
|
||||
.accordion th:nth-child(2) {
|
||||
width: 140px;
|
||||
}
|
||||
#demo th {
|
||||
width: 25%;
|
||||
}
|
||||
</style>
|
||||
|
||||
<style id="css">/* CSS needed for this widget */
|
||||
.ts-align-wrap {
|
||||
white-space: nowrap;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
.ts-align-wrap, .ts-align-left, .ts-align-right {
|
||||
display: inline-block;
|
||||
-moz-box-sizing: border-box;
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.ts-align-left {
|
||||
text-align:right;
|
||||
}
|
||||
.ts-align-right {
|
||||
text-align:left;
|
||||
}
|
||||
/* optional - colorize alignment character in Animals column */
|
||||
td:nth-child(3) .ts-align-right i {
|
||||
color: red;
|
||||
}</style>
|
||||
|
||||
<script id="js">$(function() {
|
||||
|
||||
$("table").tablesorter({
|
||||
theme: 'blue',
|
||||
widgets: ['zebra', 'alignChar'],
|
||||
widgetOptions : {
|
||||
alignChar_wrap : '<i/>',
|
||||
alignChar_charAttrib : 'data-align-char',
|
||||
alignChar_indexAttrib : 'data-align-index',
|
||||
alignChar_adjustAttrib : 'data-align-adjust' // percentage width adjustments
|
||||
}
|
||||
});
|
||||
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body id="align">
|
||||
|
||||
<div id="banner">
|
||||
<h1>table<em>sorter</em></h1>
|
||||
<h2>Align Character Widget (beta)</h2>
|
||||
<h3>Flexible client-side table sorting</h3>
|
||||
<a href="index.html">Back to documentation</a>
|
||||
</div>
|
||||
|
||||
<div id="main">
|
||||
|
||||
<p></p>
|
||||
<br>
|
||||
|
||||
<div class="accordion">
|
||||
|
||||
<h3><a href="#">Notes</a></h3>
|
||||
<div>
|
||||
<ul>
|
||||
<li>This widget will <strong>only work</strong> in tablesorter version 2.8+ and jQuery version 1.7+.</li>
|
||||
<li>The widget is still in "beta", so options & functionality may change without warning; and, it has not been thoroughly tested!</li>
|
||||
<li>Make sure to include the CSS shown below to maintain the alignment.</li>
|
||||
<li><span class="label warning">*NOTE*</span> if the table cell becomes too narrow, the alignment <strong>will not</strong> be maintained & some content may overflow into the next/previous cell (the widget css does include <code>overflow:hidden</code> on the wrapper, so some content will be hidden instead of overflowing).</li>
|
||||
<li>Until the day that <code>text-align: '.';</code> becomes standard (<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/text-align">ref</a>), if ever, this widget might prove useful.</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<h3><a href="#">Options</a></h3>
|
||||
<div>
|
||||
<h3>Align Character (alignChar) widget default options (added inside of tablesorter <code>widgetOptions</code>)</h3>
|
||||
<table class="tablesorter-blue">
|
||||
<colgroup><col style="width:135px"></colgroup>
|
||||
<thead>
|
||||
<tr><th>Option</th><th>Default</th><th class="sorter-false">Description</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><a href="#" class="permalink">alignChar_wrap</a></td>
|
||||
<td><code>''</code></td>
|
||||
<td>
|
||||
This option allows you to wrap the alignment character in any HTML:
|
||||
<div class="collapsible">
|
||||
<br>
|
||||
When the widget completes the alignment, it is basically splitting the content of the table cell into two halves, and wrapping it in a span element. Below is an example of a modified cell showing all contents; it's from the "Animals" column (the cell that contains "Ox = stinky")
|
||||
<pre class="prettyprint lang-html"><td>
|
||||
<span class="ts-align-wrap">
|
||||
<span class="ts-align-left" style="min-width:37%">Ox&nbsp;</span>
|
||||
<span class="ts-align-right" style="min-width:63%">=&nbsp;stinky</span>
|
||||
</span>
|
||||
</td></pre>
|
||||
When this option is set with some HTML:
|
||||
<br><pre class="prettyprint lang-js">alignChar_wrap : '<i/>'</pre>
|
||||
it results in this layout:
|
||||
<pre class="prettyprint lang-html"><td>
|
||||
<span class="ts-align-wrap">
|
||||
<span class="ts-align-left" style="min-width:37%">Ox&nbsp;</span>
|
||||
<span class="ts-align-right" style="min-width:63%">
|
||||
<i>=</i>&nbsp;stinky
|
||||
</span>
|
||||
</span>
|
||||
</td></pre>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a href="#" class="permalink">alignChar_charAttrib</a></td>
|
||||
<td><code>'data-align-char'</code></td>
|
||||
<td>
|
||||
This option points to the header data-attribute which contains the desired alignment character.
|
||||
<div class="collapsible">
|
||||
<br>
|
||||
Add it to the header as follows:
|
||||
<pre class="prettyprint lang-html"><th data-align-char=".">Numeric</th></pre>
|
||||
The <code>data-align-char</code> data-attribute contains the actual character to align. There is no default alignment character, so if this data-attribute is undefined, the column will be ignored.<br>
|
||||
<br>
|
||||
<span class="label warning">*NOTE*</span> if wanting to align the content on a space (see the "AlphaNumeric" column), use <code>&nbsp;</code> instead of a regular space because all spaces within the content are replaced by non-breaking spaces.
|
||||
<pre class="prettyprint lang-html"><th data-align-char="&nbsp;">AlphaNumeric</th></pre>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a href="#" class="permalink">alignChar_indexAttrib</a></td>
|
||||
<td><code>'data-align-index'</code></td>
|
||||
<td>This option points to the header data-attribute which contains the desired alignment character index (<strong>one-based index</strong>).
|
||||
<div class="collapsible">
|
||||
<ul>
|
||||
<li>What that means is if your data has multiple periods, like in the URLs of the sites column below, you can tell the widget which period to line-up on.</li>
|
||||
<li>The alignment may seem to act incorrectly, if your data doesn't have enough periods to line up on, but it's doing the best it can! For example, in the sites column below, a table cell contains <code>"rental.nytimes.com/index.html"</code>. This URL has three periods, while all other cells in that column only contain two. When the <code>data-align-index</code> is set to <code>"3"</code>, the widget aligns the content on that third period. All of the other columns only have two, so they all align on their last period. Does that make it clear?</li>
|
||||
<li>Try adjusting the sliders in this demo to change the <code>data-align-index</code> of the "Animals" and "Sites" columns to see how this works.</li>
|
||||
</ul>
|
||||
Add this attribute to the header as follows:
|
||||
<pre class="prettyprint lang-html"><th data-align-char="=" data-align-index="1">Animals</th></pre>
|
||||
The <code>data-align-index</code> data-attribute contains the actual character index. The index defaults to "1" if this data-attribute is undefined.
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a href="#" class="permalink">alignChar_adjustAttrib</a></td>
|
||||
<td><code>'data-align-adjust'</code></td>
|
||||
<td>This option allows you to tweak the horizontal position of the aligned cell content.
|
||||
<div class="collapsible">
|
||||
<ul>
|
||||
<li>Here is an example of a modified cell showing its contents; it's from the "Numeric" column (the cell that contains "87.20000"):
|
||||
<pre class="prettyprint lang-html"><td>
|
||||
<span class="ts-align-wrap">
|
||||
<span class="ts-align-left" style="min-width:36%">87</span>
|
||||
<span class="ts-align-right" style="min-width:64%">.20000</span>
|
||||
</span>
|
||||
</td></pre>As you can see, the "87" (integer-part) is in a "ts-align-left" span, set with a <code>text-align: right;</code> (it's on the left, but right aligned)<br>
|
||||
The ".20000" (fractional-part) is in a "ts-align-right" span, set with a <code>text-align: left;</code> (opposite of the other one)!<br>
|
||||
</li>
|
||||
<li>So in the above example, the left side is set to a width of "36%" and the right to "64%" (adding up to 100%), which "sort-of" centers the aligned character.</li>
|
||||
<li>If you don't want to move the position of the aligned character, you can set the <code>data-align-adjust</code> data-attribute with a percentage change. This value (positive or negative) will be added to the "ts-align-left" span, and subtracted from the "ts-align-right" span.</li>
|
||||
<li>Try adjusting the sliders in this demo to change the <code>data-align-adjust</code> of the "Sites" column to see how this works.</li>
|
||||
</ul>
|
||||
Add this attribute to the header as follows:
|
||||
<pre class="prettyprint lang-html"><th data-align-char="." data-align-adjust="10">Numeric</th></pre>
|
||||
The <code>data-align-adjust</code> data-attribute contains a percentage value (without the percent sign). The adjustment defaults to "0" if this data-attribute is undefined.
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<h3><a href="#">CSS</a></h3>
|
||||
<div>
|
||||
The following is *required* css. Without it, the alignment will be all wrong.
|
||||
<div id="css">
|
||||
<pre class="prettyprint lang-css"></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<p></p>
|
||||
|
||||
<h1>Demo</h1>
|
||||
|
||||
<span class="demo-label">Animals align index:</span> <div id="slider0"></div> <span class="bright">1</span> (only indexes of 1 or 2 will work)<br>
|
||||
<span class="demo-label">Sites align index:</span> <div id="slider1"></div> <span class="bright">1</span> (only indexes of 1 - 3 will work<br>
|
||||
<span class="demo-label">Sites adjust value:</span> <div id="slider2"></div> <span class="bright">0</span>
|
||||
|
||||
<div id="demo"><table class="tablesorter">
|
||||
<thead>
|
||||
<tr>
|
||||
<th data-align-char=" ">AlphaNumeric</th>
|
||||
<th data-align-char="." data-align-adjust="0">Numeric</th>
|
||||
<th data-align-char="=" data-align-index="1">Animals</th>
|
||||
<th data-align-char="." data-align-index="1">Sites</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>abc 123</td>
|
||||
<td>.423475</td>
|
||||
<td>Koala = cute = cudley</td>
|
||||
<td>search.google.com</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>abc 1</td>
|
||||
<td>23.4</td>
|
||||
<td>Ox = stinky</td>
|
||||
<td>mail.yahoo.com</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>abc 9</td>
|
||||
<td>1.0</td>
|
||||
<td>Girafee = tall</td>
|
||||
<td>http://www.facebook.com</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>zyx 24</td>
|
||||
<td>7.67</td>
|
||||
<td>Bison = burger</td>
|
||||
<td>http://internship.whitehouse.gov/</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>abc 11</td>
|
||||
<td>3000</td>
|
||||
<td>Chimp = banana lover</td>
|
||||
<td>about.ucla.edu/</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>abc 2</td>
|
||||
<td>56.5</td>
|
||||
<td>Elephant = unforgetable</td>
|
||||
<td>http://www.wikipedia.org/</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>abc 9</td>
|
||||
<td>15.5</td>
|
||||
<td>Lion = rawr</td>
|
||||
<td>rental.nytimes.com/index.html</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>ABC 10</td>
|
||||
<td>87.20000</td>
|
||||
<td>Zebra = stripey</td>
|
||||
<td>http://android.google.com</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>zyx 1</td>
|
||||
<td>999.1</td>
|
||||
<td>Koala = cute, again!</td>
|
||||
<td>http://irsmrt.mit.edu/</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>zyx 12</td>
|
||||
<td>0.2</td>
|
||||
<td>Llama = llove it</td>
|
||||
<td>http://aliens.nasa.gov/</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table></div>
|
||||
|
||||
<h1>Page Header</h1>
|
||||
<div>
|
||||
<pre class="prettyprint lang-html"><!-- Tablesorter: required -->
|
||||
<link href="../css/theme.blue.css" rel="stylesheet">
|
||||
<script src="../js/jquery.tablesorter.js"></script>
|
||||
<script src="../js/jquery.tablesorter.widgets.js"></script>
|
||||
|
||||
<!-- Align Character widget -->
|
||||
<script src="../js/widgets/widget-alignChar.js"></script></pre>
|
||||
</div>
|
||||
|
||||
<h1>Script</h1>
|
||||
<div id="javascript">
|
||||
<pre class="prettyprint lang-js"></pre>
|
||||
</div>
|
||||
|
||||
<h1>CSS</h1>
|
||||
<div id="css">
|
||||
<pre class="prettyprint lang-css"></pre>
|
||||
</div>
|
||||
|
||||
<h1>HTML</h1>
|
||||
<div>
|
||||
<pre class="prettyprint lang-html"><table class="tablesorter">
|
||||
<thead>
|
||||
<tr>
|
||||
<th data-align-char="&nbsp;">AlphaNumeric</th>
|
||||
<th data-align-char="." data-align-adjust="0">Numeric</th>
|
||||
<th data-align-char="=" data-align-index="1">Animals</th>
|
||||
<th data-align-char="." data-align-index="1">Sites</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>abc 123</td>
|
||||
<td>.423475</td>
|
||||
<td>Koala = cute = cudley</td>
|
||||
<td>search.google.com</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>abc 1</td>
|
||||
<td>23.4</td>
|
||||
<td>Ox = stinky</td>
|
||||
<td>mail.yahoo.com</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>abc 9</td>
|
||||
<td>1.0</td>
|
||||
<td>Girafee = tall</td>
|
||||
<td>http://www.facebook.com</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>zyx 24</td>
|
||||
<td>7.67</td>
|
||||
<td>Bison = burger</td>
|
||||
<td>http://internship.whitehouse.gov/</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>abc 11</td>
|
||||
<td>3000</td>
|
||||
<td>Chimp = banana lover</td>
|
||||
<td>about.ucla.edu/</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>abc 2</td>
|
||||
<td>56.5</td>
|
||||
<td>Elephant = unforgetable</td>
|
||||
<td>http://www.wikipedia.org/</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>abc 9</td>
|
||||
<td>15.5</td>
|
||||
<td>Lion = rawr</td>
|
||||
<td>rental.nytimes.com/index.html</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>ABC 10</td>
|
||||
<td>87.20000</td>
|
||||
<td>Zebra = stripey</td>
|
||||
<td>http://android.google.com</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>zyx 1</td>
|
||||
<td>999.1</td>
|
||||
<td>Koala = cute, again!</td>
|
||||
<td>http://irsmrt.mit.edu/</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>zyx 12</td>
|
||||
<td>0.2</td>
|
||||
<td>Llama = llove it</td>
|
||||
<td>http://aliens.nasa.gov/</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table></pre>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<script>
|
||||
/* DEMO ONLY CODE */
|
||||
$(function(){
|
||||
var $table = $('#demo table'),
|
||||
c = $table[0].config,
|
||||
$animals = c.$headers.eq(2),
|
||||
$sites = c.$headers.eq(3);
|
||||
$animals.find('.tablesorter-header-inner')[0].innerHTML += ' ( "data-align-index" : <span></span> )';
|
||||
$sites.find('.tablesorter-header-inner')[0].innerHTML += ' ( "data-align-index" : <span></span>, "data-align-adjust" : <span></span> )';
|
||||
$( "#slider0" ).slider({
|
||||
value: 1,
|
||||
min: 0,
|
||||
max: 3,
|
||||
step: 1,
|
||||
create: function(){
|
||||
$animals.find('span').html( $animals.attr('data-align-index') );
|
||||
},
|
||||
slide: function( event, ui ) {
|
||||
$animals
|
||||
.attr('data-align-index', ui.value)
|
||||
.find('span').html( ui.value );
|
||||
$('.bright:eq(0)').html( ui.value );
|
||||
$table.trigger('refreshAlign');
|
||||
}
|
||||
});
|
||||
$( "#slider1" ).slider({
|
||||
value: 1,
|
||||
min: 0,
|
||||
max: 4,
|
||||
step: 1,
|
||||
create: function(){
|
||||
$sites.find('span').html( $sites.attr('data-align-index') );
|
||||
},
|
||||
slide: function( event, ui ) {
|
||||
$sites
|
||||
.attr('data-align-index', ui.value)
|
||||
.find('span:eq(0)').html( ui.value );
|
||||
$('.bright:eq(1)').html( ui.value );
|
||||
$table.trigger('refreshAlign');
|
||||
}
|
||||
});
|
||||
$( "#slider2" ).slider({
|
||||
value: 0,
|
||||
min: -30,
|
||||
max: 30,
|
||||
step: 5,
|
||||
create: function(){
|
||||
$sites.find('span').html( $sites.attr('data-align-index') );
|
||||
},
|
||||
slide: function( event, ui ) {
|
||||
$sites
|
||||
.attr('data-align-adjust', ui.value)
|
||||
.find('span:eq(1)').html( ui.value );
|
||||
$('.bright:eq(2)').html( ui.value );
|
||||
$table.trigger('refreshAlign');
|
||||
}
|
||||
});
|
||||
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
310
assets/vendor/tablesorter/docs/example-widget-bootstrap-theme.html
vendored
Normal file
310
assets/vendor/tablesorter/docs/example-widget-bootstrap-theme.html
vendored
Normal file
@@ -0,0 +1,310 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery plugin: Tablesorter 2.0 - jQuery UITheme Widget (Bootstrap)</title>
|
||||
|
||||
<!-- jQuery -->
|
||||
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
|
||||
|
||||
<!-- Demo stuff -->
|
||||
<link rel="stylesheet" href="css/jq.css">
|
||||
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
|
||||
<link href="css/prettify.css" rel="stylesheet">
|
||||
<script src="js/prettify.js"></script>
|
||||
<script src="js/docs.js"></script>
|
||||
|
||||
<!-- Tablesorter: required for bootstrap -->
|
||||
<link rel="stylesheet" href="../css/theme.bootstrap.css">
|
||||
<script src="../js/jquery.tablesorter.js"></script>
|
||||
<script src="../js/jquery.tablesorter.widgets.js"></script>
|
||||
|
||||
<!-- Tablesorter: optional -->
|
||||
<link rel="stylesheet" href="../addons/pager/jquery.tablesorter.pager.css">
|
||||
<script src="../addons/pager/jquery.tablesorter.pager.js"></script>
|
||||
|
||||
<script id="js">$(function() {
|
||||
|
||||
$.extend($.tablesorter.themes.bootstrap, {
|
||||
// these classes are added to the table. To see other table classes available,
|
||||
// look here: http://twitter.github.com/bootstrap/base-css.html#tables
|
||||
table : 'table table-bordered',
|
||||
caption : 'caption',
|
||||
header : 'bootstrap-header', // give the header a gradient background
|
||||
footerRow : '',
|
||||
footerCells: '',
|
||||
icons : '', // add "icon-white" to make them white; this icon class is added to the <i> in the header
|
||||
sortNone : 'bootstrap-icon-unsorted',
|
||||
sortAsc : 'icon-chevron-up glyphicon glyphicon-chevron-up', // includes classes for Bootstrap v2 & v3
|
||||
sortDesc : 'icon-chevron-down glyphicon glyphicon-chevron-down', // includes classes for Bootstrap v2 & v3
|
||||
active : '', // applied when column is sorted
|
||||
hover : '', // use custom css here - bootstrap class may not override it
|
||||
filterRow : '', // filter row class
|
||||
even : '', // odd row zebra striping
|
||||
odd : '' // even row zebra striping
|
||||
});
|
||||
|
||||
// call the tablesorter plugin and apply the uitheme widget
|
||||
$("table").tablesorter({
|
||||
// this will apply the bootstrap theme if "uitheme" widget is included
|
||||
// the widgetOptions.uitheme is no longer required to be set
|
||||
theme : "bootstrap",
|
||||
|
||||
widthFixed: true,
|
||||
|
||||
headerTemplate : '{content} {icon}', // new in v2.7. Needed to add the bootstrap icon!
|
||||
|
||||
// widget code contained in the jquery.tablesorter.widgets.js file
|
||||
// use the zebra stripe widget if you plan on hiding any rows (filter widget)
|
||||
widgets : [ "uitheme", "filter", "zebra" ],
|
||||
|
||||
widgetOptions : {
|
||||
// using the default zebra striping class name, so it actually isn't included in the theme variable above
|
||||
// this is ONLY needed for bootstrap theming if you are using the filter widget, because rows are hidden
|
||||
zebra : ["even", "odd"],
|
||||
|
||||
// reset filters button
|
||||
filter_reset : ".reset"
|
||||
|
||||
// set the uitheme widget to use the bootstrap theme class names
|
||||
// this is no longer required, if theme is set
|
||||
// ,uitheme : "bootstrap"
|
||||
|
||||
}
|
||||
})
|
||||
.tablesorterPager({
|
||||
|
||||
// target the pager markup - see the HTML block below
|
||||
container: $(".ts-pager"),
|
||||
|
||||
// target the pager page select dropdown - choose a page
|
||||
cssGoto : ".pagenum",
|
||||
|
||||
// remove rows from the table to speed up the sort of large tables.
|
||||
// setting this to false, only hides the non-visible rows; needed if you plan to add/remove rows with the pager enabled.
|
||||
removeRows: false,
|
||||
|
||||
// output string - default is '{page}/{totalPages}';
|
||||
// possible variables: {page}, {totalPages}, {filteredPages}, {startRow}, {endRow}, {filteredRows} and {totalRows}
|
||||
output: '{startRow} - {endRow} / {filteredRows} ({totalRows})'
|
||||
|
||||
});
|
||||
|
||||
});</script>
|
||||
|
||||
<script>
|
||||
$(function(){
|
||||
|
||||
// filter button demo code
|
||||
$('button.filter').click(function(){
|
||||
var col = $(this).data('column'),
|
||||
txt = $(this).data('filter');
|
||||
$('table').find('.tablesorter-filter').val('').eq(col).val(txt);
|
||||
$('table').trigger('search', false);
|
||||
return false;
|
||||
});
|
||||
|
||||
// toggle zebra widget
|
||||
$('button.zebra').click(function(){
|
||||
var t = $(this).hasClass('btn-success');
|
||||
// if (t) {
|
||||
// removing classes applied by the zebra widget
|
||||
// you shouldn't ever need to use this code, it is only for this demo
|
||||
// $('table').find('tr').removeClass('odd even');
|
||||
// }
|
||||
$('table')
|
||||
.toggleClass('table-striped')[0]
|
||||
.config.widgets = (t) ? ["uitheme", "filter"] : ["uitheme", "filter", "zebra"];
|
||||
$(this)
|
||||
.toggleClass('btn-danger btn-success')
|
||||
.find('i')
|
||||
.toggleClass('icon-ok icon-remove glyphicon-ok glyphicon-remove').end()
|
||||
.find('span')
|
||||
.text(t ? 'disabled' : 'enabled');
|
||||
$('table').trigger('refreshWidgets', [false]);
|
||||
return false;
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="banner">
|
||||
<h1>table<em>sorter</em></h1>
|
||||
<h2>jQuery UITheme Widget (Bootstrap)</h2>
|
||||
<h3>Flexible client-side table sorting</h3>
|
||||
<a href="index.html">Back to documentation</a>
|
||||
</div>
|
||||
|
||||
<div id="main">
|
||||
|
||||
<p class="tip">
|
||||
<span class="label label-info">NOTE!</span>
|
||||
<ul>
|
||||
<li><span class="label label-success">New!</span>In tablesorter v2.11+, The bootstrap theme now works with Bootstrap 3 and older versions.
|
||||
<ul>
|
||||
<li>Note the changes to the sorting icons in the <code>$.tablesorter.themes.bootstrap</code> defaults below.</li>
|
||||
<li>Just use the appropriate icon class name (<code>icon-{name}</code> for Bootstrap v2, and <code>glyphicon glyphicon-{name}</code> for Bootstrap v3.</li>
|
||||
<li>And of course include the necessary Bootstrap image or font).</li>
|
||||
<li>Wrapped all of the <code>pager</code> controls in the tfoot within a div (don't use the class name <code>pager</code> as it adds a lot of padding) to keep the controls from being centered.</li>
|
||||
<li>Pager control buttons in the tfoot have class names needed for both Bootstrap v2+ and v3, so there's no need for you to use both, just use the ones you need.</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>As of tablesorter version 2.9+, this widget can no longer be applied to versions of tablesorter prior to version 2.8.</li>
|
||||
<li>Make sure to include the <code>{icon}</code> in the <code>headerTemplate</code> to add a sorting arrow to the headers.</li>
|
||||
<li>Added in v2.7!
|
||||
<ul>
|
||||
<li>You will need to modify the <code>headerTemplate</code> option to include the bootstrap icon! See the example in the code.</li>
|
||||
<li>Setting <code>theme</code> option to <code>"Bootstrap"</code> will now override/ignore the <code>uitheme</code> value in the <code>widgetOptions</code>.</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>In tablesorter v2.4, the <code>uitheme</code> option has changed to indicate the theme instead of an array of icons to use:
|
||||
<ul>
|
||||
<li>All theme class names are now contained within <code>$.tablesorter.themes</code> with the Bootstrap theme saved to <code>$.tablesorter.themes.bootstrap</code>.</li>
|
||||
<li>The themes variable allows you to modify the class names for the table, header, sort icons, active state, hover state, filter inputs and zebra striping. See the code below on how to extend these variables.</li>
|
||||
<li>Set the <del><code>uitheme</code> widget</del> <code>theme</code> option (changed in v2.7) to <code>"bootstrap"</code> to set the widget to use the Bootstrap theme. See the <a href="example-widget-ui-theme.html">jQuery UI demo</a> for another example.</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>This demo shows how to get around an issue with the filter widget:
|
||||
<ul>
|
||||
<li>The <span class="label label-info">zebra widget button</span> below was added to show that when bootstrap's "table-striped" class is applied, the css defined zebra striping will not apply correctly because table rows are hidden but still accounted for by the css <code>nth-child()</code> selector.</li>
|
||||
<li>To better understand this issue, disable the zebra widget (using the toggle button). Now <button type="button" class="filter btn btn-small btn-primary" data-column="5" data-filter=">80"><i class="icon-white icon-filter glyphicon glyphicon-filter"></i> Filter ">80"</button> in the "Calculus" column.</li>
|
||||
<li>Try other filter searches with the zebra widget disabled, like <button type="button" class="filter btn btn-small btn-primary" data-column="2" data-filter="male"><i class="icon-white icon-filter glyphicon glyphicon-filter"></i> Filter "male"</button> in the "Sex" column.</li>
|
||||
<li>To solve this issue, just enable the zebra widget and the "even" and "odd" row class names <del>will</del> should over-ride the <code>nth-child()</code> styling.<br><span class="label label-warning">NOTE!</span> This doesn't seem to work in the latest Bootstrap version, so you'll have to remove the "table-striped" class completely from the table.</li>
|
||||
<li>The only down side is that for custom bootstrap themes, you'll need to edit the "theme.bootstrap.css" file for bootstrap.</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>This demo uses HTML5 data attributes and therefore needs jQuery 1.4+.</li>
|
||||
</ul>
|
||||
</p>
|
||||
|
||||
<h1>Demo</h1>
|
||||
<!-- use the filter_reset : '.reset' option or include data-filter="" using the filter button demo code to reset the filters -->
|
||||
<div class="bootstrap_buttons">
|
||||
Reset filter : <button type="button" class="reset btn btn-primary" data-column="0" data-filter=""><i class="icon-white icon-refresh glyphicon glyphicon-refresh"></i> Reset filters</button>
|
||||
<br>
|
||||
Zebra widget : <button type="button" class="zebra btn btn-success"><i class="icon-white icon-ok glyphicon glyphicon-ok"></i> <span>enabled</span></button>
|
||||
</div>
|
||||
<br>
|
||||
|
||||
<div id="demo"><table class="tablesorter">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Major</th>
|
||||
<th class="filter-select filter-exact" data-placeholder="Pick a gender">Sex</th>
|
||||
<th>English</th>
|
||||
<th>Japanese</th>
|
||||
<th>Calculus</th>
|
||||
<th>Geometry</th></tr>
|
||||
</thead>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Major</th>
|
||||
<th>Sex</th>
|
||||
<th>English</th>
|
||||
<th>Japanese</th>
|
||||
<th>Calculus</th>
|
||||
<th>Geometry</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th colspan="7" class="ts-pager form-horizontal">
|
||||
<button type="button" class="btn first"><i class="icon-step-backward glyphicon glyphicon-step-backward"></i></button>
|
||||
<button type="button" class="btn prev"><i class="icon-arrow-left glyphicon glyphicon-backward"></i></button>
|
||||
<span class="pagedisplay"></span> <!-- this can be any element, including an input -->
|
||||
<button type="button" class="btn next"><i class="icon-arrow-right glyphicon glyphicon-forward"></i></button>
|
||||
<button type="button" class="btn last"><i class="icon-step-forward glyphicon glyphicon-step-forward"></i></button>
|
||||
<select class="pagesize input-mini" title="Select page size">
|
||||
<option selected="selected" value="10">10</option>
|
||||
<option value="20">20</option>
|
||||
<option value="30">30</option>
|
||||
<option value="40">40</option>
|
||||
</select>
|
||||
<select class="pagenum input-mini" title="Select page number"></select>
|
||||
</th>
|
||||
</tr>
|
||||
</tfoot>
|
||||
<tbody>
|
||||
<tr><td>Student01</td><td>Languages</td><td>male</td><td>80</td><td>70</td><td>75</td><td>80</td></tr>
|
||||
<tr><td>Student02</td><td>Mathematics</td><td>male</td><td>90</td><td>88</td><td>100</td><td>90</td></tr>
|
||||
<tr><td>Student03</td><td>Languages</td><td>female</td><td>85</td><td>95</td><td>80</td><td>85</td></tr>
|
||||
<tr><td>Student04</td><td>Languages</td><td>male</td><td>60</td><td>55</td><td>100</td><td>100</td></tr>
|
||||
<tr><td>Student05</td><td>Languages</td><td>female</td><td>68</td><td>80</td><td>95</td><td>80</td></tr>
|
||||
<tr><td>Student06</td><td>Mathematics</td><td>male</td><td>100</td><td>99</td><td>100</td><td>90</td></tr>
|
||||
<tr><td>Student07</td><td>Mathematics</td><td>male</td><td>85</td><td>68</td><td>90</td><td>90</td></tr>
|
||||
<tr><td>Student08</td><td>Languages</td><td>male</td><td>100</td><td>90</td><td>90</td><td>85</td></tr>
|
||||
<tr><td>Student09</td><td>Mathematics</td><td>male</td><td>80</td><td>50</td><td>65</td><td>75</td></tr>
|
||||
<tr><td>Student10</td><td>Languages</td><td>male</td><td>85</td><td>100</td><td>100</td><td>90</td></tr>
|
||||
<tr><td>Student11</td><td>Languages</td><td>male</td><td>86</td><td>85</td><td>100</td><td>100</td></tr>
|
||||
<tr><td>Student12</td><td>Mathematics</td><td>female</td><td>100</td><td>75</td><td>70</td><td>85</td></tr>
|
||||
<tr><td>Student13</td><td>Languages</td><td>female</td><td>100</td><td>80</td><td>100</td><td>90</td></tr>
|
||||
<tr><td>Student14</td><td>Languages</td><td>female</td><td>50</td><td>45</td><td>55</td><td>90</td></tr>
|
||||
<tr><td>Student15</td><td>Languages</td><td>male</td><td>95</td><td>35</td><td>100</td><td>90</td></tr>
|
||||
<tr><td>Student16</td><td>Languages</td><td>female</td><td>100</td><td>50</td><td>30</td><td>70</td></tr>
|
||||
<tr><td>Student17</td><td>Languages</td><td>female</td><td>80</td><td>100</td><td>55</td><td>65</td></tr>
|
||||
<tr><td>Student18</td><td>Mathematics</td><td>male</td><td>30</td><td>49</td><td>55</td><td>75</td></tr>
|
||||
<tr><td>Student19</td><td>Languages</td><td>male</td><td>68</td><td>90</td><td>88</td><td>70</td></tr>
|
||||
<tr><td>Student20</td><td>Mathematics</td><td>male</td><td>40</td><td>45</td><td>40</td><td>80</td></tr>
|
||||
<tr><td>Student21</td><td>Languages</td><td>male</td><td>50</td><td>45</td><td>100</td><td>100</td></tr>
|
||||
<tr><td>Student22</td><td>Mathematics</td><td>male</td><td>100</td><td>99</td><td>100</td><td>90</td></tr>
|
||||
<tr><td>Student23</td><td>Mathematics</td><td>male</td><td>82</td><td>77</td><td>0</td><td>79</td></tr>
|
||||
<tr><td>Student24</td><td>Languages</td><td>female</td><td>100</td><td>91</td><td>13</td><td>82</td></tr>
|
||||
<tr><td>Student25</td><td>Mathematics</td><td>male</td><td>22</td><td>96</td><td>82</td><td>53</td></tr>
|
||||
<tr><td>Student26</td><td>Languages</td><td>female</td><td>37</td><td>29</td><td>56</td><td>59</td></tr>
|
||||
<tr><td>Student27</td><td>Mathematics</td><td>male</td><td>86</td><td>82</td><td>69</td><td>23</td></tr>
|
||||
<tr><td>Student28</td><td>Languages</td><td>female</td><td>44</td><td>25</td><td>43</td><td>1</td></tr>
|
||||
<tr><td>Student29</td><td>Mathematics</td><td>male</td><td>77</td><td>47</td><td>22</td><td>38</td></tr>
|
||||
<tr><td>Student30</td><td>Languages</td><td>female</td><td>19</td><td>35</td><td>23</td><td>10</td></tr>
|
||||
<tr><td>Student31</td><td>Mathematics</td><td>male</td><td>90</td><td>27</td><td>17</td><td>50</td></tr>
|
||||
<tr><td>Student32</td><td>Languages</td><td>female</td><td>60</td><td>75</td><td>33</td><td>38</td></tr>
|
||||
<tr><td>Student33</td><td>Mathematics</td><td>male</td><td>4</td><td>31</td><td>37</td><td>15</td></tr>
|
||||
<tr><td>Student34</td><td>Languages</td><td>female</td><td>77</td><td>97</td><td>81</td><td>44</td></tr>
|
||||
<tr><td>Student35</td><td>Mathematics</td><td>male</td><td>5</td><td>81</td><td>51</td><td>95</td></tr>
|
||||
<tr><td>Student36</td><td>Languages</td><td>female</td><td>70</td><td>61</td><td>70</td><td>94</td></tr>
|
||||
<tr><td>Student37</td><td>Mathematics</td><td>male</td><td>60</td><td>3</td><td>61</td><td>84</td></tr>
|
||||
<tr><td>Student38</td><td>Languages</td><td>female</td><td>63</td><td>39</td><td>0</td><td>11</td></tr>
|
||||
<tr><td>Student39</td><td>Mathematics</td><td>male</td><td>50</td><td>46</td><td>32</td><td>38</td></tr>
|
||||
<tr><td>Student40</td><td>Languages</td><td>female</td><td>51</td><td>75</td><td>25</td><td>3</td></tr>
|
||||
<tr><td>Student41</td><td>Mathematics</td><td>male</td><td>43</td><td>34</td><td>28</td><td>78</td></tr>
|
||||
<tr><td>Student42</td><td>Languages</td><td>female</td><td>11</td><td>89</td><td>60</td><td>95</td></tr>
|
||||
<tr><td>Student43</td><td>Mathematics</td><td>male</td><td>48</td><td>92</td><td>18</td><td>88</td></tr>
|
||||
<tr><td>Student44</td><td>Languages</td><td>female</td><td>82</td><td>2</td><td>59</td><td>73</td></tr>
|
||||
<tr><td>Student45</td><td>Mathematics</td><td>male</td><td>91</td><td>73</td><td>37</td><td>39</td></tr>
|
||||
<tr><td>Student46</td><td>Languages</td><td>female</td><td>4</td><td>8</td><td>12</td><td>10</td></tr>
|
||||
<tr><td>Student47</td><td>Mathematics</td><td>male</td><td>89</td><td>10</td><td>6</td><td>11</td></tr>
|
||||
<tr><td>Student48</td><td>Languages</td><td>female</td><td>90</td><td>32</td><td>21</td><td>18</td></tr>
|
||||
<tr><td>Student49</td><td>Mathematics</td><td>male</td><td>42</td><td>49</td><td>49</td><td>72</td></tr>
|
||||
<tr><td>Student50</td><td>Languages</td><td>female</td><td>56</td><td>37</td><td>67</td><td>54</td></tr>
|
||||
</tbody>
|
||||
</table></div>
|
||||
|
||||
<h2>Page Header</h2>
|
||||
<div>
|
||||
<pre class="prettyprint lang-html"><!-- Bootstrap stylesheet -->
|
||||
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css">
|
||||
|
||||
<!-- bootstrap widget theme -->
|
||||
<link rel="stylesheet" href="/tablesorter/css/theme.bootstrap.css">
|
||||
<!-- tablesorter plugin -->
|
||||
<script src="../js/jquery.tablesorter.js"></script>
|
||||
<!-- tablesorter widget file - loaded after the plugin -->
|
||||
<script src="../js/jquery.tablesorter.widgets.js"></script></pre>
|
||||
</div>
|
||||
|
||||
<h2>Javascript</h2>
|
||||
<div id="javascript">
|
||||
<pre class="prettyprint lang-javascript"></pre>
|
||||
</div>
|
||||
|
||||
<div class="next-up">
|
||||
<hr />
|
||||
Next up: <a href="example-widget-resizable.html">Resizable Columns widget ››</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
771
assets/vendor/tablesorter/docs/example-widget-build-table.html
vendored
Normal file
771
assets/vendor/tablesorter/docs/example-widget-build-table.html
vendored
Normal file
@@ -0,0 +1,771 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>jQuery plugin: Tablesorter 2.0 - Build Table Widget</title>
|
||||
<!-- jQuery -->
|
||||
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
|
||||
|
||||
<!-- Demo stuff -->
|
||||
<link class="ui-theme" rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/cupertino/jquery-ui.css">
|
||||
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
|
||||
<link rel="stylesheet" href="css/jq.css">
|
||||
<link href="css/prettify.css" rel="stylesheet">
|
||||
<script src="js/prettify.js"></script>
|
||||
<script src="js/docs.js"></script>
|
||||
<script src="js/demo-build-table.js"></script>
|
||||
<style>
|
||||
.csv { display: none; }
|
||||
.tablesorter-blue td.info { background: #eee; }
|
||||
</style>
|
||||
|
||||
<!-- Tablesorter: required -->
|
||||
<link rel="stylesheet" href="../css/theme.blue.css">
|
||||
<script src="../js/jquery.tablesorter.js"></script>
|
||||
|
||||
<!-- build table widget -->
|
||||
<script type="text/javascript" src="../js/widgets/widget-build-table.js"></script>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<div id="banner">
|
||||
<h1>table<em>sorter</em></h1>
|
||||
<h2>Build Table Widget</h2>
|
||||
<h3>Flexible client-side table sorting</h3>
|
||||
<a href="index.html">Back to documentation</a>
|
||||
</div>
|
||||
<div id="main">
|
||||
<br>
|
||||
<div class="accordion">
|
||||
|
||||
<h3><a href="#">Notes</a></h3>
|
||||
<div>
|
||||
<ul>
|
||||
<li>Build a table starting with an assortment of data types ( array, text (CSV, HTML) or object (json) ).</li>
|
||||
<li>This widget isn't really a widget because it is run and does it's processing before tablesorter has initialized; but the options for it are contained within the tablesorter <code>widgetOptions</code>.</li>
|
||||
<li>Using the core build options:
|
||||
<ul>
|
||||
<li>The <code>build_type</code> tells the widget which type of data processing to use on the data.</li>
|
||||
<li>The <code>build_source</code> points the widget to the data source.</li>
|
||||
<li>Once the data is obtained from the <code>build_source</code>, you can do whatever processing that needs to be done on it using the <code>build_processing</code> option.
|
||||
<ul>
|
||||
<li>For example, if the table data is within a larger JSON, you can just return that portion of the JSON to the widget: <code>build_processing : function(data, wo) { return data.all_info_tables.table_of_contents; }</code></li>
|
||||
<li>Anoter example is to use the processing option to split a string into an array (see the "Array (from string w/processing)" section below)</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>An extra option named <code>build_numbers</code> has been included:
|
||||
<ul>
|
||||
<li>This option only applies to array and csv source table builds.</li>
|
||||
<li>Set the <code>build_numbers.addColumn</code> option to <code>true</code> (or a string with the column name <code>"#"</code>) to add a row number column on the far left of the table.</li>
|
||||
<li>Set the <code>build_numbers.sortable</code> option to <code>true</code> to make the added number column sortable. This option only applies if the <code>addColumn</code> option is <code>true</code>.</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<h3><a href="#">Options</a></h3>
|
||||
<div>
|
||||
<table class="tablesorter-blue">
|
||||
<colgroup>
|
||||
<col style="width:10%">
|
||||
<col style="width:10%">
|
||||
<col style="width:15%">
|
||||
<col style="width:65%">
|
||||
</colgroup>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>widgetOption</th>
|
||||
<th>Type</th>
|
||||
<th>Default</th>
|
||||
<th>Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
|
||||
<tr>
|
||||
<td colspan="4" class="info">Core Options</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td><a href="#" class="permalink"><code>build_type</code></a></td>
|
||||
<td>String</td>
|
||||
<td><code>""</code></td>
|
||||
<td>
|
||||
Indicate the data result type that needs to be processed
|
||||
<div class="collapsible"><br>
|
||||
Options include: <code>"array"</code>, <code>"csv"</code>, <code>"object"</code>, <code>"json"</code> or <code>"html"</code>.<br>
|
||||
Default is <code>""</code> (an empty string).
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a href="#" class="permalink"><code>build_source</code></a></td>
|
||||
<td>String</td>
|
||||
<td><code>""</code></td>
|
||||
<td>
|
||||
Contains the data stored as an array, object, jQuery object or <a href="http://api.jquery.com/jQuery.ajax/#jQuery-ajax-settings">ajax settings</a> used to obtain ajax data (include any desired ajax options).
|
||||
<div class="collapsible"><br>
|
||||
Options include: an array, object, jQuery Object (<code>$('.csv')</code>) or ajax settings( <code>{ url: 'mysite.com/data.json', dataType: 'json' }</code> ).
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a href="#" class="permalink"><code>build_processing</code></a></td>
|
||||
<td>Function</td>
|
||||
<td><code>null</code></td>
|
||||
<td>
|
||||
Add a function that returns a useable build_type. (e.g. string to array)
|
||||
<div class="collapsible"><br>
|
||||
The function receives two parameters: <code>data</code> which contains the obtained data and <code>wo</code> which is the widget options (<code>table.config.widgetOptions</code>).<br>
|
||||
Example: <code>build_processing: function(data, wo){ return data.split(';'); }</code>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><span class="permalink"><code>build_complete</code></span></td>
|
||||
<td>String</td>
|
||||
<td><code>"tablesorter-build-complete"</code></td>
|
||||
<td>Contains the name of the event to trigger when a table build has completed.</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td colspan="4" class="info">CSV & Array Options</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td><span class="permalink"><code>build_headers.rows</code></span></td>
|
||||
<td>Numeric</td>
|
||||
<td><code>1</code></td>
|
||||
<td>Number of header rows contained within the csv</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><span class="permalink"><code>build_headers.classes</code></span></td>
|
||||
<td>Array</td>
|
||||
<td><code>[]</code></td>
|
||||
<td>Array of header class names to add while building the table header.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a href="#" class="permalink"><code>build_headers.text</code></a></td>
|
||||
<td>Array</td>
|
||||
<td><code>[]</code></td>
|
||||
<td>Array of header cell names to add while building the table header.
|
||||
<div class="collapsible"><br>
|
||||
Any value contained within this option will override any header text obtained from the CSV data.
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><span class="permalink"><code>build_headers.widths</code></span></td>
|
||||
<td>Array</td>
|
||||
<td><code>[]</code></td>
|
||||
<td>Array of header cell widths which are added to a <code><col></code> within a <code><colgroup></code>.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><span class="permalink"><code>build_footers.rows</code></span></td>
|
||||
<td>Numeric</td>
|
||||
<td><code>1</code></td>
|
||||
<td>Number of footer rows contained within the csv</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><span class="permalink"><code>build_footers.classes</code></span></td>
|
||||
<td>Array</td>
|
||||
<td><code>[]</code></td>
|
||||
<td>Array of footer class names to add while building the table footer.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a href="#" class="permalink"><code>build_footers.text</code></a></td>
|
||||
<td>Array</td>
|
||||
<td><code>[]</code></td>
|
||||
<td>Array of footer cell names to add while building the table footer.
|
||||
<div class="collapsible"><br>
|
||||
Any value contained within this option will override any footer text obtained from the CSV data.
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td><a href="#" class="permalink"><code>build_numbers.addColumn</code></a></td>
|
||||
<td>Boolean</td>
|
||||
<td><code>false</code></td>
|
||||
<td>Include a row numbering column.
|
||||
<div class="collapsible"><br>
|
||||
Only works with csv or array data.
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a href="#" class="permalink"><code>build_numbers.sortable</code></a></td>
|
||||
<td>Boolean</td>
|
||||
<td><code>false</code></td>
|
||||
<td>Make the included row number column sortable.
|
||||
<div class="collapsible"><br>
|
||||
Only works when the <code>build_numbers.addColumn</code> is <code>true</code> and when csv or array data is used.
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td colspan="4" class="info">CSV Only Options</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td><span class="permalink"><code>build_csvStartLine</code></span></td>
|
||||
<td>Numeric</td>
|
||||
<td><code>0</code></td>
|
||||
<td>The line within the csv data to start building the table</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><span class="permalink"><code>build_csvSeparator</code></span></td>
|
||||
<td>String</td>
|
||||
<td><code>","</code> (comma)</td>
|
||||
<td>The separator used within the text file (comma or tab)</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td colspan="4" class="info">Object Only Options</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td><span class="permalink"><code>build_objectRowKey</code></span></td>
|
||||
<td>String</td>
|
||||
<td><code>"rows"</code></td>
|
||||
<td>Object key which contains row data</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><span class="permalink"><code>build_objectCellKey</code></span></td>
|
||||
<td>String</td>
|
||||
<td><code>"cells"</code></td>
|
||||
<td>Object key which contains the table cells, within the row data</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><span class="permalink"><code>build_objectHeaderKey</code></span></td>
|
||||
<td>String</td>
|
||||
<td><code>"headers"</code></td>
|
||||
<td>Object key which contains the table headers data</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><span class="permalink"><code>build_objectFooterKey</code></span></td>
|
||||
<td>String</td>
|
||||
<td><code>"footers"</code></td>
|
||||
<td>Object key which contains the table footers data</td>
|
||||
</tr>
|
||||
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
</div> <!-- end options -->
|
||||
|
||||
<h3><a href="#">Setup - Common (document head)</a></h3>
|
||||
<div>
|
||||
Add the following required scripts and css files into the document <code><head></code>
|
||||
<pre class="prettyprint lang-html"><!-- jQuery -->
|
||||
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
|
||||
|
||||
<!-- Tablesorter: required -->
|
||||
<link rel="stylesheet" href="../css/theme.blue.css"> <!-- choose any theme -->
|
||||
<script src="../js/jquery.tablesorter.js"></script>
|
||||
|
||||
<!-- build table widget -->
|
||||
<script type="text/javascript" src="../js/widgets/widget-build-table.js"></script></pre>
|
||||
</div>
|
||||
|
||||
<h3><a href="#">Setup - Array (javascript variable)</a></h3>
|
||||
<div>
|
||||
|
||||
<h3>Notes</h3>
|
||||
<ul>
|
||||
<li>The array is set up such that it is an array of arrays. The outer array contains each row array, and within each row array is the cell text.</li>
|
||||
<li>Using an array is limiting, so addtional options have been added:
|
||||
<ul>
|
||||
<li>(<code>build_headers</code> & <code>build_footers</code>) have been added allowing customizing the headers and/or footers.</li>
|
||||
<li>The <code>rows</code> option sets the number of headers rows to include from the data source. <strong>Zero is not an option</strong> since tablesorter requires a thead in place before it will initialize.</li>
|
||||
<li>The <code>classes</code> array sets each header cell (<code>th</code>) class name.</li>
|
||||
<li>The <code>text</code> array within these options will override any text obtained from the data source.</li>
|
||||
<li>The <code>widths</code> array, only in the <code>build_headers</code> option, sets column widths by building <code><col></code> elements within a <code><colgroup</code>.</li>
|
||||
<li>Adding class names to the tbody rows or cells isn't easily accomplished, but you can bind to the build complete event (<code>'tablesorter-build-complete'</code>) and add them yourself.</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<h3>HTML</h3>
|
||||
<pre class="prettyprint lang-html"><div id="array2Table"></div></pre>
|
||||
<h3>Javascript</h3>
|
||||
<pre class="prettyprint lang-js">$(function() {
|
||||
var arry = [
|
||||
[ 'ID', 'Name', 'Age', 'Date' ], // header
|
||||
[ 'A42b', 'Parker', 28, 'Jul 6, 2006 8:14 AM' ], // row 1
|
||||
[ 'A255', 'Hood', 33, 'Dec 10, 2002 5:14 AM' ], // row 2
|
||||
[ 'A33', 'Kent', 18, 'Jan 12, 2003 11:14 AM' ], // row 3
|
||||
[ 'A1', 'Franklin', 45, 'Jan 18, 2001 9:12 AM' ], // row 4
|
||||
[ 'A102', 'Evans', 22, 'Jan 18, 2007 9:12 AM' ], // row 5
|
||||
[ 'A42a', 'Everet', 22, 'Jan 18, 2007 9:12 AM' ], // row 6
|
||||
[ 'ID', 'Name', 'Age', 'Date' ] // footer
|
||||
];
|
||||
|
||||
$('#array2Table').tablesorter({
|
||||
theme: 'blue',
|
||||
widgetOptions : {
|
||||
// build_type : 'array', // can sometimes be detected if undefined
|
||||
build_source : arry,
|
||||
build_headers : {
|
||||
rows : 1, // Number of header rows from the csv
|
||||
classes : [], // Header classes to apply to cells
|
||||
text : [], // Header cell text
|
||||
widths : [ '15%', '30%', '15%', '40%' ] // set header cell widths
|
||||
},
|
||||
build_footers : {
|
||||
rows : 1, // Number of header rows from the csv
|
||||
classes : [], // Footer classes to apply to cells
|
||||
text : [ 'ID (a###)', 'Last Name', 'Age (joined)', 'Date (joined)' ] // Footer cell text
|
||||
}
|
||||
}
|
||||
});
|
||||
});</pre>
|
||||
<h3>Result</h3>
|
||||
<div id="array2Table" class="container"></div>
|
||||
</div>
|
||||
|
||||
<h3><a href="#">Setup - Array (from string w/processing)</a></h3>
|
||||
<div>
|
||||
|
||||
<h3>Notes</h3>
|
||||
<ul>
|
||||
<li>We start out with a string and split it into a useable array of arrays.</li>
|
||||
<li>The settings are similair to the Array (javascript variable) code above with the exception of using the <code>build_processing</code> function to create the array.
|
||||
<ul>
|
||||
<li>The string is set up to separate each row by a semi-colon, then each cell by a comma.</li>
|
||||
<li>The first split is needed to create an array of rows <code>.split(';')</code></li>
|
||||
<li>The second split can be accomplished using <code>.split(',')</code> on each row of the array, but instead we use the build table widget function <code>$.tablesorter.buildTable.splitCSV(cells, ',');</code> to ensure that the split doesn't occur if the separator is within double quotes (note the footer text).</li>
|
||||
<li>Then just return this newly built array back to the build table widget (see the full code below).</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<h3>HTML</h3>
|
||||
<pre class="prettyprint lang-html"><div id="string2Table"></div></pre>
|
||||
<h3>Javascript</h3>
|
||||
<pre class="prettyprint lang-js">$(function() {
|
||||
$('#string2Table').tablesorter({
|
||||
theme: 'blue',
|
||||
widgetOptions: {
|
||||
build_type : 'array',
|
||||
build_source : 'header 1,header 2,header 3;r1c1,r1c2,r1c3;r2c1,r2c2,r2c3;r3c1,r3c2,r3c3;"footer, 1","footer, 2","footer, 3"',
|
||||
build_processing : function(data, wo) {
|
||||
var rows = data.split(';');
|
||||
return $.each(rows, function(i,cells) {
|
||||
// similar to using rows[i] = cells.split(',') but the splitCSV script
|
||||
// doesn't split the cell if the separator (comma) is within double quotes
|
||||
rows[i] = $.tablesorter.buildTable.splitCSV(cells, ',');
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
});</pre>
|
||||
<h3>Result</h3>
|
||||
<div id="string2Table" class="container"></div>
|
||||
</div>
|
||||
|
||||
<h3><a href="#">Setup - CSV (txt within DOM element)</a></h3>
|
||||
<div>
|
||||
|
||||
<h3>Notes</h3>
|
||||
<ul>
|
||||
<li>A jQuery object targeting the CSV text can be passed to the <code>build_source</code> option.</li>
|
||||
<li>The widget detects that a jQuery object was passed to it, and grabs the HTML (not text) of the element.
|
||||
<ul>
|
||||
<li>Make sure not include HTML tags, or at least use the <code>build_processing</code> function to reformat the data.</li>
|
||||
<li>The row of csv data is trimmed of extra tabs and spaces (only from the beginning & end of each row).</li>
|
||||
<li>Building a table from CSV or array use the same script, so the same addtional options are available:
|
||||
<ul>
|
||||
<li>(<code>build_headers</code> & <code>build_footers</code>) have been added allowing customizing the headers and/or footers.</li>
|
||||
<li>The <code>rows</code> option sets the number of headers rows to include from the data source. <strong>Zero is not an option</strong> since tablesorter requires a thead in place before it will initialize.</li>
|
||||
<li>The <code>classes</code> array sets each header cell (<code>th</code>) class name.</li>
|
||||
<li>The <code>text</code> array within these options will override any text obtained from the data source.</li>
|
||||
<li>The <code>widths</code> array, only in the <code>build_headers</code> option, sets column widths by building <code><col></code> elements within a <code><colgroup</code>.</li>
|
||||
<li>Adding class names to the tbody rows or cells isn't easily accomplished, but you can bind to the build complete event (<code>'tablesorter-build-complete'</code>) and add them yourself.</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>CSV data has two additional options used during data processing:
|
||||
<ul>
|
||||
<li><code>build_csvStartLine</code> (default is <code>0</code>) tells the csv build script which line in the csv data to start using to build the table. This is added in case comments or other data is above the table data.</li>
|
||||
<li><code>build_csvSeparator</code> (default is <code>","</code>)
|
||||
<ul>
|
||||
<li>This sets the separator used within the csv data to separate each cell.</li>
|
||||
<li>The <a href="https://code.google.com/p/jquerycsvtotable/">original jquerycsvtotable plugin</a> shows an <a href="http://honestbleeps.com/csvtotable/demo.html#TSVSource">example to process tab separated values (TSV)</a> by setting this option to <code>"\t"</code>.</li>
|
||||
<li>Rows are determined by placing the data on a new line.</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>In this demo, the <code>build_numbers</code> sub-options <code>addColumn</code> and <code>sortable</code> are set to add a numeric column on the left side.
|
||||
<ul>
|
||||
<li>The <code>addColumn</code> option contains the name of the numeric column to be added to the header. Otherwise, set this option to <code>false</code> to not build this numeric column.</li>
|
||||
<li>The <code>sortable</code> option makes that numeric column sortable.</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<h3>HTML</h3>
|
||||
<pre class="prettyprint lang-html"><!--
|
||||
Note: if the csv data contains commas ("10,000 days") wrap it in quotes
|
||||
-->
|
||||
<div class="csv" style="display:none;">
|
||||
Album,Artist,Price (USD)
|
||||
Lateralus,Tool,$13.00
|
||||
Aenima,Tool,$12.00
|
||||
"10,000 days",Tool,$14.00
|
||||
Down In It,Nine Inch Nails,$3.00
|
||||
Broken,Nine Inch Nails,$6.00
|
||||
Muse,Black Holes and Revelations,$7.00
|
||||
Anon,"fake album, with comma", $1.00
|
||||
Album,Artist,Price (USD)
|
||||
</div>
|
||||
|
||||
<div id="csv2Table"></div></pre>
|
||||
<h3>Javascript</h3>
|
||||
<pre class="prettyprint lang-js">$(function() {
|
||||
$('#csv2Table').tablesorter({
|
||||
theme: 'blue',
|
||||
widgetOptions: {
|
||||
// *** build widget core ***
|
||||
build_type : 'csv',
|
||||
build_source : $('.csv'),
|
||||
build_complete : 'tablesorter-build-complete', // triggered event when build completes
|
||||
|
||||
// *** CSV & array ***
|
||||
build_headers : {
|
||||
rows : 1, // Number of header rows from the csv
|
||||
classes : [], // Header classes to apply to cells
|
||||
text : [], // Header cell text
|
||||
widths : ['3%', '27%', '50%', '20%'] // set header cell widths
|
||||
},
|
||||
build_footers : {
|
||||
rows : 1, // Number of header rows from the csv
|
||||
classes : [], // Footer classes to apply to cells
|
||||
text : [] // Footer cell text
|
||||
},
|
||||
build_numbers : {
|
||||
addColumn : "#", // include row numbering column?
|
||||
sortable : true // make column sortable?
|
||||
},
|
||||
|
||||
// *** CSV options ***
|
||||
build_csvStartLine : 0, // line within the csv to start adding to table
|
||||
build_csvSeparator : "," // csv separator
|
||||
}
|
||||
});
|
||||
});</pre>
|
||||
<h3>Result</h3>
|
||||
<div id="csv2Table" class="container"></div>
|
||||
|
||||
</div>
|
||||
|
||||
<h3><a href="#">Setup - CSV (txt file via ajax)</a></h3>
|
||||
<div>
|
||||
|
||||
<h3>Notes</h3>
|
||||
<ul>
|
||||
<li>If the csv data is obtained via ajax instead of from a DOM element, only the <code>build_source</code> option needs to change, everything else stays the same.
|
||||
<ul>
|
||||
<li>Set the <code>build_source</code> to contain any <a href="http://api.jquery.com/jQuery.ajax/#jQuery-ajax-settings">ajax settings</a> required to load the data.</li>
|
||||
<li>In this case the csv file is contained within a text file (<code>build.txt</code>), so a <code>url</code> option is set to point to the file and the <code>dataType</code> option (set to <code>html</code>) is set so that ajax knows the type of file to access.</li>
|
||||
<li>The remaining default settings were left out of the example below.</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>Please note that browsers like Chrome will not allow you to access locally hosted (desktop) files. Test it with Firefox instead.</li>
|
||||
</ul>
|
||||
|
||||
<h3>Build.txt file</h3>
|
||||
<pre class="prettyprint lang-html">Album,Artist,Price ($)
|
||||
Lateralus,Tool,$13.00
|
||||
Aenima,Tool,$12.00
|
||||
"10,000 days",Tool,$14.00
|
||||
Down In It,Nine Inch Nails,$3.00
|
||||
Broken,Nine Inch Nails,$6.00
|
||||
Muse,Black Holes and Revelations,$7.00
|
||||
Anon,"fake album, with comma", $1.00
|
||||
Album,Artist,Price ($)</pre>
|
||||
<h3>HTML</h3>
|
||||
<pre class="prettyprint lang-html"><div id="csv2Table2"></div></pre>
|
||||
<h3>Javascript</h3>
|
||||
<pre class="prettyprint lang-js">$(function() {
|
||||
$('#csv2Table2').tablesorter({
|
||||
theme: 'blue',
|
||||
widgetOptions: {
|
||||
// *** build widget core ***
|
||||
build_type : 'csv',
|
||||
build_source : { url: 'assets/csv.txt', dataType: 'html' },
|
||||
build_headers : {
|
||||
widths : ['30%', '50%', '20%'] // set header cell widths
|
||||
}
|
||||
}
|
||||
});
|
||||
});</pre>
|
||||
<h3>Result</h3>
|
||||
<div id="csv2Table2" class="container"></div>
|
||||
|
||||
</div>
|
||||
|
||||
<h3><a href="#">Setup - Object (javascript variable)</a></h3>
|
||||
<div>
|
||||
<h3>Notes</h3>
|
||||
<div class="accordion">
|
||||
<h3><a href="#">Definitions - General:</a></h3>
|
||||
<div>
|
||||
These are definitions to words as used within this documentation.
|
||||
<ul>
|
||||
<li>A <strong>key-value pair</strong> (or <strong>attribute</strong>): Within an object, the way to assign a value is by using a key-value pair (<code>"name" : "Fred"</code>; which is like saying <code>name = "Fred"</code> or <code>x = 1</code> outside of an object).</li>
|
||||
<li>A <strong>block</strong> is essentially the "value" portion of a key-value pair; specifically when referring to the value of the header, footer, row and cell blocks.</li>
|
||||
<li>An <strong>array</strong> is a list or group of values (i.e. <code>['x','y','z']</code>).</li>
|
||||
<li>An <strong>array of arrays</strong> is an array that contains more arrays (i.e. <code>[ ['a','b','c'], ['d','e','f' ] ]</code>). This applies to the header, row and footer blocks.</li>
|
||||
<li>Any build table widget object:
|
||||
<ul>
|
||||
<li>These objects are a grouping of key-value pairs used to define a tbody, row or cell.</li>
|
||||
<li>These objects contains all of the attributes which are to be added to a table element while building the table.</li>
|
||||
<li>The keys used in these attributes will look familiar - <code>class</code> (see row 7 below), <code>colspan</code> (see row 4 below), <code>data-</code>attributes (see row 7 cell 3 below), etc.</li>
|
||||
<li>Depending on where an object is located (tbody, row or cell), it will have a special key word or words which are significant (see the Objects section below).</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<h3><a href="#">Blocks:</a></h3>
|
||||
<div>
|
||||
(row #), or (row # cell #) in these descriptions refer to the demo object code below
|
||||
<ul>
|
||||
<li><code>header</code> block:
|
||||
<ul>
|
||||
<li>This block will contain an array of rows. The rows can be defined as another array of cell text (row 1-3,5-6), or row objects (row 0, 4 & 7).</li>
|
||||
<li>The <code>header</code> object key name can be modified by changing the widget <code>build_objectHeaderKey</code> option.</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><code>footers</code> block:
|
||||
<ul>
|
||||
<li>This block can contain all of the same data as the header block.</li>
|
||||
<li>This block has one additional setting, it can also contain a very specific string: <code>"clone"</code>. When this setting is used, the footer will be created by making a clone of the header.</li>
|
||||
<li>The <code>footers</code> object key name can be modified by changing the widget <code>build_objectFooterKey</code> option.</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><code>rows</code> block:
|
||||
<ul>
|
||||
<li>This block will contain an array of rows. The rows can be defined as another array of cell text, or as a row object (same as the header & footer blocks).</li>
|
||||
<li>In addition, this block can contain a tbody object (tbody 2 & tbody 3; see the tbody object section below for more details).</li>
|
||||
<li>The <code>rows</code> object key name can be modified by changing the widget <code>build_objectRowKey</code> option.</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><code>cells</code> block:
|
||||
<ul>
|
||||
<li>This block will contain an array of cells. The cells can be defined as cell text (string), or cell objects.</li>
|
||||
<li>The <code>cells</code> object key name can be modified by changing the widget <code>build_objectCellKey</code> option.</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<h3><a href="#">Object Content</a></h3>
|
||||
<div>
|
||||
<ul>
|
||||
<li>tbody object
|
||||
<ul>
|
||||
<li>The tbody object contains all of the attributes that are to be applied to a particular table tbody (<code>tbody</code>).</li>
|
||||
<li>The tbody object <strong>requires</strong> a <code>newTbody</code> key set to <code>true</code>. It is the ONLY way the build widget can differeniate a row object from a "new" tbody object.</li>
|
||||
<li>If the <code>newTbody</code> attribute is <code>true</code>, the build widget will place all remaining rows into a new tbody; or all rows, until it encounters another valid tbody object, into a new tbody.</li>
|
||||
<li>If the <code>newTbody</code> attribute is <code>false</code>, the build widget will assume the object is for a row and add it as a row.</li>
|
||||
<li>See "TBODY 2" and "TBODY 3" tbody objects in the code example below.</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>row object
|
||||
<ul>
|
||||
<li>The row object contains all of the attributes that are to be applied to a particular table row (<code>tr</code>).</li>
|
||||
<li>The row object requires a <code>cells</code> attribute.</li>
|
||||
<li>The cells attribute will contain all table cell data for the cells within that table row.</li>
|
||||
<li>This attribute can be changed by modifying the build table widget's <code>build_objectCellKey</code> (default is <code>"cells"</code>).</li>
|
||||
<li>See row 4 and row 7 in the demo code below.</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>row array
|
||||
<ul>
|
||||
<li>A row array can contain either the text for a table cell (row 0 cell 2 & 4), or a cell object (row 0 cell 1,3,5,6) contains.</li>
|
||||
<li>It can also contain all cell text (row 1-3,5-6) or all cell objects (almost row 7) for cells within that row.</li>
|
||||
<li>This method does not allow adding any row (<code>tr</code>) attributes, (i.e. class or data-attributes).</li>
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
<li>cell object
|
||||
<ul>
|
||||
<li>The cell object contains all of the attributes that are to be applied to a particular table cell (<code>th</code> (thead or tfoot) or <code>td</code> (tbody).</li>
|
||||
<li>This object requires either a <code>text</code> (row 0 & row 7) or <code>html</code> (row 4) attribute to add content into the cell.</li>
|
||||
<li>Within the first header row only, if a <code>width</code> attribute is defined, it will be applied to a <code><col></code> element and placed within a <code><colgroup></code> before the header.</li>
|
||||
<li>See row 0 (header), row 4 and row 7 (rows) in the demo code below.</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>cell text
|
||||
<ul>
|
||||
<li>Within a row array or object, only the cell text can be included (row 0 cell 2,4; row 1-3,5-6; row 7 cell 5).</li>
|
||||
<li>Within the header only, whenever cell content is added as a string, the widget will check the <code>widgetOptions.build_headers.classes</code> & <code>wo.build_headers.widths</code> (first row only) and apply any values it finds for that column to those cells.</li>
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3>HTML</h3>
|
||||
<pre class="prettyprint lang-html"><div id="object2Table"></div></pre>
|
||||
<h3>Javascript</h3>
|
||||
<pre class="prettyprint lang-js">$(function() {
|
||||
// object or JSON
|
||||
var dataObject = {
|
||||
headers : [
|
||||
[
|
||||
// each object/string is a cell
|
||||
{ text: 'First Name', class: 'fname', width: '10%' }, // row 0 cell 1
|
||||
'Last Name', // row 0 cell 2
|
||||
{ text: 'Age', class: 'age', 'data-sorter' : false }, // row 0 cell 3
|
||||
'Total', // row 0 cell 4
|
||||
{ text: 'Discount', class : 'sorter-false' }, // row 0 cell 5
|
||||
{ text: 'Date', class : 'date' } // row 0 cell 6
|
||||
]
|
||||
],
|
||||
footers : 'clone', // clone headers or assign array like headers
|
||||
rows : [
|
||||
// TBODY 1
|
||||
[ 'Peter', 'Parker', 28, '$9.99', '20%', 'Jul 6, 2006 8:14 AM' ], // row 1
|
||||
[ 'John', 'Hood', 33, '$19.99', '25%', 'Dec 10, 2002 5:14 AM' ], // row 2
|
||||
[ 'Clark', 'Kent', 18, '$15.89', '44%', 'Jan 12, 2003 11:14 AM' ], // row 3
|
||||
|
||||
// TBODY 2
|
||||
{ newTbody: true, class: 'tablesorter-infoOnly' },
|
||||
{ cells : [ { html: '<strong>Info Row</strong>', colSpan: 6 } ] }, // row 4
|
||||
|
||||
// TBODY 3
|
||||
{ newTbody: true },
|
||||
[ 'Bruce', 'Evans', 22, '$13.19', '11%', 'Jan 18, 2007 9:12 AM' ], // row 5
|
||||
[ 'Bruce', 'Almighty', 45, '$153.19', '44%', 'Jan 18, 2001 9:12 AM' ], // row 6
|
||||
|
||||
{ class: 'specialRow', // row 7
|
||||
cells: [
|
||||
// each object/string is a cell
|
||||
{ text: 'Fred', class: 'fname' }, // row 7 cell 1
|
||||
{ text: 'Smith', class: 'lname' }, // row 7 cell 2
|
||||
{ text: 18, class: 'age', 'data-info': "fake ID!, he's only 16" }, // row 7 cell 3
|
||||
{ text: '$22.44', class: 'total' }, // row 7 cell 4
|
||||
'8%', // row 7 cell 5
|
||||
{ text: 'Aug 20, 2012 10:15 AM', class: 'date' } // row 7 cell 6
|
||||
],
|
||||
'data-info' : 'This row likes turtles'
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
$('#object2Table').tablesorter({
|
||||
theme: 'blue',
|
||||
data : dataObject, // same as using build_source (build_source would override this)
|
||||
widgetOptions : {
|
||||
// *** build object options ***
|
||||
build_objectRowKey : 'rows', // object key containing table rows
|
||||
build_objectCellKey : 'cells', // object key containing table cells (within the rows object)
|
||||
build_objectHeaderKey : 'headers', // object key containing table headers
|
||||
build_objectFooterKey : 'footers' // object key containing table footers
|
||||
}
|
||||
});
|
||||
|
||||
});</pre>
|
||||
<h3>Result</h3>
|
||||
<div id="object2Table" class="container"></div>
|
||||
</div>
|
||||
|
||||
<h3><a href="#">Setup - Object (json file via ajax)</a></h3>
|
||||
<div>
|
||||
|
||||
<h3>Notes</h3>
|
||||
<ul>
|
||||
<li>The important difference between this demo and the javascript variable demo above is that this one retrieves a JSON file:
|
||||
<ul>
|
||||
<li>Set the <code>build_source</code> option to contain any <a href="">ajax settings</a> to load the json.</li>
|
||||
<li>To load the json file, set the <code>url</code> option to point to the json file and the <code>dataType</code> set to <code>"json"</code>.</li>
|
||||
<li>The remaining default settings were left out of the example below.</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>Please see the "Object (javascript variable)" section above for more details on how to set up the JSON for this demo.</li>
|
||||
<li>Note that JSON formatting is very specific - only double quotes (<code>"</code>) can be used to wrap attributes, all keys must be wrapped in quotes, no comments, etc.</li>
|
||||
<li>Always verify that the JSON is valid (use <a href="http://jsonlint.com/">JSONLint</a>) and realize that browsers like Chrome will not allow you to access locally hosted (desktop) JSON files. Test it with Firefox instead.</li>
|
||||
</ul>
|
||||
|
||||
<h3>Build.json file</h3>
|
||||
<pre class="prettyprint lang-js">{
|
||||
"headers" : [
|
||||
[
|
||||
{ "text": "First Name", "class": "fname", "width": "20%" },
|
||||
"Last Name",
|
||||
{ "text": "Age", "class": "age", "data-sorter" : false },
|
||||
"Total",
|
||||
{ "text": "Discount", "class" : "sorter-false" },
|
||||
{ "text": "Date", "class" : "date" }
|
||||
]
|
||||
],
|
||||
"footers" : "clone",
|
||||
"rows" : [
|
||||
[ "Peter", "Parker", 28, "$9.99", "20%", "Jul 6, 2006 8:14 AM" ],
|
||||
[ "John", "Hood", 33, "$19.99", "25%", "Dec 10, 2002 5:14 AM" ],
|
||||
[ "Clark", "Kent", 18, "$15.89", "44%", "Jan 12, 2003 11:14 AM" ],
|
||||
|
||||
{ "newTbody": true, "class": "tablesorter-infoOnly" },
|
||||
{ "cells" : [ { "html": "<strong>JSON Info Row</strong>", "colspan": 6 } ] },
|
||||
|
||||
{ "newTbody" : true },
|
||||
[ "Bruce", "Evans", 22, "$13.19", "11%", "Jan 18, 2007 9:12 AM" ],
|
||||
[ "Bruce", "Almighty", 45, "$153.19", "44%", "Jan 18, 2001 9:12 AM" ],
|
||||
|
||||
{ "class": "specialRow",
|
||||
"cells" : [
|
||||
{ "text": "Fred", "class": "fname" },
|
||||
{ "text": "Smith", "class": "lname" },
|
||||
{ "text": 18, "class": "age", "data-info": "fake ID!, he's only 16" },
|
||||
{ "text": "$22.44", "class": "total" },
|
||||
"8%",
|
||||
{ "text": "Aug 20, 2012 10:15 AM", "class": "date" }
|
||||
],
|
||||
"data-info" : "This row likes turtles"
|
||||
}
|
||||
]
|
||||
}</pre>
|
||||
<h3>HTML</h3>
|
||||
<pre class="prettyprint lang-html"><div id="object2Table2"></div></pre>
|
||||
<h3>Javascript</h3>
|
||||
<pre class="prettyprint lang-js">$(function() {
|
||||
$('#object2Table2').tablesorter({
|
||||
theme: 'blue',
|
||||
widgetOptions: {
|
||||
build_type : 'json',
|
||||
build_source : { url: 'assets/build.json', dataType: 'json' }
|
||||
}
|
||||
});
|
||||
});</pre>
|
||||
<h3>Result</h3>
|
||||
<div id="object2Table2" class="container"></div>
|
||||
|
||||
</div>
|
||||
|
||||
</div> <!-- end accordion -->
|
||||
|
||||
</div> <!-- end #main -->
|
||||
|
||||
<div class="csv hidden">
|
||||
Album,Artist,Price
|
||||
Lateralus,Tool,$13.00
|
||||
Aenima,Tool,$12.00
|
||||
"10,000 days",Tool,$14.00
|
||||
Down In It,Nine Inch Nails,$3.00
|
||||
Broken,Nine Inch Nails,$6.00
|
||||
Muse,Black Holes and Revelations,$7.00
|
||||
Anon,"fake album, with comma", $1.00
|
||||
Album,Artist,Price (USD)
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
520
assets/vendor/tablesorter/docs/example-widget-column-selector.html
vendored
Normal file
520
assets/vendor/tablesorter/docs/example-widget-column-selector.html
vendored
Normal file
@@ -0,0 +1,520 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery plugin: Tablesorter 2.0 - Column Selector Widget (beta)</title>
|
||||
|
||||
<!-- jQuery -->
|
||||
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
|
||||
|
||||
<!-- Demo stuff -->
|
||||
<link class="ui-theme" rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/cupertino/jquery-ui.css">
|
||||
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
|
||||
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
|
||||
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
|
||||
<link rel="stylesheet" href="css/jq.css">
|
||||
<link href="css/prettify.css" rel="stylesheet">
|
||||
<script src="js/prettify.js"></script>
|
||||
<script src="js/docs.js"></script>
|
||||
|
||||
<!-- Tablesorter: required -->
|
||||
<link rel="stylesheet" href="../css/theme.blue.css">
|
||||
<script src="../js/jquery.tablesorter.js"></script>
|
||||
<script src="../js/jquery.tablesorter.widgets.js"></script>
|
||||
|
||||
<script src="../js/widgets/widget-columnSelector.js"></script>
|
||||
<style>
|
||||
/* override document styling */
|
||||
.popover.right { text-align: left; }
|
||||
.ui-widget-content a { color: #428bca; }
|
||||
</style>
|
||||
|
||||
|
||||
<style id="css">/*** custom css only popup ***/
|
||||
.columnSelectorWrapper {
|
||||
position: relative;
|
||||
margin: 10px 0;
|
||||
display: inline-block;
|
||||
}
|
||||
.columnSelector, .hidden {
|
||||
display: none;
|
||||
}
|
||||
.columnSelectorButton {
|
||||
background: #99bfe6;
|
||||
border: #888 1px solid;
|
||||
color: #111;
|
||||
border-radius: 5px;
|
||||
padding: 5px;
|
||||
}
|
||||
#colSelect1:checked + label {
|
||||
background: #5797d7;
|
||||
border-color: #555;
|
||||
}
|
||||
#colSelect1:checked ~ #columnSelector {
|
||||
display: block;
|
||||
}
|
||||
.columnSelector {
|
||||
width: 120px;
|
||||
position: absolute;
|
||||
top: 30px;
|
||||
padding: 10px;
|
||||
background: #fff;
|
||||
border: #99bfe6 1px solid;
|
||||
border-radius: 5px;
|
||||
}
|
||||
.columnSelector label {
|
||||
display: block;
|
||||
}
|
||||
.columnSelector label:nth-child(1) {
|
||||
border-bottom: #99bfe6 solid 1px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
.columnSelector input {
|
||||
margin-right: 5px;
|
||||
}
|
||||
.columnSelector .disabled {
|
||||
color: #ddd;
|
||||
}
|
||||
|
||||
/*** Bootstrap popover ***/
|
||||
#popover-target label {
|
||||
margin: 0 5px;
|
||||
display: block;
|
||||
}
|
||||
#popover-target input {
|
||||
margin-right: 5px;
|
||||
}
|
||||
.popover {
|
||||
margin-top: -65px; /* adjust popover position */
|
||||
}
|
||||
</style>
|
||||
|
||||
<script id="js">$(function() {
|
||||
|
||||
/*** custom css only button popup ***/
|
||||
$(".custom-popup").tablesorter({
|
||||
theme: 'blue',
|
||||
widgets: ['zebra', 'columnSelector', 'stickyHeaders'],
|
||||
widgetOptions : {
|
||||
// target the column selector markup
|
||||
columnSelector_container : $('#columnSelector'),
|
||||
// column status, true = display, false = hide
|
||||
// disable = do not display on list
|
||||
columnSelector_columns : {
|
||||
0: 'disable' /* set to disabled; not allowed to unselect it */
|
||||
},
|
||||
// remember selected columns (requires $.tablesorter.storage)
|
||||
columnSelector_saveColumns: true,
|
||||
|
||||
// container layout
|
||||
columnSelector_layout : '<label><input type="checkbox">{name}</label>',
|
||||
// data attribute containing column name to use in the selector container
|
||||
columnSelector_name : 'data-selector-name',
|
||||
|
||||
/* Responsive Media Query settings */
|
||||
// enable/disable mediaquery breakpoints
|
||||
columnSelector_mediaquery: true,
|
||||
// toggle checkbox name
|
||||
columnSelector_mediaqueryName: 'Auto: ',
|
||||
// breakpoints checkbox initial setting
|
||||
columnSelector_mediaqueryState: true,
|
||||
// responsive table hides columns with priority 1-6 at these breakpoints
|
||||
// see http://view.jquerymobile.com/1.3.2/dist/demos/widgets/table-column-toggle/#Applyingapresetbreakpoint
|
||||
// *** set to false to disable ***
|
||||
columnSelector_breakpoints : [ '20em', '30em', '40em', '50em', '60em', '70em' ],
|
||||
// data attribute containing column priority
|
||||
// duplicates how jQuery mobile uses priorities:
|
||||
// http://view.jquerymobile.com/1.3.2/dist/demos/widgets/table-column-toggle/
|
||||
columnSelector_priority : 'data-priority'
|
||||
}
|
||||
});
|
||||
|
||||
/*** Bootstrap popover demo ***/
|
||||
$('#popover')
|
||||
.popover({
|
||||
placement: 'right',
|
||||
html: true, // required if content has HTML
|
||||
content: '<div id="popover-target"></div>'
|
||||
})
|
||||
// bootstrap popover event triggered when the popover opens
|
||||
.on('shown.bs.popover', function () {
|
||||
// call this function to copy the column selection code into the popover
|
||||
$.tablesorter.columnSelector.attachTo( $('.bootstrap-popup'), '#popover-target');
|
||||
});
|
||||
|
||||
// initialize column selector using default settings
|
||||
// note: no container is defined!
|
||||
$(".bootstrap-popup").tablesorter({
|
||||
theme: 'blue',
|
||||
widgets: ['zebra', 'columnSelector', 'stickyHeaders']
|
||||
});
|
||||
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="banner">
|
||||
<h1>table<em>sorter</em></h1>
|
||||
<h2>Column Selector Widget (beta)</h2>
|
||||
<h3>Flexible client-side table sorting</h3>
|
||||
<a href="index.html">Back to documentation</a>
|
||||
</div>
|
||||
|
||||
<div id="main">
|
||||
|
||||
<p></p>
|
||||
<br>
|
||||
|
||||
<div class="accordion">
|
||||
|
||||
<h3><a href="#">Notes</a></h3>
|
||||
<div>
|
||||
<ul>
|
||||
<li>This widget will <strong>only work</strong> in tablesorter version 2.8+ and jQuery version 1.7+.</li>
|
||||
<li>This widget may not work properly if the table header includes rows with row or column spans.</li>
|
||||
<li>The responsive part of this widget
|
||||
<ul>
|
||||
<li>Uses similar parameters as those used by jQuery mobile to set <a href="http://view.jquerymobile.com/1.4.0/demos/table-column-toggle/">column priority</a>.</li>
|
||||
<li>The column priorities range from 1 to 6, with 1 having the highest priority. As the browser window shrinks, lower priority (higher numbers) columns will be hidden first until all numbered priority columns are hidden.</li>
|
||||
<li>Any named data-priority, other than the numbers 1 - 6, (e.g. "critical" or "persistent") will be treated as a column which <em>will not be included</em> in the column selector.</li>
|
||||
<li>Note that this widget uses media queries, which <a href="http://caniuse.com/#search=media">will not work in IE8 and older browsers</a>.</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>The selector code uses css selectors, for optimal speed, to hide/show columns. These selectors <a href="http://caniuse.com/#search=nth-child">will not work in IE8 and older browsers</a>.</li>
|
||||
<li>The column button & popup is completely customizable, and in this demo it includes css that may not work properly in older versions of IE.</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<h3><a href="#">Options</a></h3>
|
||||
<div>
|
||||
<h4>Column selector widget default options (added inside of tablesorter <code>widgetOptions</code>)</h4>
|
||||
<table class="tablesorter-blue">
|
||||
<thead>
|
||||
<tr><th>Option</th><th>Description</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
|
||||
<tr>
|
||||
<td><code>columnSelector_container</code></td>
|
||||
<td>
|
||||
Target an element within the current page where the column selector will be inserted.
|
||||
<ul>
|
||||
<li>This setting is optional. If not set, you can use the following function to attach it to another element - see the Bootstrap example below
|
||||
<pre class="prettyprint lang-js">$.tablesorter.columnSelector.attachTo( $('table'), '.selector-target' );</pre>
|
||||
</li>
|
||||
<li>This can be either a jQuery selector string ( e.g. <code>'#columnSelector'</code> )</li>
|
||||
<li>or, a jQuery object ( e.g. <code>$('#columnSelector')</code> ).</li>
|
||||
</ul>
|
||||
Default value: <code>null</code>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td><code>columnSelector_columns</code></td>
|
||||
<td>
|
||||
Assigns a column status for each selector:
|
||||
<ul>
|
||||
<li>To disable, or remove a column from the column selector, include the key word <code>"disable"</code> - this is one of many ways to remove a column from the column selector popup</li>
|
||||
<li>Set a column status to <code>true</code> to initially display a column. This is the default for undefined columns.</li>
|
||||
<li>Set a column status to <code>false</code> to initially hide a column.</li>
|
||||
<li>Examples:
|
||||
<pre class="prettyprint lang-js">widgetOptions : {
|
||||
columnSelector_columns : {
|
||||
0 : "disable", /* disable; i.e. remove column from selector */
|
||||
1 : false, /* start with column hidden */
|
||||
2 : true, /* start with column visible; default for undefined columns */
|
||||
}
|
||||
}</pre></li>
|
||||
<li>
|
||||
<span class="label label-warning">*NOTE*</span> Prior to v2.15.6, using these extra methods and setting a column to "false" would remove it from the selector. Now, it is more consistent with this columns option - set the appropriate method to "disable" to remove a column, "false" to initially hide a column and "true" to keep the column in an initially visible state.<br>
|
||||
<br>
|
||||
In <span class="version">v2.15.6</span>, the following methods in order of priority are now available (set to true, false or disable):
|
||||
<ul>
|
||||
<li>jQuery data <code>data-columnSelector="true"</code> or <code>data-columnSelector="false"</code>.</li>
|
||||
<li>metadata <code>class="{ columnSelector : true }"</code> or <code>class="{ columnSelector : false }"</code>.</li>
|
||||
<li>headers option <code>headers : { 0 : { columnSelector: true } }</code> or <code>headers : { 0 : { columnSelector: false } }</code>.</li>
|
||||
<li>header class name <code>class="columnSelector-true"</code> or <code>class="columnSelector-false"</code>.</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<span class="label label-warning">*NOTE*</span> Setting a column to initially be visible (<code>true</code>) or invisible (<code>false</code>) will be overridden by the users saved selections if the <code>columnSelector_saveColumns</code> option is <code>true</code>.<br>
|
||||
<br>
|
||||
Default value: <code>{}</code>; empty object
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td><code>columnSelector_saveColumns</code></td>
|
||||
<td>Save the current manually set column status and the table's responsive ("auto") state (<span class="version updated">v2.15.7</span>).<br>
|
||||
<br>
|
||||
This option requires the storage utility contained within the tablesorter widgets file (<code>jquery.tablesorter.widgets.js</code>).<br>
|
||||
<br>
|
||||
Default value: <code>true</code>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td><code>columnSelector_layout</code></td>
|
||||
<td>
|
||||
This option defines the markup used for each column selector within the popup. The only available parameter is the <code>{name}</code> string which will be replaced with the appropriate column name/title.<br>
|
||||
<br>
|
||||
An <code><input type="checkbox"></code> is required within this setting!<br>
|
||||
<br>
|
||||
Default value: <code>'<label><input type="checkbox">{name}</label>'</code>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td><code>columnSelector_name</code></td>
|
||||
<td>
|
||||
The data-attribute within the table header cell which contains an alternate column selector name.
|
||||
<ul>
|
||||
<li>If the header cell does not have this attribute defined, the column selector name will be taken from the header cell internal text.</li>
|
||||
<li>If defined, the text contained within this attribute will replace the <code>{name}</code> string within the layout option above.</li>
|
||||
</ul>
|
||||
Default value: <code>"data-selector-name"</code>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td><code>columnSelector_mediaquery</code></td>
|
||||
<td>Set this option to add (<code>true</code>) or not add (<code>false</code>) the media query functionality of this widget.<br>
|
||||
<br>
|
||||
Default value: <code>true</code>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td><code>columnSelector_mediaqueryName</code></td>
|
||||
<td>When the media query checkbox is added (it also uses the <code>columnSelector_layout</code> markup), this is the name that is added. Set as "Auto" to signify to the user that columns disappearing and/or reappearing is automatically done.<br>
|
||||
<br>
|
||||
Default value: <code>"Auto: "</code>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td><code>columnSelector_mediaqueryState</code></td>
|
||||
<td>Set this option to <code>false</code> to start with the media query disabled (manual column selection mode).<br>
|
||||
<br>
|
||||
Default value: <code>true</code>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td><code>columnSelector_breakpoints</code></td>
|
||||
<td>
|
||||
<ul>
|
||||
<li>This option defines the media query breakpoints with which to use when a column with the associated priority is hidden or revealed.</li>
|
||||
<li>For example, the last entry "70em" (1,120px) is assigned to data-priority 6. When the browser width is below this dimension, all columns with a data-priority of six will be hidden. Then when a browser width less than "60em" (960px) is reached, all columns of data-priority 5 and above will be hidden. At "50em" (800px), all columns of data-priority 4 and above are hidden, etc.</li>
|
||||
<li>Adjust these values as desired, but a <em>maximum</em> of six data-priorities is set.</li>
|
||||
</ul>
|
||||
Default value: <code>[ "20em", "30em", "40em", "50em", "60em", "70em" ]</code>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td><code>columnSelector_priority</code></td>
|
||||
<td>
|
||||
This is the assigned data-attribute which contains the defined data priority for a table column
|
||||
<ul>
|
||||
<li>Values of 1 through 6 set the breakpoints of that particular column.</li>
|
||||
<li>A value of 1 has the highest priority, meaning it is the last column(s) to be hidden when the browser width goes below "20em" (320px).</li>
|
||||
<li>A value of 7 has the lowest priority, meaning it is the first column(s) to be hidden when the browser width goes below "70em" (1,120px).</li>
|
||||
<li>Any named priority value, (e.g. "critical" or "persistent") will flag the widget to remove that column from the selector list.</li>
|
||||
<li>Undefined priorities will default to a priority value of 1.</li>
|
||||
</ul>
|
||||
Default value: <code>"data-priority"</code>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
</div>
|
||||
|
||||
<h3><a href="#">Removing a column from the selector</a></h3>
|
||||
<div>
|
||||
This is probably overkill, but there are numerous ways to remove a column from the selection popup (<span class="version updated">v2.15.6</span>):
|
||||
<ul>
|
||||
<li>Setting the <code>data-priority</code> to any non-numerical name (e.g. "critical" or "persistent").</li>
|
||||
<li>Setting the column selector widget columns option <code>columnSelector_columns : { 0 : 'disable' }</code>.</li>
|
||||
<li>The following methods in order of priority:
|
||||
<ul>
|
||||
<li>jQuery data <code>data-columnSelector="disable"</code>.</li>
|
||||
<li>metadata <code>class="{ columnSelector : disable }"</code>.</li>
|
||||
<li>headers option <code>headers : { 0 : { columnSelector: disable } }</code>.</li>
|
||||
<li>header class name <code>class="columnSelector-disable"</code>.</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
* Prior to v2.15.6, setting these methods to "false" would remove it from the selector. Now, they must be set to "disable" to remove the column from the selector, this was done to make it more consistent with the <code>columnSelector_columns</code> setting.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</p>
|
||||
|
||||
<h1>Demo</h1>
|
||||
|
||||
|
||||
<h3>CSS only popup</h3>
|
||||
<!-- This selector markup is completely customizable -->
|
||||
<div class="columnSelectorWrapper">
|
||||
<input id="colSelect1" type="checkbox" class="hidden">
|
||||
<label class="columnSelectorButton" for="colSelect1">Column</label>
|
||||
<div id="columnSelector" class="columnSelector">
|
||||
<!-- this div is where the column selector is added -->
|
||||
</div>
|
||||
</div> (When "Auto" is set, the table becomes responsive; resize the browser window to see it work)
|
||||
|
||||
<table class="tablesorter custom-popup">
|
||||
<thead>
|
||||
<tr>
|
||||
<th data-priority="critical">Name</th>
|
||||
<!-- Remove column from selection popup by including -->
|
||||
<!-- data-priority="Anything other than 1-6" OR data-column-selector="disable" OR class="columnSelector-disable" -->
|
||||
<th class="columnSelector-disable">Major</th>
|
||||
<!-- columnSelector-false will initially hide the column -->
|
||||
<th class="columnSelector-false" data-priority="6" data-selector-name="Gender">Sex</th>
|
||||
<th data-priority="4">English</th>
|
||||
<th data-priority="5">Japanese</th>
|
||||
<th data-priority="3">Calculus</th>
|
||||
<th data-priority="2">Geometry</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tfoot>
|
||||
<tr><th>Name</th><th>Major</th><th>Sex</th><th>English</th><th>Japanese</th><th>Calculus</th><th>Geometry</th></tr>
|
||||
</tfoot>
|
||||
<tbody>
|
||||
<tr><td>Student03</td><td>Languages</td><td>female</td><td>85</td><td>95</td><td>80</td><td>85</td></tr>
|
||||
<tr><td>Student04</td><td>Languages</td><td>male</td><td>60</td><td>55</td><td>100</td><td>100</td></tr>
|
||||
<tr><td>Student05</td><td>Languages</td><td>female</td><td>68</td><td>80</td><td>95</td><td>80</td></tr>
|
||||
<tr><td>Student12</td><td>Mathematics</td><td>female</td><td>100</td><td>75</td><td>70</td><td>85</td></tr>
|
||||
<tr><td>Student13</td><td>Languages</td><td>female</td><td>100</td><td>80</td><td>100</td><td>90</td></tr>
|
||||
<tr><td>Student14</td><td>Languages</td><td>female</td><td>50</td><td>45</td><td>55</td><td>90</td></tr>
|
||||
<tr><td>Student15</td><td>Languages</td><td>male</td><td>95</td><td>35</td><td>100</td><td>90</td></tr>
|
||||
<tr><td>Student16</td><td>Languages</td><td>female</td><td>100</td><td>50</td><td>30</td><td>70</td></tr>
|
||||
<tr><td>Student17</td><td>Languages</td><td>female</td><td>80</td><td>100</td><td>55</td><td>65</td></tr>
|
||||
<tr><td>Student18</td><td>Mathematics</td><td>male</td><td>30</td><td>49</td><td>55</td><td>75</td></tr>
|
||||
<tr><td>Student19</td><td>Languages</td><td>male</td><td>68</td><td>90</td><td>88</td><td>70</td></tr>
|
||||
<tr><td>Student20</td><td>Mathematics</td><td>male</td><td>40</td><td>45</td><td>40</td><td>80</td></tr>
|
||||
<tr><td>Student01</td><td>Languages</td><td>male</td><td>80</td><td>70</td><td>75</td><td>80</td></tr>
|
||||
<tr><td>Student02</td><td>Mathematics</td><td>male</td><td>90</td><td>88</td><td>100</td><td>90</td></tr>
|
||||
<tr><td>Student06</td><td>Mathematics</td><td>male</td><td>100</td><td>99</td><td>100</td><td>90</td></tr>
|
||||
<tr><td>Student07</td><td>Mathematics</td><td>male</td><td>85</td><td>68</td><td>90</td><td>90</td></tr>
|
||||
<tr><td>Student08</td><td>Languages</td><td>male</td><td>100</td><td>90</td><td>90</td><td>85</td></tr>
|
||||
<tr><td>Student09</td><td>Mathematics</td><td>male</td><td>80</td><td>50</td><td>65</td><td>75</td></tr>
|
||||
<tr><td>Student10</td><td>Languages</td><td>male</td><td>85</td><td>100</td><td>100</td><td>90</td></tr>
|
||||
<tr><td>Student11</td><td>Languages</td><td>male</td><td>86</td><td>85</td><td>100</td><td>100</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<h3>Bootstrap Popover</h3>
|
||||
<!-- Bootstrap popover button -->
|
||||
<button id="popover" type="button" class="btn btn-default">
|
||||
Select Column
|
||||
</button>
|
||||
|
||||
<table class="tablesorter bootstrap-popup">
|
||||
<thead>
|
||||
<tr>
|
||||
<th data-priority="critical">Rank</th>
|
||||
<th data-priority="3">First Name</th>
|
||||
<th data-priority="critical">Last Name</th>
|
||||
<th data-priority="4">Age</th>
|
||||
<th data-priority="4">Total</th>
|
||||
<th data-priority="5">Discount</th>
|
||||
<th data-priority="6">Date</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>1</td><td>Philip Aaron Wong</td><td>Johnson Sr Esq</td><td>25</td><td>$5.95</td><td>22%</td><td>Jun 26, 2004 7:22 AM</td></tr>
|
||||
<tr><td>11</td><td>Aaron</td><td>Hibert</td><td>12</td><td>$2.99</td><td>5%</td><td>Aug 21, 2009 12:21 PM</td></tr>
|
||||
<tr><td>12</td><td>Brandon Clark</td><td>Henry Jr</td><td>51</td><td>$42.29</td><td>18%</td><td>Oct 13, 2000 1:15 PM</td></tr>
|
||||
<tr><td>111</td><td>Peter</td><td>Parker</td><td>28</td><td>$9.99</td><td>20%</td><td>Jul 6, 2006 8:14 AM</td></tr>
|
||||
<tr><td>21</td><td>John</td><td>Hood</td><td>33</td><td>$19.99</td><td>25%</td><td>Dec 10, 2002 5:14 AM</td></tr>
|
||||
<tr><td>013</td><td>Clark</td><td>Kent Sr.</td><td>18</td><td>$15.89</td><td>44%</td><td>Jan 12, 2003 11:14 AM</td></tr>
|
||||
<tr><td>005</td><td>Bruce</td><td>Almighty Esq</td><td>45</td><td>$153.19</td><td>44%</td><td>Jan 18, 2021 9:12 AM</td></tr>
|
||||
<tr><td>10</td><td>Alex</td><td>Dumass</td><td>13</td><td>$5.29</td><td>4%</td><td>Jan 8, 2012 5:11 PM</td></tr>
|
||||
<tr><td>16</td><td>Jim</td><td>Franco</td><td>24</td><td>$14.19</td><td>14%</td><td>Jan 14, 2004 11:23 AM</td></tr>
|
||||
<tr><td>166</td><td>Bruce Lee</td><td>Evans</td><td>22</td><td>$13.19</td><td>11%</td><td>Jan 18, 2007 9:12 AM</td></tr>
|
||||
<tr><td>100</td><td>Brenda Dexter</td><td>McMasters</td><td>18</td><td>$55.20</td><td>15%</td><td>Feb 12, 2010 7:23 PM</td></tr>
|
||||
<tr><td>55</td><td>Dennis</td><td>Bronson</td><td>65</td><td>$123.00</td><td>32%</td><td>Jan 20, 2001 1:12 PM</td></tr>
|
||||
<tr><td>9</td><td>Martha</td><td>delFuego</td><td>25</td><td>$22.09</td><td>17%</td><td>Jun 11, 2011 10:55 AM</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<h1>Css</h1>
|
||||
<div id="css">
|
||||
<pre class="prettyprint lang-css"></pre>
|
||||
</div>
|
||||
|
||||
<h1>HTML</h1>
|
||||
<div>
|
||||
<pre class="prettyprint lang-html"><h3>CSS only popup</h3>
|
||||
<!-- This selector markup is completely customizable -->
|
||||
<div class="columnSelectorWrapper">
|
||||
<input id="colSelect1" type="checkbox" class="hidden">
|
||||
<label class="columnSelectorButton" for="colSelect1">Column</label>
|
||||
<div id="columnSelector" class="columnSelector">
|
||||
<!-- this div is where the column selector is added -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<table class="tablesorter custom-popup">
|
||||
<thead>
|
||||
<tr>
|
||||
<th data-priority="critical">Name</th>
|
||||
<!-- Remove column from selection popup by including -->
|
||||
<!-- data-priority="Anything other than 1-6" OR data-column-selector="disable" OR class="columnSelector-disable" -->
|
||||
<th class="columnSelector-disable">Major</th>
|
||||
<!-- columnSelector-false will initially hide the column -->
|
||||
<th class="columnSelector-false" data-priority="6" data-selector-name="Gender">Sex</th>
|
||||
<th data-priority="4">English</th>
|
||||
<th data-priority="5">Japanese</th>
|
||||
<th data-priority="3">Calculus</th>
|
||||
<th data-priority="2">Geometry</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tfoot>
|
||||
<tr><th>Name</th><th>Major</th><th>Sex</th><th>English</th><th>Japanese</th><th>Calculus</th><th>Geometry</th></tr>
|
||||
</tfoot>
|
||||
<tbody>
|
||||
<!-- ... -->
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<h3>Bootstrap Popover</h3>
|
||||
<!-- Bootstrap popover button -->
|
||||
<button id="popover" type="button" class="btn btn-default">
|
||||
Select Column
|
||||
</button>
|
||||
|
||||
<table class="tablesorter bootstrap-popup">
|
||||
<thead>
|
||||
<tr>
|
||||
<th data-priority="critical">Rank</th>
|
||||
<th data-priority="3">First Name</th>
|
||||
<th data-priority="critical">Last Name</th>
|
||||
<th data-priority="4">Age</th>
|
||||
<th data-priority="4">Total</th>
|
||||
<th data-priority="5">Discount</th>
|
||||
<th data-priority="6">Date</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<!-- ... -->
|
||||
</tbody>
|
||||
</table></pre>
|
||||
</div>
|
||||
|
||||
<h1>Javascript</h1>
|
||||
<div id="javascript">
|
||||
<pre class="prettyprint lang-js"></pre>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
226
assets/vendor/tablesorter/docs/example-widget-columns.html
vendored
Normal file
226
assets/vendor/tablesorter/docs/example-widget-columns.html
vendored
Normal file
@@ -0,0 +1,226 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery plugin: Tablesorter 2.0 - Columns Style Widget</title>
|
||||
|
||||
<!-- jQuery -->
|
||||
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2/jquery.min.js"></script>
|
||||
|
||||
<!-- Demo stuff -->
|
||||
<link rel="stylesheet" href="css/jq.css">
|
||||
<link href="css/prettify.css" rel="stylesheet">
|
||||
<script src="js/prettify.js"></script>
|
||||
<script src="js/docs.js"></script>
|
||||
|
||||
<!-- Tablesorter: required -->
|
||||
<link rel="stylesheet" href="../css/theme.default.css">
|
||||
<link rel="stylesheet" href="../css/theme.blue.css">
|
||||
<link rel="stylesheet" href="../css/theme.green.css">
|
||||
<link rel="stylesheet" href="../css/theme.grey.css">
|
||||
<link rel="stylesheet" href="../css/theme.ice.css">
|
||||
<link rel="stylesheet" href="../css/theme.black-ice.css">
|
||||
<link rel="stylesheet" href="../css/theme.dark.css">
|
||||
<link rel="stylesheet" href="../css/theme.dropbox.css">
|
||||
|
||||
<script src="../js/jquery.tablesorter.js"></script>
|
||||
<script src="../js/jquery.tablesorter.widgets.js"></script>
|
||||
|
||||
<script id="js">$(function() {
|
||||
|
||||
// call the tablesorter plugin
|
||||
$("table").tablesorter({
|
||||
theme : 'blue',
|
||||
|
||||
sortList : [[1,0],[2,0],[3,0]],
|
||||
|
||||
// header layout template; {icon} needed for some themes
|
||||
headerTemplate : '{content}{icon}',
|
||||
|
||||
// initialize zebra striping and column styling of the table
|
||||
widgets : ["zebra", "columns"],
|
||||
|
||||
widgetOptions : {
|
||||
// change the default column class names
|
||||
// primary is the first column sorted, secondary is the second, etc
|
||||
columns : [ "primary", "secondary", "tertiary" ],
|
||||
// include thead when adding class names
|
||||
columns_thead : true,
|
||||
// include tfoot when adding class names
|
||||
columns_tfoot : true
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
});</script>
|
||||
<script>
|
||||
$(function() {
|
||||
var themes = 'default blue green grey ice blackice dark dropbox',
|
||||
i, o = '', t = themes.split(' ');
|
||||
for (i = 0; i < t.length; i++) {
|
||||
o += '<option>' + t[i] + '</option>';
|
||||
}
|
||||
$('select')
|
||||
.html(o)
|
||||
.change(function(){
|
||||
var theme = $(this).val().toLowerCase();
|
||||
$('table')
|
||||
.removeClass('tablesorter-' + t.join(' tablesorter-'))
|
||||
.addClass('tablesorter-' + theme);
|
||||
}).trigger('change');
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="banner">
|
||||
<h1>table<em>sorter</em></h1>
|
||||
<h2>Columns Style Widget</h2>
|
||||
<h3>Flexible client-side table sorting</h3>
|
||||
<a href="index.html">Back to documentation</a>
|
||||
</div>
|
||||
<div id="main">
|
||||
|
||||
<p class="tip">
|
||||
<em>NOTE!</em>
|
||||
<ul>
|
||||
<li>As of tablesorter version 2.9+, this widget can no longer be applied to versions of tablesorter prior to version 2.8.</li>
|
||||
<li>Older versions of this widget can be applied to the original plugin. The code is in the "jquery.tablesorter.widgets.js" file.</li>
|
||||
<li>The original "widgetColumns" option has been replaced by "widgetOptions.columns". See the javascript block below for more details (v2.1).</li>
|
||||
<li>Table header and footer rows now get updated with the columns widget classes. Check out the "grey" theme to see (v2.4).</li>
|
||||
</ul>
|
||||
</p>
|
||||
|
||||
<h1>Demo</h1>
|
||||
Choose Theme:
|
||||
<select></select>
|
||||
<br><br>
|
||||
|
||||
<div id="demo"><table class="tablesorter">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>First Name</th>
|
||||
<th>Last Name</th>
|
||||
<th>Age</th>
|
||||
<th>Total</th>
|
||||
<th>Discount</th>
|
||||
<th>Date</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<th>First Name</th>
|
||||
<th>Last Name</th>
|
||||
<th>Age</th>
|
||||
<th>Total</th>
|
||||
<th>Discount</th>
|
||||
<th>Date</th>
|
||||
</tr>
|
||||
</tfoot>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Peter</td>
|
||||
<td>Parker</td>
|
||||
<td>28</td>
|
||||
<td>$9.99</td>
|
||||
<td>20%</td>
|
||||
<td>Jul 6, 2006 8:14 AM</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>John</td>
|
||||
<td>Hood</td>
|
||||
<td>33</td>
|
||||
<td>$19.99</td>
|
||||
<td>25%</td>
|
||||
<td>Dec 10, 2002 5:14 AM</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Clark</td>
|
||||
<td>Kent</td>
|
||||
<td>18</td>
|
||||
<td>$15.89</td>
|
||||
<td>44%</td>
|
||||
<td>Jan 12, 2003 11:14 AM</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Bruce</td>
|
||||
<td>Almighty</td>
|
||||
<td>45</td>
|
||||
<td>$153.19</td>
|
||||
<td>44%</td>
|
||||
<td>Jan 18, 2001 9:12 AM</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Bruce</td>
|
||||
<td>Evans</td>
|
||||
<td>22</td>
|
||||
<td>$13.19</td>
|
||||
<td>11%</td>
|
||||
<td>Jan 18, 2007 9:12 AM</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table></div>
|
||||
|
||||
<h1>Page Header</h1>
|
||||
<div>
|
||||
<pre class="prettyprint lang-html"><!-- blue theme stylesheet with additional css styles added in v2.0.17 -->
|
||||
<link rel="stylesheet" href="../css/theme.blue.css">
|
||||
<!-- tablesorter plugin -->
|
||||
<script src="../js/jquery.tablesorter.js"></script>
|
||||
|
||||
<!-- tablesorter widget file - loaded after the plugin -->
|
||||
<script src="../js/jquery.tablesorter.widgets.js"></script></pre>
|
||||
</div>
|
||||
|
||||
<h1>Javascript</h1>
|
||||
<div id="javascript">
|
||||
<pre class="prettyprint lang-javascript"></pre>
|
||||
</div>
|
||||
|
||||
<h1>CSS</h1>
|
||||
<div>
|
||||
<pre class="prettyprint lang-css">/*
|
||||
This css is part of the blue/style.css theme, shown as an example
|
||||
To work with the zebra widget, include the .odd and .even color definitions as well
|
||||
as definitions for the "primary", "secondary" and "tertiary" sorts.
|
||||
*/
|
||||
/* Column Widget - column sort colors */
|
||||
table.tablesorter-blue td.primary,
|
||||
table.tablesorter-blue tr.odd td.primary {
|
||||
background-color: #99b3e6;
|
||||
}
|
||||
table.tablesorter-blue tr.even td.primary {
|
||||
background-color: #c2d1f0;
|
||||
}
|
||||
|
||||
table.tablesorter-blue td.secondary,
|
||||
table.tablesorter-blue tr.odd td.secondary {
|
||||
background-color: #c2d1f0;
|
||||
}
|
||||
table.tablesorter-blue tr.even td.secondary {
|
||||
background-color: #d6e0f5;
|
||||
}
|
||||
|
||||
table.tablesorter-blue td.tertiary,
|
||||
table.tablesorter-blue tr.odd td.tertiary {
|
||||
background-color: #d6e0f5;
|
||||
}
|
||||
table.tablesorter-blue tr.even td.tertiary {
|
||||
background-color: #ebf0fa;
|
||||
}</pre>
|
||||
</div>
|
||||
|
||||
<h1>HTML</h1>
|
||||
<div id="html">
|
||||
<pre class="prettyprint lang-html"></pre>
|
||||
</div>
|
||||
|
||||
<div class="next-up">
|
||||
<hr />
|
||||
Next up: <a href="example-widget-filter.html">Applying the filter widget ››</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
232
assets/vendor/tablesorter/docs/example-widget-css-sticky-header.html
vendored
Normal file
232
assets/vendor/tablesorter/docs/example-widget-css-sticky-header.html
vendored
Normal file
@@ -0,0 +1,232 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery plugin: Tablesorter 2.0 - CSS Sticky Header Widget</title>
|
||||
|
||||
<!-- jQuery -->
|
||||
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.js"></script>
|
||||
|
||||
<!-- Demo stuff -->
|
||||
<link rel="stylesheet" href="css/jq.css">
|
||||
<link href="css/prettify.css" rel="stylesheet">
|
||||
<script src="js/prettify.js"></script>
|
||||
<script src="js/docs.js"></script>
|
||||
|
||||
<!-- Tablesorter: theme -->
|
||||
<link class="ui-theme" rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/cupertino/jquery-ui.css">
|
||||
<link class="ui-theme" rel="stylesheet" href="../css/theme.jui.css">
|
||||
<link class="theme" rel="stylesheet" href="../css/theme.default.css">
|
||||
<link class="theme" rel="stylesheet" href="../css/theme.blue.css">
|
||||
<link class="theme" rel="stylesheet" href="../css/theme.green.css">
|
||||
<link class="theme" rel="stylesheet" href="../css/theme.grey.css">
|
||||
<link class="theme" rel="stylesheet" href="../css/theme.ice.css">
|
||||
<link class="theme" rel="stylesheet" href="../css/theme.black-ice.css">
|
||||
<link class="theme" rel="stylesheet" href="../css/theme.dark.css">
|
||||
<link class="theme" rel="stylesheet" href="../css/theme.dropbox.css">
|
||||
|
||||
<style id="css">/* wrapper of table 2 */
|
||||
.wrapper {
|
||||
position: relative;
|
||||
top: 50px;
|
||||
height: 250px;
|
||||
overflow-x: auto;
|
||||
}</style>
|
||||
|
||||
<!-- Tablesorter script: required -->
|
||||
<script src="../js/jquery.tablesorter.js"></script>
|
||||
<script src="../js/jquery.tablesorter.widgets.js"></script>
|
||||
<script src="../js/widgets/widget-cssStickyHeaders.js"></script>
|
||||
|
||||
<script id="js">$(function(){
|
||||
|
||||
var options = {
|
||||
widthFixed : true,
|
||||
showProcessing: true,
|
||||
headerTemplate: '{content} {icon}', // Add icon for jui theme; new in v2.7!
|
||||
|
||||
widgets: [ 'uitheme', 'zebra', 'cssStickyHeaders', 'filter' ],
|
||||
|
||||
widgetOptions: {
|
||||
cssStickyHeaders_offset : 0,
|
||||
cssStickyHeaders_addCaption : true,
|
||||
cssStickyHeaders_attachTo : null
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
$("#table1").tablesorter(options);
|
||||
|
||||
/* make second table scroll within its wrapper */
|
||||
options.widgetOptions.cssStickyHeaders_attachTo = '.wrapper' // or $('.wrapper')
|
||||
$("#table2").tablesorter(options);
|
||||
|
||||
});</script>
|
||||
<script>
|
||||
$(function() {
|
||||
$('link.theme, link.ui-theme').each(function(){ this.disabled = true; });
|
||||
|
||||
var themes = 'default blue green grey ice black-ice dark dropbox',
|
||||
i, o = '', t = themes.split(' ');
|
||||
for (i = 0; i < t.length; i++) {
|
||||
o += '<option>' + t[i] + '</option>';
|
||||
}
|
||||
|
||||
$('select:first')
|
||||
.append(o)
|
||||
.change(function(){
|
||||
var theme = $(this).val().toLowerCase(),
|
||||
name = theme === 'jui' ? 'ui' : 'theme.' + theme,
|
||||
// ui-theme is added by the themeswitcher
|
||||
files = $('link.theme, link.ui-theme').each(function(){
|
||||
this.disabled = true;
|
||||
})
|
||||
files.filter('[href$="' + name + '.css"]').each(function(){
|
||||
this.disabled = false;
|
||||
});
|
||||
$('table')
|
||||
.removeClass('tablesorter-' + t.join(' tablesorter-') + ' tablesorter-jui')
|
||||
.addClass('tablesorter-' + theme.replace(/-/,''));
|
||||
}).change();
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="banner">
|
||||
<h1>table<em>sorter</em></h1>
|
||||
<h2>CSS Sticky Header Widget</h2>
|
||||
<h3>Flexible client-side table sorting</h3>
|
||||
<a href="index.html">Back to documentation</a>
|
||||
</div>
|
||||
|
||||
<div id="main">
|
||||
|
||||
<p class="tip">
|
||||
<em>NOTE!</em>
|
||||
<ul>
|
||||
<li>This demo uses the CSS Sticky Headers widget which uses CSS transforms to reposition the table head.</li>
|
||||
<li><a href="http://caniuse.com/#search=transform">CSS transforms</a> are supported by most modern browsers (not IE8 and older).</li>
|
||||
<li>In <span class="version">v2.14.4</span>:
|
||||
<ul>
|
||||
<li>Added <code>cssStickyHeaders_attachTo</code> (default set to <code>null</code>). Setting this option with either a jQuery selector string (<code>".wrapper"</code>) or jQuery object (<code>$(".wrapper")</code>) to attach the sticky header to this element - see the second example below.</li>
|
||||
<li>Removed <code>cssStickyHeaders_offsetX</code> option & renamed <code>cssStickyHeaders_offsetY</code> to <code>cssStickyHeaders_offset</code> as the horizontal offset is not required.</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>The jQuery UI themed table does not stick to the top of the page due to the extra padding. Adjust the <code>cssStickyHeaders_offset</code> option as desired. I didn't bother in this demo because it includes more than just the jQuery UI theme.</li>
|
||||
<li>This widget <em>will not work</em> with the original tablesorter, but works optimally with tablesorter v2.8+ (Added <span class="version">v2.14.2</span>; Updated <span class="version updated">v2.14.4</span>)</li>
|
||||
</ul>
|
||||
</p>
|
||||
|
||||
<h1>CSS</h1>
|
||||
<div id="css">
|
||||
<pre class="prettyprint lang-css"></pre>
|
||||
</div>
|
||||
|
||||
<h1>Javascript</h1>
|
||||
<div id="javascript">
|
||||
<pre class="prettyprint lang-javascript"></pre>
|
||||
</div>
|
||||
|
||||
<h1>Demo</h1>
|
||||
Choose Theme:
|
||||
<select>
|
||||
<option value="jui">Jquery UI</option>
|
||||
</select>
|
||||
<br><br>
|
||||
<h1>Attach sticky header to browser window</h1>
|
||||
<table id="table1" class="tablesorter">
|
||||
<caption>Student Grades</caption>
|
||||
<thead>
|
||||
<tr><th>Name</th><th>Major</th><th>Sex</th><th>English</th><th>Japanese</th><th>Calculus</th><th class="filter-false sorter-false">Geometry</th></tr>
|
||||
</thead>
|
||||
<tfoot>
|
||||
<tr><th>Name</th><th>Major</th><th>Sex</th><th>English</th><th>Japanese</th><th>Calculus</th><th>Geometry</th></tr>
|
||||
</tfoot>
|
||||
<tbody>
|
||||
<tr><td>Student01</td><td>Languages</td><td>male</td><td>80</td><td>70</td><td>75</td><td>80</td></tr>
|
||||
<tr><td>Student02</td><td>Mathematics</td><td>male</td><td>90</td><td>88</td><td>100</td><td>90</td></tr>
|
||||
<tr><td>Student03</td><td>Languages</td><td>female</td><td>85</td><td>95</td><td>80</td><td>85</td></tr>
|
||||
<tr><td>Student04</td><td>Languages</td><td>male</td><td>60</td><td>55</td><td>100</td><td>100</td></tr>
|
||||
<tr><td>Student05</td><td>Languages</td><td>female</td><td>68</td><td>80</td><td>95</td><td>80</td></tr>
|
||||
<tr><td>Student06</td><td>Mathematics</td><td>male</td><td>100</td><td>99</td><td>100</td><td>90</td></tr>
|
||||
<tr><td>Student07</td><td>Mathematics</td><td>male</td><td>85</td><td>68</td><td>90</td><td>90</td></tr>
|
||||
<tr><td>Student08</td><td>Languages</td><td>male</td><td>100</td><td>90</td><td>90</td><td>85</td></tr>
|
||||
<tr><td>Student09</td><td>Mathematics</td><td>male</td><td>80</td><td>50</td><td>65</td><td>75</td></tr>
|
||||
<tr><td>Student10</td><td>Languages</td><td>male</td><td>85</td><td>100</td><td>100</td><td>90</td></tr>
|
||||
<tr><td>Student11</td><td>Languages</td><td>male</td><td>86</td><td>85</td><td>100</td><td>100</td></tr>
|
||||
<tr><td>Student12</td><td>Mathematics</td><td>female</td><td>100</td><td>75</td><td>70</td><td>85</td></tr>
|
||||
<tr><td>Student13</td><td>Languages</td><td>female</td><td>100</td><td>80</td><td>100</td><td>90</td></tr>
|
||||
<tr><td>Student14</td><td>Languages</td><td>female</td><td>50</td><td>45</td><td>55</td><td>90</td></tr>
|
||||
<tr><td>Student15</td><td>Languages</td><td>male</td><td>95</td><td>35</td><td>100</td><td>90</td></tr>
|
||||
<tr><td>Student16</td><td>Languages</td><td>female</td><td>100</td><td>50</td><td>30</td><td>70</td></tr>
|
||||
<tr><td>Student17</td><td>Languages</td><td>female</td><td>80</td><td>100</td><td>55</td><td>65</td></tr>
|
||||
<tr><td>Student18</td><td>Mathematics</td><td>male</td><td>30</td><td>49</td><td>55</td><td>75</td></tr>
|
||||
<tr><td>Student19</td><td>Languages</td><td>male</td><td>68</td><td>90</td><td>88</td><td>70</td></tr>
|
||||
<tr><td>Student20</td><td>Mathematics</td><td>male</td><td>40</td><td>45</td><td>40</td><td>80</td></tr>
|
||||
<tr><td>Student21</td><td>Languages</td><td>male</td><td>50</td><td>45</td><td>100</td><td>100</td></tr>
|
||||
<tr><td>Student22</td><td>Mathematics</td><td>male</td><td>100</td><td>99</td><td>100</td><td>90</td></tr>
|
||||
<tr><td>Student23</td><td>Languages</td><td>female</td><td>85</td><td>80</td><td>80</td><td>80</td></tr>
|
||||
<tr><td>student23</td><td>Mathematics</td><td>male</td><td>82</td><td>77</td><td>0</td><td>79</td></tr>
|
||||
<tr><td>student24</td><td>Languages</td><td>female</td><td>100</td><td>91</td><td>13</td><td>82</td></tr>
|
||||
<tr><td>student25</td><td>Mathematics</td><td>male</td><td>22</td><td>96</td><td>82</td><td>53</td></tr>
|
||||
<tr><td>student26</td><td>Languages</td><td>female</td><td>37</td><td>29</td><td>56</td><td>59</td></tr>
|
||||
<tr><td>student27</td><td>Mathematics</td><td>male</td><td>86</td><td>82</td><td>69</td><td>23</td></tr>
|
||||
<tr><td>student28</td><td>Languages</td><td>female</td><td>44</td><td>25</td><td>43</td><td>1</td></tr>
|
||||
<tr><td>student29</td><td>Mathematics</td><td>male</td><td>77</td><td>47</td><td>22</td><td>38</td></tr>
|
||||
<tr><td>student30</td><td>Languages</td><td>female</td><td>19</td><td>35</td><td>23</td><td>10</td></tr>
|
||||
<tr><td>student31</td><td>Mathematics</td><td>male</td><td>90</td><td>27</td><td>17</td><td>50</td></tr>
|
||||
<tr><td>student32</td><td>Languages</td><td>female</td><td>60</td><td>75</td><td>33</td><td>38</td></tr>
|
||||
<tr><td>student33</td><td>Mathematics</td><td>male</td><td>4</td><td>31</td><td>37</td><td>15</td></tr>
|
||||
<tr><td>student34</td><td>Languages</td><td>female</td><td>77</td><td>97</td><td>81</td><td>44</td></tr>
|
||||
<tr><td>student35</td><td>Mathematics</td><td>male</td><td>5</td><td>81</td><td>51</td><td>95</td></tr>
|
||||
<tr><td>student36</td><td>Languages</td><td>female</td><td>70</td><td>61</td><td>70</td><td>94</td></tr>
|
||||
<tr><td>student37</td><td>Mathematics</td><td>male</td><td>60</td><td>3</td><td>61</td><td>84</td></tr>
|
||||
<tr><td>student38</td><td>Languages</td><td>female</td><td>63</td><td>39</td><td>0</td><td>11</td></tr>
|
||||
<tr><td>student39</td><td>Mathematics</td><td>male</td><td>50</td><td>46</td><td>32</td><td>38</td></tr>
|
||||
<tr><td>student40</td><td>Languages</td><td>female</td><td>51</td><td>75</td><td>25</td><td>3</td></tr>
|
||||
<tr><td>student41</td><td>Mathematics</td><td>male</td><td>43</td><td>34</td><td>28</td><td>78</td></tr>
|
||||
<tr><td>student42</td><td>Languages</td><td>female</td><td>11</td><td>89</td><td>60</td><td>95</td></tr>
|
||||
<tr><td>student43</td><td>Mathematics</td><td>male</td><td>48</td><td>92</td><td>18</td><td>88</td></tr>
|
||||
<tr><td>student44</td><td>Languages</td><td>female</td><td>82</td><td>2</td><td>59</td><td>73</td></tr>
|
||||
<tr><td>student45</td><td>Mathematics</td><td>male</td><td>91</td><td>73</td><td>37</td><td>39</td></tr>
|
||||
<tr><td>student46</td><td>Languages</td><td>female</td><td>4</td><td>8</td><td>12</td><td>10</td></tr>
|
||||
<tr><td>student47</td><td>Mathematics</td><td>male</td><td>89</td><td>10</td><td>6</td><td>11</td></tr>
|
||||
<tr><td>student48</td><td>Languages</td><td>female</td><td>90</td><td>32</td><td>21</td><td>18</td></tr>
|
||||
<tr><td>student49</td><td>Mathematics</td><td>male</td><td>42</td><td>49</td><td>49</td><td>72</td></tr>
|
||||
<tr><td>student50</td><td>Languages</td><td>female</td><td>56</td><td>37</td><td>67</td><td>54</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<h1>Attach sticky header to its parent</h1>
|
||||
<div class="narrow-block wrapper">
|
||||
<table id="table2" class="tablesorter">
|
||||
<caption>Student Grades</caption>
|
||||
<thead>
|
||||
<tr><th>Account #</th><th>First Name</th><th>Last Name</th><th>Age</th><th>Total</th><th>Discount</th><th>Diff</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>A43</td><td>Peter</td><td>Parker</td><td>28</td><td>9.99</td><td>20.3%</td><td>+3</td></tr>
|
||||
<tr><td>A255</td><td>John</td><td>Hood</td><td>33</td><td>19.99</td><td>25.1%</td><td>-7</td></tr>
|
||||
<tr><td>A33</td><td>Clark</td><td>Kent</td><td>18</td><td>15.49</td><td>44.2%</td><td>-13</td></tr>
|
||||
<tr><td>A11</td><td>Bruce</td><td>Almighty</td><td>45</td><td>153.19</td><td>44%</td><td>+19</td></tr>
|
||||
<tr><td>A102</td><td>Bruce</td><td>Evans</td><td>56</td><td>153.19</td><td>23%</td><td>+9</td></tr>
|
||||
<tr><td>A23</td><td>Mike</td><td>Peters</td><td>22</td><td>5.69</td><td>20.3%</td><td>+2</td></tr>
|
||||
<tr><td>A55</td><td>Leslie</td><td>Kent</td><td>33</td><td>15.99</td><td>25.1%</td><td>-3</td></tr>
|
||||
<tr><td>A3</td><td>Frank</td><td>Mint</td><td>44</td><td>12.59</td><td>44.2%</td><td>-12</td></tr>
|
||||
<tr><td>A21</td><td>Joe</td><td>Thomas</td><td>45</td><td>15.25</td><td>44%</td><td>+12</td></tr>
|
||||
<tr><td>A12</td><td>Tess</td><td>Evans</td><td>66</td><td>13.59</td><td>23%</td><td>+4</td></tr>
|
||||
<tr><td>A21</td><td>Peter</td><td>Dunn</td><td>12</td><td>2.99</td><td>21.1%</td><td>+2</td></tr>
|
||||
<tr><td>A33</td><td>Harry</td><td>Jones</td><td>13</td><td>19.49</td><td>22.2%</td><td>-6</td></tr>
|
||||
<tr><td>A13</td><td>John</td><td>James</td><td>16</td><td>13.89</td><td>42.1%</td><td>-13</td></tr>
|
||||
<tr><td>A71</td><td>Nick</td><td>Parker</td><td>45</td><td>13.89</td><td>44%</td><td>+29</td></tr>
|
||||
<tr><td>A21</td><td>Charles</td><td>Dunn</td><td>19</td><td>15.49</td><td>22%</td><td>+3</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="spacer"></div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
183
assets/vendor/tablesorter/docs/example-widget-editable.html
vendored
Normal file
183
assets/vendor/tablesorter/docs/example-widget-editable.html
vendored
Normal file
@@ -0,0 +1,183 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery plugin: Tablesorter 2.0 - Content Editable</title>
|
||||
|
||||
<!-- jQuery -->
|
||||
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
|
||||
|
||||
<!-- Demo stuff -->
|
||||
<link rel="stylesheet" href="css/jq.css">
|
||||
<link href="css/prettify.css" rel="stylesheet">
|
||||
<script src="js/prettify.js"></script>
|
||||
<script src="js/docs.js"></script>
|
||||
|
||||
<!-- Tablesorter: required -->
|
||||
<link rel="stylesheet" href="../css/theme.blue.css">
|
||||
<script src="../js/jquery.tablesorter.js"></script>
|
||||
|
||||
<script src="../js/widgets/widget-editable.js"></script>
|
||||
<style id="css">.tablesorter tbody > tr > td[contenteditable=true]:focus {
|
||||
outline: #08f 1px solid;
|
||||
background: #eee;
|
||||
resize: none;
|
||||
}
|
||||
td.no-edit, span.no-edit {
|
||||
background-color: rgba(230,191,153,0.5);
|
||||
}</style>
|
||||
|
||||
<script id="js">$(function() {
|
||||
|
||||
$("table")
|
||||
.tablesorter({
|
||||
theme : 'blue',
|
||||
|
||||
widgets: ['editable'],
|
||||
widgetOptions: {
|
||||
editable_columns : [0,1,2], // or "0-2" (v2.14.2); point to the columns to make editable (zero-based index)
|
||||
editable_enterToAccept : true, // press enter to accept content, or click outside if false
|
||||
editable_autoResort : false, // auto resort after the content has changed.
|
||||
editable_noEdit : 'no-edit', // class name of cell that is not editable
|
||||
editable_editComplete : 'editComplete' // event fired after the table content has been edited
|
||||
}
|
||||
})
|
||||
.children('tbody').on('editComplete', 'td', function(){
|
||||
var $this = $(this),
|
||||
$allRows = $this.closest('table')[0].config.$tbodies.children('tr'),
|
||||
|
||||
newContent = $this.text(),
|
||||
cellIndex = this.cellIndex, // there shouldn't be any colspans in the tbody
|
||||
rowIndex = $allRows.index( $this.closest('tr') );
|
||||
/*
|
||||
$.post("mysite.php", {
|
||||
"row" : rowIndex,
|
||||
"cell" : cellIndex,
|
||||
"content" : newContent
|
||||
});
|
||||
*/
|
||||
});
|
||||
|
||||
});</script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="banner">
|
||||
<h1>table<em>sorter</em></h1>
|
||||
<h2>Content Editable</h2>
|
||||
<h3>Flexible client-side table sorting</h3>
|
||||
<a href="index.html">Back to documentation</a>
|
||||
</div>
|
||||
<div id="main">
|
||||
|
||||
<p class="tip">
|
||||
<em>NOTE!</em>
|
||||
<ul>
|
||||
<li>This widget can not be applied to the original plugin and requires jQuery 1.7+ and a browser that supports <a href="http://caniuse.com/#feat=contenteditable"><code>contenteditable</code> attributes</a> (almost all modern browsers).</li>
|
||||
<li><span class="alert">Note</span>: In Internet Explorer, please wrap the cell content with a DIV or SPAN as <a href="http://msdn.microsoft.com/en-us/library/ie/ms533690(v=vs.85).aspx">it is not possible to make table cells directly contenteditable</a>. Wrapping the content in the markup is much more efficient than using javascript to do it for you (especially in IE).</li>
|
||||
<li>Updated <span class="version updated">v2.13.2</span>, because of the limitation in IE, if a table cell contains any DIV or SPAN immediately inside the cell, it will be targeted instead of the table cell itself and made content editable. So, if you don't care about IE support, there is no need to include the extra markup.</li>
|
||||
<li>In some browsers, additional CSS is needed to highlight a focused editable table cell. See the CSS block below.</li>
|
||||
<li>Editable widget options include (defaults in parenthesis):
|
||||
<ul>
|
||||
<li><code>editable_column</code> (<code>[]</code>)
|
||||
<ul>
|
||||
<li>In tablesorter core <span class="version">v2.14.2</span>, this widget was updated to allow passing a range string in this option, i.e. <code>"0-2"</code> instead of <code>[0,1,2]</code>.</li>
|
||||
<li>Contains an array of columns numbers you want to have editable content (zero-based index). <code>contenteditable="true"</code> is added to cells within these columns.</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><code>editable_enterToAccept</code> (<code>true</code>) - Makes the user press enter to accept the content within the editable table cell; if <code>false</code>, clicking outside the cell will accept the content.</li>
|
||||
<li><code>editable_autoResort</code> (<code>false</code>) - If <code>true</code> the column will resort (only if already sorted) after the content has been changed.</li>
|
||||
<li><code>editable_noEdit</code> (<code>'no-edit'</code>) - Class name on table cells to search for that are not to become editable. The search is only done within the columns set by the <code>editable_column</code> option.</li>
|
||||
<li><code>editable_editComplete</code> (<code>'editComplete'</code>) - Event fired after the table content has been edited.</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>Pressing escape while editing will cancel any changes.</li>
|
||||
<li>In the demo below, click in any of the first three columns to edit the content, except for the cell containing <span class="no-edit">"Peter"</span>.</li>
|
||||
<li>To prevent a table cell from becoming editable, add the class name <code>"no-edit"</code> to the cell.</li>
|
||||
<li>Edited content will be accepted in the following circumstances:
|
||||
<ul>
|
||||
<li>Pressing enter when the <code>editable_enterToAccept</code> option is <code>true</code>.</li>
|
||||
<li>Clicking outside of the current editable content.</li>
|
||||
<li>Moving the mouse outside of the current tbody. This is done because if the content editable is still active when the user clicks on the header to sort the column, all sorts of bad things happen.</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>Edited content will not be accepted in the following circumstances:
|
||||
<ul>
|
||||
<li>Pressing Escape within the editable content.</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</p>
|
||||
|
||||
<h1>Demo</h1>
|
||||
<div id="demo"><table class="tablesorter">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>First Name</th>
|
||||
<th>Last Name</th>
|
||||
<th>Age</th>
|
||||
<th>Total</th>
|
||||
<th>Discount</th>
|
||||
<th>Date</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="no-edit">Peter</td>
|
||||
<td><div>Parker</div></td>
|
||||
<td><div>28</div></td>
|
||||
<td>$9.99</td>
|
||||
<td>20%</td>
|
||||
<td>Jul 6, 2006 8:14 AM</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><div>John</div></td>
|
||||
<td><div>Hood</div></td>
|
||||
<td><div>33</div></td>
|
||||
<td>$19.99</td>
|
||||
<td>25%</td>
|
||||
<td>Dec 10, 2002 5:14 AM</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><div>Clark</div></td>
|
||||
<td><div>Kent</div></td>
|
||||
<td><div>18</div></td>
|
||||
<td>$15.89</td>
|
||||
<td>44%</td>
|
||||
<td>Jan 12, 2003 11:14 AM</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><div>Bruce</div></td>
|
||||
<td><div>Almighty</div></td>
|
||||
<td><div>45</div></td>
|
||||
<td>$153.19</td>
|
||||
<td>44%</td>
|
||||
<td>Jan 18, 2001 9:12 AM</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><div>Bruce</div></td>
|
||||
<td><div>Evans</div></td>
|
||||
<td><div>22</div></td>
|
||||
<td>$13.19</td>
|
||||
<td>11%</td>
|
||||
<td>Jan 18, 2007 9:12 AM</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table></div>
|
||||
<h1>Javascript</h1>
|
||||
<div id="javascript">
|
||||
<pre class="prettyprint lang-javascript"></pre>
|
||||
</div>
|
||||
<h1>CSS</h1>
|
||||
<div id="css">
|
||||
<pre class="prettyprint lang-css"></pre>
|
||||
</div>
|
||||
<h1>HTML</h1>
|
||||
<div id="html">
|
||||
<pre class="prettyprint lang-html"></pre>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
162
assets/vendor/tablesorter/docs/example-widget-filter-any-match.html
vendored
Normal file
162
assets/vendor/tablesorter/docs/example-widget-filter-any-match.html
vendored
Normal file
@@ -0,0 +1,162 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery plugin: Tablesorter 2.0 - Filter Widget External Search</title>
|
||||
|
||||
<!-- jQuery -->
|
||||
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.js"></script>
|
||||
|
||||
<!-- Demo stuff -->
|
||||
<link class="ui-theme" rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/cupertino/jquery-ui.css">
|
||||
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
|
||||
<link rel="stylesheet" href="css/jq.css">
|
||||
<link href="css/prettify.css" rel="stylesheet">
|
||||
<script src="js/prettify.js"></script>
|
||||
<script src="js/docs.js"></script>
|
||||
|
||||
<!-- Tablesorter: required -->
|
||||
<link rel="stylesheet" href="../css/theme.blue.css">
|
||||
<script src="../js/jquery.tablesorter.js"></script>
|
||||
<script src="../js/jquery.tablesorter.widgets.js"></script>
|
||||
|
||||
<script id="js">$(function() {
|
||||
|
||||
var $table = $('table').tablesorter({
|
||||
theme: 'blue',
|
||||
widgets: ["zebra", "filter"],
|
||||
widgetOptions : {
|
||||
// filter_anyMatch replaced! Instead use the filter_external option
|
||||
// Set to use a jQuery selector (or jQuery object) pointing to the
|
||||
// external filter (column specific or any match)
|
||||
filter_external : '.search',
|
||||
// include column filters
|
||||
filter_columnFilters: true,
|
||||
filter_saveFilters : true,
|
||||
filter_reset: '.reset'
|
||||
}
|
||||
});
|
||||
|
||||
});</script>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<div id="banner">
|
||||
<h1>table<em>sorter</em></h1>
|
||||
<h2>Filter Widget External Search</h2>
|
||||
<h3>Flexible client-side table sorting</h3>
|
||||
<a href="index.html">Back to documentation</a>
|
||||
</div>
|
||||
<div id="main">
|
||||
|
||||
<p></p>
|
||||
<br>
|
||||
<div class="accordion">
|
||||
|
||||
<h3><a href="#">Notes</a></h3>
|
||||
<div>
|
||||
<ul>
|
||||
<li>This is a demo of the <a href="index.html#widget-filter-external"><code>filter_external</code></a> option (added <span class="version">v2.15</span>).</li>
|
||||
<li>In <span class="version">v2.15</span>
|
||||
<ul>
|
||||
<li>The <a class="alert" href="index.html#widget-filter-any-match"><code>filter_anyMatch</code></a> has been <span class="label alert">removed</span> (added <span class="version">v2.13.3</span>; removed in v2.15)</li>
|
||||
<li>A new option <code>filter_external</code> has been added. It is set to a jQuery selector string (<code>'.search'</code>) or jQuery object (<code>$('.search')</code>) targetting an external input.</li>
|
||||
<li>So now a table can include <em>both</em> a filter row (<code>filter_columnFilters</code> is <code>true</code>, i.e. the internal table filters) and any number of external search inputs (as set by the <code>filter_external</code> option).</li>
|
||||
<li>The external search results must have a <code>data-column="#"</code> attribute set, where <code>#</code> is the index of the column (zero-based) that the input targets, to have an input search all table content, set the data column attribute to <code>"all"</code> to match any column.</li>
|
||||
<li>The <a href="index.html#function-bindsearch"><code>$.tablesorter.bindSearch</code> function</a> (<a href="example-widget-filter-external-inputs.html">see demo</a>) does exactly the same thing as the <code>filter_external</code> option. The major difference is seen when using ajax to populate the table, the initial filter values can be set before tablesorter initialization when using teh <code>filter_external</code> option; whereas, the bind search function can not set initial filter values and is usually executed after tablesorter initialization.</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<h3><a href="#">Limitations</a></h3>
|
||||
<div>
|
||||
<ul>
|
||||
<li>The any-match search method has limitations applied. It does not support all of the per column search features! So, at this time, the following types of queries are not allowed as the results will cause confusion:
|
||||
<ul>
|
||||
<li>Search operators - A search for values equal, greater or less than values (<code>> >= <= <</code>) is not allowed because tables that contain both numbers and text (in separate columns). For example:
|
||||
<pre class="prettyprint lang-javascript">"Fred" > "1" // true*
|
||||
"Fred" < "10" // false
|
||||
"Fred" > 1 // false (numeric comparisons occur with parsed table data)
|
||||
"Fred" > 1 // false
|
||||
"Fred" < 10 // false</pre>* For comparisons, letters have a greater <a href="http://en.wikipedia.org/wiki/Ascii#ASCII_printable_characters">ASCII value</a> than numbers.
|
||||
</li>
|
||||
<li>Range query - A search for any number range (<code>1 - 10</code>) is not allowed because, if any columns contain text, then no rows will result. The examples are the same as the search operators examples above.</li>
|
||||
<li>Not Match query - A search for not matches (<code>!a</code>) is not allowed because tables that contain both numbers and text (in separate columns) will always show all rows. For example:
|
||||
<pre class="prettyprint lang-javascript">"Frank".search("a") // 2 (a match, so this row "may" be hidden)
|
||||
"Fred".search("a") // -1 (a not match! so this row will always show)
|
||||
"25".search("a") // -1 (a not match! so this row will always show)
|
||||
"1/1/2014".search("a") // -1 (a not match! so this row will always show)</pre>
|
||||
</li>
|
||||
<li>Allowed filters include plain text matching, fuzzy search (<code>~</code>), exact match (<code>"</code>), wild card matches( <code>?</code> or <code>*</code>), regex (<code>/\d/g</code>), and logical and (<code>a && b</code>)/or (<code>a|b</code>) matches.</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>Setting this option should work properly with or without the column filters. The only issue you would have is if you triggered a search on the table using an array with undefined or null array values, like this:
|
||||
<pre class="prettyprint lang-javascript">// apply "2?%" filter to the fifth column (zero-based index)
|
||||
var columns = [];
|
||||
columns[5] = '2?%';
|
||||
// anyMatch will kick in on undefined column filters,
|
||||
// unless the array looks like this: columns = [ '', '', '', '', '', '2?%' ]
|
||||
$('table').trigger('search', [ columns ]);</pre>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<br>
|
||||
|
||||
<h1>Demo</h1>
|
||||
|
||||
<div id="demo"><input class="search" type="search" data-column="all"> (Match any column)<br>
|
||||
<input class="search" type="search" data-column="1"> (First Name)<br>
|
||||
|
||||
<!-- targeted by the "filter_reset" option -->
|
||||
<button type="button" class="reset">Reset Search</button>
|
||||
|
||||
<table class="tablesorter">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Rank</th>
|
||||
<th>First Name</th>
|
||||
<th>Last Name</th>
|
||||
<th>Age</th>
|
||||
<th>Total</th>
|
||||
<th>Discount</th>
|
||||
<th>Date</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>1</td><td>Philip Aaron</td><td>Johnson Sr Esq</td><td>25</td><td>$5.95</td><td>22%</td><td>Jun 26, 2004 7:22 AM</td></tr>
|
||||
<tr><td>11</td><td>Aaron</td><td>Hibert</td><td>12</td><td>$2.99</td><td>5%</td><td>Aug 21, 2009 12:21 PM</td></tr>
|
||||
<tr><td>12</td><td>Brandon Clark</td><td>Henry Jr</td><td>51</td><td>$42.29</td><td>18%</td><td>Oct 13, 2000 1:15 PM</td></tr>
|
||||
<tr><td>111</td><td>Peter</td><td>Parker</td><td>28</td><td>$9.99</td><td>20%</td><td>Jul 6, 2006 8:14 AM</td></tr>
|
||||
<tr><td>21</td><td>John</td><td>Hood</td><td>33</td><td>$19.99</td><td>25%</td><td>Dec 10, 2002 5:14 AM</td></tr>
|
||||
<tr><td>013</td><td>Clark</td><td>Kent Sr.</td><td>18</td><td>$15.89</td><td>44%</td><td>Jan 12, 2003 11:14 AM</td></tr>
|
||||
<tr><td>005</td><td>Bruce</td><td>Almighty Esq</td><td>45</td><td>$153.19</td><td>44%</td><td>Jan 18, 2021 9:12 AM</td></tr>
|
||||
<tr><td>10</td><td>Alex</td><td>Dumass</td><td>13</td><td>$5.29</td><td>4%</td><td>Jan 8, 2012 5:11 PM</td></tr>
|
||||
<tr><td>16</td><td>Jim</td><td>Franco</td><td>24</td><td>$14.19</td><td>14%</td><td>Jan 14, 2004 11:23 AM</td></tr>
|
||||
<tr><td>166</td><td>Bruce Lee</td><td>Evans</td><td>22</td><td>$13.19</td><td>11%</td><td>Jan 18, 2007 9:12 AM</td></tr>
|
||||
<tr><td>100</td><td>Brenda Lee</td><td>McMasters</td><td>18</td><td>$55.20</td><td>15%</td><td>Feb 12, 2010 7:23 PM</td></tr>
|
||||
<tr><td>55</td><td>Dennis</td><td>Bronson</td><td>65</td><td>$123.00</td><td>32%</td><td>Jan 20, 2001 1:12 PM</td></tr>
|
||||
<tr><td>9</td><td>Martha</td><td>delFuego</td><td>25</td><td>$22.09</td><td>17%</td><td>Jun 11, 2011 10:55 AM</td></tr>
|
||||
</tbody>
|
||||
</table></div>
|
||||
|
||||
<h1>Javascript</h1>
|
||||
<div id="javascript">
|
||||
<pre class="prettyprint lang-javascript"></pre>
|
||||
</div>
|
||||
|
||||
<h1>HTML</h1>
|
||||
<div id="html">
|
||||
<pre class="prettyprint lang-html"></pre>
|
||||
</div>
|
||||
|
||||
<div class="next-up">
|
||||
<hr />
|
||||
Next up: <a href="example-widget-filter-external-inputs.html">jQuery custom filter widget external inputs ››</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
434
assets/vendor/tablesorter/docs/example-widget-filter-custom.html
vendored
Normal file
434
assets/vendor/tablesorter/docs/example-widget-filter-custom.html
vendored
Normal file
@@ -0,0 +1,434 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery plugin: Tablesorter 2.0 - Custom Filter Widget Functions</title>
|
||||
|
||||
<!-- jQuery -->
|
||||
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
|
||||
|
||||
<!-- Demo stuff -->
|
||||
<link class="ui-theme" rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/cupertino/jquery-ui.css">
|
||||
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
|
||||
<link rel="stylesheet" href="css/jq.css">
|
||||
<link href="css/prettify.css" rel="stylesheet">
|
||||
<script src="js/prettify.js"></script>
|
||||
<script src="js/docs.js"></script>
|
||||
|
||||
<!-- Tablesorter: required -->
|
||||
<link rel="stylesheet" href="../css/theme.blue.css">
|
||||
<script src="../js/jquery.tablesorter.js"></script>
|
||||
<script src="../js/jquery.tablesorter.widgets.js"></script>
|
||||
|
||||
<script>
|
||||
$(function(){
|
||||
|
||||
// External search
|
||||
// buttons set up like this:
|
||||
// <button type="button" class="search" data-filter-column="4" data-filter-text="2?%">Saved Search</button>
|
||||
$('button.match').click(function(){
|
||||
|
||||
// toggle "filter-match" class on first column
|
||||
var first = $('table').find('th:first').toggleClass('filter-match');
|
||||
$('#mode').html( '' + first.hasClass('filter-match') );
|
||||
|
||||
/*** first method *** data-filter-column="1" data-filter-text="!son"
|
||||
add search value to Discount column (zero based index) input */
|
||||
var filters = $('table').find('.tablesorter-filter'),
|
||||
col = $(this).data('filter-column'), // zero-based index
|
||||
txt = $(this).data('filter-text'); // text to add to filter
|
||||
|
||||
filters.val(''); // clear all filters
|
||||
filters.eq(col).val(txt).trigger('search', false);
|
||||
|
||||
return false;
|
||||
});
|
||||
|
||||
});
|
||||
</script>
|
||||
|
||||
<script id="js">$(function() {
|
||||
|
||||
// call the tablesorter plugin
|
||||
$("table").tablesorter({
|
||||
theme: 'blue',
|
||||
|
||||
// hidden filter input/selects will resize the columns, so try to minimize the change
|
||||
widthFixed : true,
|
||||
|
||||
// initialize zebra striping and filter widgets
|
||||
widgets: ["zebra", "filter"],
|
||||
|
||||
// headers: { 5: { sorter: false, filter: false } },
|
||||
|
||||
widgetOptions : {
|
||||
|
||||
// extra css class applied to the table row containing the filters & the inputs within that row
|
||||
filter_cssFilter : '',
|
||||
|
||||
// If there are child rows in the table (rows with class name from "cssChildRow" option)
|
||||
// and this option is true and a match is found anywhere in the child row, then it will make that row
|
||||
// visible; default is false
|
||||
filter_childRows : false,
|
||||
|
||||
// if true, filters are collapsed initially, but can be revealed by hovering over the grey bar immediately
|
||||
// below the header row. Additionally, tabbing through the document will open the filter row when an input gets focus
|
||||
filter_hideFilters : false,
|
||||
|
||||
// Set this option to false to make the searches case sensitive
|
||||
filter_ignoreCase : true,
|
||||
|
||||
// jQuery selector string of an element used to reset the filters
|
||||
filter_reset : '.reset',
|
||||
|
||||
// Use the $.tablesorter.storage utility to save the most recent filters
|
||||
filter_saveFilters : true,
|
||||
|
||||
// Delay in milliseconds before the filter widget starts searching; This option prevents searching for
|
||||
// every character while typing and should make searching large tables faster.
|
||||
filter_searchDelay : 300,
|
||||
|
||||
// Set this option to true to use the filter to find text from the start of the column
|
||||
// So typing in "a" will find "albert" but not "frank", both have a's; default is false
|
||||
filter_startsWith : false,
|
||||
|
||||
// if false, filters are collapsed initially, but can be revealed by hovering over the grey bar immediately
|
||||
// below the header row. Additionally, tabbing through the document will open the filter row when an input gets focus
|
||||
filter_hideFilters : false,
|
||||
|
||||
// Add select box to 4th column (zero-based index)
|
||||
// each option has an associated function that returns a boolean
|
||||
// function variables:
|
||||
// e = exact text from cell
|
||||
// n = normalized value returned by the column parser
|
||||
// f = search filter input value
|
||||
// i = column index
|
||||
filter_functions : {
|
||||
|
||||
// Add select menu to this column
|
||||
// set the column value to true, and/or add "filter-select" class name to header
|
||||
// 0 : true,
|
||||
|
||||
// Exact match only
|
||||
1 : function(e, n, f, i, $r) {
|
||||
return e === f;
|
||||
},
|
||||
|
||||
// Add these options to the select dropdown (regex example)
|
||||
2 : {
|
||||
"A - D" : function(e, n, f, i, $r) { return /^[A-D]/.test(e); },
|
||||
"E - H" : function(e, n, f, i, $r) { return /^[E-H]/.test(e); },
|
||||
"I - L" : function(e, n, f, i, $r) { return /^[I-L]/.test(e); },
|
||||
"M - P" : function(e, n, f, i, $r) { return /^[M-P]/.test(e); },
|
||||
"Q - T" : function(e, n, f, i, $r) { return /^[Q-T]/.test(e); },
|
||||
"U - X" : function(e, n, f, i, $r) { return /^[U-X]/.test(e); },
|
||||
"Y - Z" : function(e, n, f, i, $r) { return /^[Y-Z]/.test(e); }
|
||||
},
|
||||
|
||||
// Add these options to the select dropdown (numerical comparison example)
|
||||
// Note that only the normalized (n) value will contain numerical data
|
||||
// If you use the exact text, you'll need to parse it (parseFloat or parseInt)
|
||||
4 : {
|
||||
"< $10" : function(e, n, f, i, $r) { return n < 10; },
|
||||
"$10 - $100" : function(e, n, f, i, $r) { return n >= 10 && n <=100; },
|
||||
"> $100" : function(e, n, f, i, $r) { return n > 100; }
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
});</script>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<div id="banner">
|
||||
<h1>table<em>sorter</em></h1>
|
||||
<h2>Custom Filter Widget Functions</h2>
|
||||
<h3>Flexible client-side table sorting</h3>
|
||||
<a href="index.html">Back to documentation</a>
|
||||
</div>
|
||||
<div id="main">
|
||||
|
||||
<p></p>
|
||||
<br>
|
||||
<div class="accordion">
|
||||
|
||||
<h3><a href="#">Notes</a></h3>
|
||||
<div>
|
||||
<ul>
|
||||
<li>In <span class="version">v2.14</span>, the <code>filter_saveFilters</code> option was added (default set to <code>false</code>); this demo has it set to <code>true</code> to provide an example.</li>
|
||||
<li>In <span class="version">v2.11</span>, the filter functions provide an additional parameter <code>$r</code> providing a jQuery object of the current row being searched by the filter.</li>
|
||||
<li>For <span class="version">v2.10.8</span>, the Age column includes the new <code>data-value</code> set to <code><30</code> which sets the default (starting) filter value (see <a href="index.html#widget-filter-defaultattrib">filter_defaultAttrib</a> for more details).</li>
|
||||
<li>As of tablesorter <span class="version">v2.9</span>, this widget can no longer be applied to versions of tablesorter prior to version 2.8.</li>
|
||||
<li>Custom filter widget option <code>filter_functions</code> was added in version 2.3.6.</li>
|
||||
<li>jQuery v1.4.3+ required.</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<h3><a href="#"><strong>Default Select</strong></a> <span class="xsmall">("First Name" column)</span></h3>
|
||||
<div>
|
||||
<ul>
|
||||
<li>To enable this type of select, set the <code>filter_functions</code> option for the column to <code>true</code>,<pre class="prettyprint lang-javascript">filter_functions : {
|
||||
|
||||
// Add select menu to this column
|
||||
// set the column value to true, and/or add "filter-select" class name to header
|
||||
0 : true
|
||||
|
||||
}</pre>or add a "filter-select" class to the column header cell (see code below).</li>
|
||||
<li>The default option text, "Select a name", is obtained from the header <code>data-placeholder</code> attribute of the column header cell. And when active, it will show all table rows.<pre class="prettyprint lang-html"><th class="filter-select" data-placeholder="Select a name">First Name</th></pre></li>
|
||||
<li>Add a "filter-match" class to only match instead of exactly match the selected value. Click on the "Match" button below to see the difference.<pre class="prettyprint lang-html"><th class="filter-select filter-match" data-placeholder="Select a name">First Name</th></pre></li>
|
||||
<li>The select is populated by the column text contents with repeated content combined (i.e. There are three "Aaron"'s in the first column, but only one in the dropdown.</li>
|
||||
<li>Select options are automatically alphanumerically (new in v2.4) sorted.</li>
|
||||
<li>Please check out what the "filter-onlyAvail" class name does by reviewing the details below (in the "Discount" column) (<span class="version">v2.10.1</span>).</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<h3><a href="#"><strong>Custom Filter Function</strong></a> <span class="xsmall">("Last Name" column)</span></h3>
|
||||
<div>
|
||||
<ul>
|
||||
<li>To enable this type of filter, add your custom function to the <code>filter_functions</code> option following this example:<pre class="prettyprint lang-javascript">filter_functions : {
|
||||
|
||||
// Exact match only
|
||||
1 : function(e, n, f, i, $r) {
|
||||
return e === f;
|
||||
}
|
||||
|
||||
}</pre></li>
|
||||
<li>The example shows you how to show only exact matches. The problem with this is that you can't see the matches while typing unless you set the <code>filter_searchDelay</code> option to be a bit longer.</li>
|
||||
<li>Also, the example only checks for an exact match (<code>===</code>) meaning the <code>filter_ignoreCase</code> option is ignored, but other comparisons can be made using regex and the insensitive "i" flag.</li>
|
||||
<li>See the filter function information below.</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<h3><a href="#"><strong>Custom Select</strong></a> <span class="xsmall">("City" or "Total" column)</span></h3>
|
||||
<div>
|
||||
<ul>
|
||||
<li>To enable this type of select, add your custom options within the <code>filter_functions</code> option.</li>
|
||||
<li>Each option is set as a "key:value" pair where the "key" is the actual text of the option and the "value" is the function associated with the option.</li>
|
||||
<li>Here is an example using alphabetical comparisons (using regular expressions):<pre class="prettyprint lang-javascript">filter_functions : {
|
||||
|
||||
// Add these options to the select dropdown (regex example)
|
||||
2 : {
|
||||
"A - D" : function(e, n, f, i, $r) { return /^[A-D]/.test(e); },
|
||||
"E - H" : function(e, n, f, i, $r) { return /^[E-H]/.test(e); },
|
||||
"I - L" : function(e, n, f, i, $r) { return /^[I-L]/.test(e); },
|
||||
"M - P" : function(e, n, f, i, $r) { return /^[M-P]/.test(e); },
|
||||
"Q - T" : function(e, n, f, i, $r) { return /^[Q-T]/.test(e); },
|
||||
"U - X" : function(e, n, f, i, $r) { return /^[U-X]/.test(e); },
|
||||
"Y - Z" : function(e, n, f, i, $r) { return /^[Y-Z]/.test(e); }
|
||||
}
|
||||
|
||||
}</pre></li>
|
||||
<li>Here is an example using numerical comparisons:<pre class="prettyprint lang-javascript">filter_functions : {
|
||||
// Add these options to the select dropdown (numerical comparison example)
|
||||
// Note that only the normalized (n) value will contain numerical data
|
||||
// If you use the exact text, you'll need to parse it (parseFloat or parseInt)
|
||||
4 : {
|
||||
"< $10" : function(e, n, f, i, $r) { return n < 10; },
|
||||
"$10 - $100" : function(e, n, f, i, $r) { return n >= 10 && n <=100; },
|
||||
"> $100" : function(e, n, f, i, $r) { return n > 100; }
|
||||
}
|
||||
}</pre></li>
|
||||
<li>See the "Filter function information" section below.</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<h3><a href="#"><strong>Default Select with only available options</strong></a> <span class="xsmall">("Discount" column)</span></h3>
|
||||
<div>
|
||||
<ul>
|
||||
<li>This column uses the same method as the "First Name" column with one exception, it also includes the "filter-onlyAvail" class name in the header
|
||||
cell:<pre class="prettyprint lang-html"><th class="filter-select filter-onlyAvail">Discount</th></pre></li>
|
||||
<li>To see how this works, do the following:
|
||||
<ul>
|
||||
<li>First, filter the "First Name" column by selecting the name "Clark"</li>
|
||||
<li>Now use the "Discount" filter select box, you'll notice that only the values associated with the first name of Clark are showing as options.</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>Conversely, if you reset the filters, select "44%" in the "Discount" column, then look at the "First Name" filter selector, you'll notice that it still contains all of the original options; because the "filter-onlyAvail" class name is not included in that column's header cell.</li>
|
||||
<li>Sorry, this functionality only works for default select filters.</li>
|
||||
<li>This funcitonality was added in <span class="version">v2.10.1</span>.</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<h3><a href="#"><strong>Filter function information</strong></a></h3>
|
||||
<div>
|
||||
<ul>
|
||||
<li>The custom function must return a boolean value. If <code>true</code> is returned, the row will be shown if all other filters match; and if <code>false</code> is returned, the row will be hidden.<pre class="prettyprint lang-javascript">function(e, n, f, i, $r) { return test; /* test should be a Boolean (true or false) */ }</pre></li>
|
||||
<li>The <strong>exact text (e)</strong> of the table cell is a variable passed to the function. Note that numbers will need to be parsed to make comparisons.</li>
|
||||
<li><strong>Normalized table cell data (n)</strong> is the next varibale passed to the function.
|
||||
<ul>
|
||||
<li>This data has been parsed by the assigned column parser, so make sure the same type of data is being compared as parsed data may not be what you expect.</li>
|
||||
<li>Normalized numerical values within the table will be of numeric type and not of string type, as the sorter needs to use mathematical comparisons while sorting.</li>
|
||||
<li>The data will be in lower-case if the <code>filter_ignoreCase</code> option is <code>true</code>.</li>
|
||||
<li>Dates like in the last column of the table below will store the time in seconds since 1970 (using javascript's .getTime() function).</li>
|
||||
<li>The percentage column will only store the number and not percentage sign.</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>The <strong>filter input value (f)</strong> is the exact text entered by the user. If numerical, it will need to be parsed using parseFloat() or parseInt() to allow for making comparisons.</li>
|
||||
<li>The <strong>column index (i)</strong> might be useful for obtaining more information from header, or something.</li>
|
||||
<li>The <strong>row ($r)</strong> is the current table row (jQuery object) being searched (or filtered); this allows access to any extra information within. To access the current cell, just use <code>$r.children().eq(i)</code>.</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h1>Demo</h1>
|
||||
<button type="button" class="match" data-filter-column="0" data-filter-text="Denni">Match</button> <span id="mode">false</span> (toggle "filter-match" class on First Name column)<br>
|
||||
<button type="button" class="reset">Reset Search</button>
|
||||
|
||||
<div id="demo"><table class="tablesorter">
|
||||
<thead>
|
||||
<tr>
|
||||
<!-- add "filter-select" class or filter_functions : { 0: true } -->
|
||||
<!-- add "filter-match" class to just match the content, so selecting "Denni" will also show "Dennis" -->
|
||||
<th class="filter-select" data-placeholder="Select a name">First Name</th>
|
||||
<th data-placeholder="Exact matches only">Last Name</th>
|
||||
<th data-placeholder="Choose a city">City</th>
|
||||
<th data-value="<30">Age</th>
|
||||
<th data-placeholder="Select a filter">Total</th>
|
||||
<th class="filter-select filter-onlyAvail">Discount</th>
|
||||
<th>Date</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Aaron</td>
|
||||
<td>Johnson Sr</td>
|
||||
<td>Atlanta</td>
|
||||
<td>35</td>
|
||||
<td>$5.95</td>
|
||||
<td>22%</td>
|
||||
<td>Jun 26, 2004 7:22 AM</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Aaron</td>
|
||||
<td>Johnson</td>
|
||||
<td>Yuma</td>
|
||||
<td>12</td>
|
||||
<td>$2.99</td>
|
||||
<td>5%</td>
|
||||
<td>Aug 21, 2009 12:21 PM</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Clark</td>
|
||||
<td>Henry Jr</td>
|
||||
<td>Tampa</td>
|
||||
<td>51</td>
|
||||
<td>$42.29</td>
|
||||
<td>18%</td>
|
||||
<td>Oct 13, 2000 1:15 PM</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Denni</td>
|
||||
<td>Henry</td>
|
||||
<td>New York</td>
|
||||
<td>28</td>
|
||||
<td>$9.99</td>
|
||||
<td>20%</td>
|
||||
<td>Jul 6, 2006 8:14 AM</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>John</td>
|
||||
<td>Hood</td>
|
||||
<td>Boston</td>
|
||||
<td>33</td>
|
||||
<td>$19.99</td>
|
||||
<td>25%</td>
|
||||
<td>Dec 10, 2002 5:14 AM</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Clark</td>
|
||||
<td>Kent Sr</td>
|
||||
<td>Los Angeles</td>
|
||||
<td>18</td>
|
||||
<td>$15.89</td>
|
||||
<td>44%</td>
|
||||
<td>Jan 12, 2003 11:14 AM</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Peter</td>
|
||||
<td>Kent Esq</td>
|
||||
<td>Seattle</td>
|
||||
<td>45</td>
|
||||
<td>$153.19</td>
|
||||
<td>44%</td>
|
||||
<td>Jan 18, 2021 9:12 AM</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Peter</td>
|
||||
<td>Johns</td>
|
||||
<td>Milwaukee</td>
|
||||
<td>13</td>
|
||||
<td>$5.29</td>
|
||||
<td>4%</td>
|
||||
<td>Jan 8, 2012 5:11 PM</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Aaron</td>
|
||||
<td>Evan</td>
|
||||
<td>Chicago</td>
|
||||
<td>24</td>
|
||||
<td>$14.19</td>
|
||||
<td>14%</td>
|
||||
<td>Jan 14, 2004 11:23 AM</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Bruce</td>
|
||||
<td>Evans</td>
|
||||
<td>Upland</td>
|
||||
<td>22</td>
|
||||
<td>$13.19</td>
|
||||
<td>11%</td>
|
||||
<td>Jan 18, 2007 9:12 AM</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Clark</td>
|
||||
<td>McMasters</td>
|
||||
<td>Pheonix</td>
|
||||
<td>18</td>
|
||||
<td>$55.20</td>
|
||||
<td>15%</td>
|
||||
<td>Feb 12, 2010 7:23 PM</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Dennis</td>
|
||||
<td>Masters</td>
|
||||
<td>Indianapolis</td>
|
||||
<td>65</td>
|
||||
<td>$123.00</td>
|
||||
<td>32%</td>
|
||||
<td>Jan 20, 2001 1:12 PM</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>John</td>
|
||||
<td>Hood</td>
|
||||
<td>Fort Worth</td>
|
||||
<td>25</td>
|
||||
<td>$22.09</td>
|
||||
<td>17%</td>
|
||||
<td>Jun 11, 2011 10:55 AM</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table></div>
|
||||
|
||||
<h1>Javascript</h1>
|
||||
<div id="javascript">
|
||||
<pre class="prettyprint lang-javascript"></pre>
|
||||
</div>
|
||||
|
||||
<h1>HTML</h1>
|
||||
<div id="html">
|
||||
<pre class="prettyprint lang-html"></pre>
|
||||
</div>
|
||||
|
||||
<div class="next-up">
|
||||
<hr />
|
||||
Next up: <a href="example-widget-filter-formatter-1.html">jQuery custom filter widget formatter (jQuery UI widgets) ››</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
166
assets/vendor/tablesorter/docs/example-widget-filter-external-inputs.html
vendored
Normal file
166
assets/vendor/tablesorter/docs/example-widget-filter-external-inputs.html
vendored
Normal file
@@ -0,0 +1,166 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery plugin: Tablesorter 2.0 - Filter Widget External Inputs</title>
|
||||
|
||||
<!-- jQuery -->
|
||||
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.js"></script>
|
||||
|
||||
<!-- Demo stuff -->
|
||||
<link class="ui-theme" rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/cupertino/jquery-ui.css">
|
||||
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
|
||||
<link rel="stylesheet" href="css/jq.css">
|
||||
<link href="css/prettify.css" rel="stylesheet">
|
||||
<script src="js/prettify.js"></script>
|
||||
<script src="js/docs.js"></script>
|
||||
|
||||
<!-- Tablesorter: required -->
|
||||
<link rel="stylesheet" href="../css/theme.blue.css">
|
||||
<script src="../js/jquery.tablesorter.js"></script>
|
||||
<script src="../js/jquery.tablesorter.widgets.js"></script>
|
||||
|
||||
<script id="js">$(function() {
|
||||
|
||||
var $table = $('table').tablesorter({
|
||||
theme: 'blue',
|
||||
widgets: ["zebra", "filter"],
|
||||
widgetOptions : {
|
||||
// use the filter_external option OR use bindSearch function (below)
|
||||
// to bind external filters.
|
||||
// filter_external : '.search',
|
||||
|
||||
filter_columnFilters: false,
|
||||
filter_saveFilters : true,
|
||||
filter_reset: '.reset'
|
||||
}
|
||||
});
|
||||
|
||||
// Target the $('.search') input using built in functioning
|
||||
// this binds to the search using "search" and "keyup"
|
||||
// Allows using filter_liveSearch or delayed search &
|
||||
// pressing escape to cancel the search
|
||||
$.tablesorter.filter.bindSearch( $table, $('.search') );
|
||||
|
||||
// Basic search binding, alternate to the above
|
||||
// bind to search - pressing enter and clicking on "x" to clear (Webkit)
|
||||
// keyup allows dynamic searching
|
||||
/*
|
||||
$(".search").bind('search keyup', function (e) {
|
||||
$('table').trigger('search', [ [this.value] ]);
|
||||
});
|
||||
*/
|
||||
|
||||
// Allow changing an input from one column (any column) to another
|
||||
$('select').change(function(){
|
||||
// modify the search input data-column value (swap "0" or "all in this demo)
|
||||
$('.selectable').attr( 'data-column', $(this).val() );
|
||||
// update external search inputs
|
||||
$.tablesorter.filter.bindSearch( $table, $('.search'), false );
|
||||
});
|
||||
|
||||
});</script>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<div id="banner">
|
||||
<h1>table<em>sorter</em></h1>
|
||||
<h2>Filter Widget External Inputs</h2>
|
||||
<h3>Flexible client-side table sorting</h3>
|
||||
<a href="index.html">Back to documentation</a>
|
||||
</div>
|
||||
<div id="main">
|
||||
|
||||
<p></p>
|
||||
<br>
|
||||
<div class="accordion">
|
||||
|
||||
<h3><a href="#">Notes</a></h3>
|
||||
<div>
|
||||
<ul>
|
||||
<li>As of <span class="version">v2.15</span>,
|
||||
<ul>
|
||||
<li>A new filter widget <a href="index.html#widget-filter-external"><code>filter_external</code> option</a> has been added that essentially does the same thing as the <a href="index.html#function-bindsearch"><code>$.tablesorter.bindSearch</code></a> function.</li>
|
||||
</li>Use either to bind external search inputs.</li>
|
||||
<li>To change an input from searching one column (or all columns) to search any other column, call the <code>$.tablesorter.bindSearch</code> function to update the external inputs, even if the inputs are set using the <code>filter_external</code> option. Pass an additional <code>false</code> flag as the last parameter to force the inputs to update.
|
||||
<pre class="prettyprint lang-js">$.tablesorter.bindSearch( $('table'), $('.search'), false );</pre>
|
||||
</li>
|
||||
<li>This demo shows how to use multiple external search filters to filter the table, and how to make one input dynamically change to filter any or all columns.</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>The <code>$.tablesorter.filter.bindSearch</code> function allows binding multiple external search filters</li>
|
||||
<li>The advantage of using this function over your own is:
|
||||
<ul>
|
||||
<li>Inputs behave the same as internal filters; searches adhere to the <code>filter_liveSearch</code> and <code>filter_searchDelay</code> options.</li>
|
||||
<li>When pressing the <kbd>Esc</kbd> key, the filter resets.</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>Include a <code>data-column="#"</code> attribute to specify to which column the search should apply; or <code>data-column="all"</code> to search all columns.</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h1>Demo</h1>
|
||||
|
||||
<div id="demo"><input class="search selectable" type="search" placeholder="Search" data-column="all">
|
||||
<!-- select to change data-column attribute of the above input -->
|
||||
<select class="change-input">
|
||||
<option value="all">all</option>
|
||||
<option value="0">Rank</option>
|
||||
<option value="1">First Name</option>
|
||||
<option value="2">Last Name</option>
|
||||
</select>
|
||||
<br>
|
||||
<input class="search" type="search" placeholder="First Name" data-column="1"><br>
|
||||
<input class="search" type="search" placeholder="Last Name" data-column="2"><br>
|
||||
<!-- targeted by the "filter_reset" option -->
|
||||
<button type="button" class="reset">Reset Search</button>
|
||||
|
||||
<table class="tablesorter">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Rank</th>
|
||||
<th>First Name</th>
|
||||
<th>Last Name</th>
|
||||
<th>Age</th>
|
||||
<th>Total</th>
|
||||
<th>Discount</th>
|
||||
<th>Date</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>1</td><td>Philip Aaron</td><td>Johnson Sr Esq</td><td>25</td><td>$5.95</td><td>22%</td><td>Jun 26, 2004 7:22 AM</td></tr>
|
||||
<tr><td>11</td><td>Aaron</td><td>Hibert</td><td>12</td><td>$2.99</td><td>5%</td><td>Aug 21, 2009 12:21 PM</td></tr>
|
||||
<tr><td>12</td><td>Brandon Clark</td><td>Henry Jr</td><td>51</td><td>$42.29</td><td>18%</td><td>Oct 13, 2000 1:15 PM</td></tr>
|
||||
<tr><td>111</td><td>Peter</td><td>Parker</td><td>28</td><td>$9.99</td><td>20%</td><td>Jul 6, 2006 8:14 AM</td></tr>
|
||||
<tr><td>21</td><td>John</td><td>Hood</td><td>33</td><td>$19.99</td><td>25%</td><td>Dec 10, 2002 5:14 AM</td></tr>
|
||||
<tr><td>013</td><td>Clark</td><td>Kent Sr.</td><td>18</td><td>$15.89</td><td>44%</td><td>Jan 12, 2003 11:14 AM</td></tr>
|
||||
<tr><td>005</td><td>Bruce</td><td>Almighty Esq</td><td>45</td><td>$153.19</td><td>44%</td><td>Jan 18, 2021 9:12 AM</td></tr>
|
||||
<tr><td>10</td><td>Alex</td><td>Dumass</td><td>13</td><td>$5.29</td><td>4%</td><td>Jan 8, 2012 5:11 PM</td></tr>
|
||||
<tr><td>16</td><td>Jim</td><td>Franco</td><td>24</td><td>$14.19</td><td>14%</td><td>Jan 14, 2004 11:23 AM</td></tr>
|
||||
<tr><td>166</td><td>Bruce Lee</td><td>Evans</td><td>22</td><td>$13.19</td><td>11%</td><td>Jan 18, 2007 9:12 AM</td></tr>
|
||||
<tr><td>100</td><td>Brenda Lee</td><td>McMasters</td><td>18</td><td>$55.20</td><td>15%</td><td>Feb 12, 2010 7:23 PM</td></tr>
|
||||
<tr><td>55</td><td>Dennis</td><td>Bronson</td><td>65</td><td>$123.00</td><td>32%</td><td>Jan 20, 2001 1:12 PM</td></tr>
|
||||
<tr><td>9</td><td>Martha</td><td>delFuego</td><td>25</td><td>$22.09</td><td>17%</td><td>Jun 11, 2011 10:55 AM</td></tr>
|
||||
</tbody>
|
||||
</table></div>
|
||||
|
||||
<h1>Javascript</h1>
|
||||
<div id="javascript">
|
||||
<pre class="prettyprint lang-javascript"></pre>
|
||||
</div>
|
||||
|
||||
<h1>HTML</h1>
|
||||
<div id="html">
|
||||
<pre class="prettyprint lang-html"></pre>
|
||||
</div>
|
||||
|
||||
<div class="next-up">
|
||||
<hr />
|
||||
Next up: <a href="example-widget-filter-custom.html">jQuery custom filter widget ››</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
614
assets/vendor/tablesorter/docs/example-widget-filter-formatter-1.html
vendored
Normal file
614
assets/vendor/tablesorter/docs/example-widget-filter-formatter-1.html
vendored
Normal file
@@ -0,0 +1,614 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery plugin: Tablesorter 2.0 - Custom Filter Widget Formatter (jQuery UI widgets)</title>
|
||||
|
||||
<!-- jQuery -->
|
||||
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.js"></script>
|
||||
|
||||
<!-- Demo stuff -->
|
||||
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
|
||||
<link rel="stylesheet" href="css/jq.css">
|
||||
<link href="css/prettify.css" rel="stylesheet">
|
||||
<script src="js/prettify.js"></script>
|
||||
<script src="js/docs.js"></script>
|
||||
|
||||
<!-- jQuery UI theme switcher: https://github.com/pontikis/jui_theme_switch/ -->
|
||||
<style>
|
||||
th { width: 15%; }
|
||||
.reset { margin: 4px; }
|
||||
#switcher { float: left; }
|
||||
.switcher_container { padding: 5px; }
|
||||
.switcher_list { padding: 2px; }
|
||||
.switcher_label { margin-right: 5px; }
|
||||
</style>
|
||||
<script src="js/jquery.jui_theme_switch.min.js"></script>
|
||||
|
||||
<style id="css">/* css needed to get compare selector & slider in-line */
|
||||
.compare-select-wrapper { min-width: 60%; float: right; }</style>
|
||||
|
||||
<!-- Tablesorter: required; also include any of the jQuery UI themes -->
|
||||
<link id="ui-theme" rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/cupertino/jquery-ui.css">
|
||||
<link href="../css/theme.jui.css" rel="stylesheet">
|
||||
<link href="../css/filter.formatter.css" rel="stylesheet">
|
||||
<script src="../js/jquery.tablesorter.js"></script>
|
||||
<script src="../js/jquery.tablesorter.widgets.js"></script>
|
||||
<script src="../js/jquery.tablesorter.widgets-filter-formatter.js"></script>
|
||||
<script>
|
||||
$(function(){
|
||||
|
||||
$('#switcher').jui_theme_switch({
|
||||
stylesheet_link_id : 'ui-theme',
|
||||
datasource_url : 'assets/theme_switcher.json'
|
||||
});
|
||||
|
||||
$('.accordion button').on('click', function(){
|
||||
var $this = $(this),
|
||||
column = $this.data('column'),
|
||||
filters = [];
|
||||
filters[ column ] = $this.data('value');
|
||||
$('table').trigger('sorton', [ [[column, 0]], function(){
|
||||
$.tablesorter.setFilters( $('table'), filters, true );
|
||||
} ]);
|
||||
});
|
||||
|
||||
});
|
||||
</script>
|
||||
<script id="js">$(function() {
|
||||
|
||||
// call the tablesorter plugin
|
||||
$("table").tablesorter({
|
||||
theme : 'jui',
|
||||
headerTemplate : '{content}{icon}',
|
||||
// hidden filter input/selects will resize the columns, so try to minimize the change
|
||||
widthFixed : true,
|
||||
// initialize zebra striping and filter widgets
|
||||
widgets : ["zebra", "filter", "stickyHeaders", "uitheme"],
|
||||
widgetOptions : {
|
||||
// Use the $.tablesorter.storage utility to save the most recent filters
|
||||
filter_saveFilters : true,
|
||||
// jQuery selector string of an element used to reset the filters
|
||||
filter_reset : 'button.reset',
|
||||
// add custom selector elements to the filter row
|
||||
filter_formatter : {
|
||||
|
||||
// Rank
|
||||
0 : function($cell, indx){
|
||||
return $.tablesorter.filterFormatter.uiSlider( $cell, indx, {
|
||||
delayed : true,
|
||||
valueToHeader : false,
|
||||
cellText : 'Rank:',
|
||||
compare : [ '=', '>=', '<=' ],
|
||||
selected : 2, // zero-based index of compare starting selected value
|
||||
// jQuery UI slider options
|
||||
value : 100,
|
||||
min : 0,
|
||||
max : 100
|
||||
});
|
||||
},
|
||||
|
||||
// Age
|
||||
1 : function($cell, indx){
|
||||
return $.tablesorter.filterFormatter.uiSlider( $cell, indx, {
|
||||
delayed : false,
|
||||
valueToHeader : false,
|
||||
exactMatch : false,
|
||||
allText : 'all', // this is ignored when compare is not empty
|
||||
compare : [ '=', '>=', '<=' ],
|
||||
selected : 1,
|
||||
// jQuery UI slider options
|
||||
value : 1,
|
||||
min : 1,
|
||||
max : 65
|
||||
});
|
||||
},
|
||||
|
||||
// Total
|
||||
2 : function($cell, indx){
|
||||
return $.tablesorter.filterFormatter.uiRange( $cell, indx, {
|
||||
delayed : false,
|
||||
valueToHeader : false,
|
||||
// jQuery UI slider options
|
||||
values : [1, 160],
|
||||
min : 1,
|
||||
max : 160
|
||||
});
|
||||
},
|
||||
|
||||
// Discount
|
||||
3 : function($cell, indx){
|
||||
return $.tablesorter.filterFormatter.uiSpinner( $cell, indx, {
|
||||
delayed : true,
|
||||
addToggle : false,
|
||||
exactMatch : true,
|
||||
compare : [ '', '=', '>=', '<=' ],
|
||||
selected : 2,
|
||||
// jQuery UI spinner options
|
||||
min : 0,
|
||||
max : 45,
|
||||
value : 1,
|
||||
step : 1
|
||||
});
|
||||
},
|
||||
|
||||
// Date (one input)
|
||||
4 : function($cell, indx){
|
||||
return $.tablesorter.filterFormatter.uiDateCompare( $cell, indx, {
|
||||
cellText : 'Dates', // text added before the input
|
||||
compare : [ '', '=', '>=', '<=' ],
|
||||
selected : 3,
|
||||
// jQuery UI datepicker options
|
||||
// defaultDate : '1/1/2014', // default date
|
||||
changeMonth : true,
|
||||
changeYear : true
|
||||
|
||||
});
|
||||
},
|
||||
|
||||
// Date (two inputs)
|
||||
5 : function($cell, indx){
|
||||
return $.tablesorter.filterFormatter.uiDatepicker( $cell, indx, {
|
||||
// from : '08/01/2013', // default from date
|
||||
// to : '1/18/2014', // default to date
|
||||
changeMonth : true,
|
||||
changeYear : true
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
});</script>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<div id="banner">
|
||||
<h1>table<em>sorter</em></h1>
|
||||
<h2>Custom Filter Widget Formatter (jQuery UI widgets)</h2>
|
||||
<h3>Flexible client-side table sorting</h3>
|
||||
<a href="index.html">Back to documentation</a>
|
||||
</div>
|
||||
<div id="main">
|
||||
|
||||
<p></p>
|
||||
<br>
|
||||
<div class="accordion">
|
||||
|
||||
<h3><a href="#">Notes</a></h3>
|
||||
<div>
|
||||
<ul>
|
||||
<li>In version <span class="version">v2.15.0</span> the following changes were made:
|
||||
<ul>
|
||||
<li>These updated filter widget functions are not completely backward compatible with older versions of the filter widget. Please update both!</li>
|
||||
<li>Added <code>compare</code> & <code>selected</code> options:
|
||||
<ul>
|
||||
<li>These options allow the adding of a comparison operator selector to the cell (e.g. <code>></code>, <code>>=</code>, <code><</code>, <code><=</code>, etc).</li>
|
||||
<li>If any <code>cellText</code> is included, it is now wrapped in a label with a class name of "compare-select-label" and "compare-select-label#" (where "#" is the column index).</li>
|
||||
<li>The selector has a class name of "compare-select" and "compare-select#" (where "#" is the column index)</li>
|
||||
<li>Whichever type of input that is added to the cell is then wrapped in a div with class "compare-select-wrapper" and "compare-select-wrapper#" (where "#" is the column index).</li>
|
||||
<li>These class names allow styling of an individual filter to keep elements in line, or however you wish to style it.
|
||||
<pre class="prettyprint lang-html"><!-- rendered filter cell (first column) -->
|
||||
<td>
|
||||
<!-- cellText -->
|
||||
<label class="compare-select-label compare-select-label0">Rank:</label>
|
||||
<!-- compare: [ '=', '>=', '<=' ] -->
|
||||
<select class="compare-select compare-select0">
|
||||
<option>=</option>
|
||||
<option>&gt;=</option>
|
||||
<option selected>&lt;=</option>
|
||||
</select>
|
||||
<!-- wrapped selector element -->
|
||||
<div class="compare-select-wrapper compare-select-wrapper0">
|
||||
<div class="slider slider0><!-- jQuery UI Slider gets added here --></div>
|
||||
</div>
|
||||
<!-- hidden input -->
|
||||
<input class="filter tablesorter-filter" type="hidden" value="" data-column="0">
|
||||
</td></pre>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>Filter reset now sets these filters to their default values, not an empty string.</li>
|
||||
<li>Updated to now properly restore saved filters.</li>
|
||||
<li>Added <code>endOfDay</code> option for jQuery UI Datepicker.
|
||||
<ul>
|
||||
<li>When <code>true</code> search dates will include all times from the date chosen when a comparison is made of dates "less than" the set date.</li>
|
||||
<li>Example 1: if a table entry has a date of "Jan 14, 2014 11:23 AM" and the filter search is set to <button data-column="4" data-value="<=1/14/2014"><= 1/14/2014</button>, the table entry will be included in the search; the default set time would otherwise be "1/14/2014 00:00:00" and not include the entry from "11:23 AM". So, the <code>endOfDay</code> option sets the time to "23:59:59".</li>
|
||||
<li>Example 2: if searching for one specific date, this option will now search for all times within that day. For example, searching for <button data-column="4" data-value="=1/20/2014">= 1/20/2014</button>, and the results will include dates from 1/20/2014 00:00:00 to 1/20/2014 23:59:59.</li>
|
||||
<li>When comparing dates greater than the set date, the time will be set to midnight; so this option will not be applied.</li>
|
||||
<li>Example 3: in two date inputs, the <code>endOfDay</code> time is only applied to the "to" input; search for <button data-column="5" data-value="1/20/2014 - 1/20/2014">1/20/2014 - 1/20/2014</button></li>
|
||||
<li>This option is available in both the comparison (one input) and range (two inputs; "to" date input only) date pickers.</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>As of tablesorter version 2.9+, this widget can no longer be applied to versions of tablesorter prior to version 2.8.</li>
|
||||
<li>This page shows you how to add a few <strong>jQuery UI widgets</strong> to interact with the filter widget using the <code>filter_formatter</code> option.</li>
|
||||
<li>Custom filter widget option <code>filter_formatter</code> was added in version 2.7.7.</li>
|
||||
<li>jQuery v1.4.3+ required.</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<h3><a href="#"><strong>jQuery UI Single Slider</strong></a> <span class="xsmall">("Rank" and "Age" columns)</span></h3>
|
||||
<div>
|
||||
<ul>
|
||||
<li>In <span class="version">v2.15.0</span> the <code>compare</code> option was updated to allow adding a selector along with the input. The <code>selected</code> option allows choosing the default setting.</li>
|
||||
<li>In <span class="version">v2.10.1</span> the <code>compare</code> option was added. This allows comparing the slider's value to the column value. The slider in the Age column is selecting values greater than or equal to itself.</li>
|
||||
<li>A search delay was added in v2.7.11 (time set by <code>filter_searchDelay</code> option). It can be disabled by setting the <code>delayed</code> option to <code>false</code>.<br><br></li>
|
||||
<li>This example shows how you can add a jQuery UI slider to filter column content.</li>
|
||||
<li>The <code>filter_formatter</code> function provided in the extra "jquery.tablesorter.widgets-filter-formatter.js" file is used to add this custom control within the filter row.</li>
|
||||
<li>Make sure to include all values within the selected range, otherwise rows outside of this range will be forever hidden.</li>
|
||||
<li>Add the following code to apply a slider to filter a column:<pre class="prettyprint lang-javascript">$(function() {
|
||||
|
||||
$("table").tablesorter({
|
||||
theme: 'jui',
|
||||
// hidden filter input/selects will resize the columns, so try to minimize the change
|
||||
widthFixed : true,
|
||||
// initialize zebra striping and filter widgets
|
||||
widgets: ["zebra", "filter", "uitheme"],
|
||||
widgetOptions : {
|
||||
// jQuery selector string of an element used to reset the filters
|
||||
filter_reset : 'button.reset',
|
||||
// add custom selector elements to the filter row
|
||||
filter_formatter : {
|
||||
|
||||
// Rank
|
||||
0 : function($cell, indx){
|
||||
return $.tablesorter.filterFormatter.uiSlider( $cell, indx, {
|
||||
// filterFormatter options
|
||||
cellText : 'Rank:',
|
||||
delayed: true, // delay search (set by filter_searchDelay)
|
||||
valueToHeader: false, // add current slider value to the header cell
|
||||
exactMatch: true, // exact (true) or match (false)
|
||||
allText: 'all', // text shown when the slider is at the minimum value
|
||||
compare : [ '=', '>=', '<=' ], // any comparison would override the exactMatch option
|
||||
selected : 2, // zero-based index of compare starting selected value
|
||||
|
||||
// add any of the jQuery UI Slider options here (http://api.jqueryui.com/slider/)
|
||||
value: 100, // starting value
|
||||
min: 0, // minimum value
|
||||
max: 100 // maximum value
|
||||
});
|
||||
},
|
||||
|
||||
// Age
|
||||
1 : function($cell, indx){
|
||||
return $.tablesorter.filterFormatter.uiSlider( $cell, indx, {
|
||||
delayed: false, // delay search (set by filter_searchDelay)
|
||||
valueToHeader: false, // add current slider value to the header cell
|
||||
exactMatch: false, // exact (true) or match (false)
|
||||
allText: 'all', // text shown when slider is at the minimum value; ignored when compare has a value
|
||||
compare: [ '=', '>=', '<=' ], // search values greater/less than selected value; overrides exactMatch
|
||||
selected : 1, // zero-based index of compare starting selected value
|
||||
|
||||
// add any of the jQuery UI Slider options here (http://api.jqueryui.com/slider/)
|
||||
value: 1, // starting value
|
||||
min: 1, // minimum value
|
||||
max: 65 // maximum value
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
});</pre></li>
|
||||
<li>The tooltip above the slider is added using pure css, which is included in the "filter.formatter.css" file, but it won't work in IE7 and older. But, you set the <code>valueToHeader</code> option to <code>true</code> to add the slider value to the header cell above the filter.</li>
|
||||
<li>Another option named <code>exactMatch</code> was added to allow exact or general matching of column content.</li>
|
||||
<li>Notice that the left-most value, zero in this case, will clear the column filter to allow a method to show all column content. You can modify the "all" text using the <code>allText</code> option.</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<h3><a href="#"><strong>jQuery UI Range Slider</strong></a> <span class="xsmall">("Total" column)</span></h3>
|
||||
<div>
|
||||
<ul>
|
||||
<li>This example shows how you can add a jQuery UI range slider to filter column content.</li>
|
||||
<li>The <code>filter_formatter</code> function provided in the extra "jquery.tablesorter.widgets-filter-formatter.js" file is used to add this custom control within the filter row.</li>
|
||||
<li>Make sure to include all values within the selected range, otherwise rows outside of this range will be forever hidden.</li>
|
||||
<li>The range slider is actually the same as the single slider described above, but was built to handle a range of values.</li>
|
||||
<li>Add the following code to apply a range slider to filter a column:<pre class="prettyprint lang-javascript">$(function() {
|
||||
|
||||
$("table").tablesorter({
|
||||
theme: 'jui',
|
||||
// hidden filter input/selects will resize the columns, so try to minimize the change
|
||||
widthFixed : true,
|
||||
// initialize zebra striping and filter widgets
|
||||
widgets: ["zebra", "filter", "uitheme"],
|
||||
widgetOptions : {
|
||||
// jQuery selector string of an element used to reset the filters
|
||||
filter_reset : 'button.reset',
|
||||
// add custom selector elements to the filter row
|
||||
filter_formatter : {
|
||||
|
||||
// Total column
|
||||
2 : function($cell, indx){
|
||||
return $.tablesorter.filterFormatter.uiRange( $cell, indx, {
|
||||
delayed: true, // delay search (set by filter_searchDelay)
|
||||
valueToHeader: false, // add current slider value to the header cell
|
||||
|
||||
// add any of the jQuery UI Slider options (for range selection) here (http://api.jqueryui.com/slider/)
|
||||
values: [1, 160], // starting range
|
||||
min: 1, // minimum value
|
||||
max: 160 // maximum value
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
});</pre></li>
|
||||
<li>The tooltip above the slider is added using pure css, which is included in the "filter.formatter.css" file, but it won't work in IE7 and older. But, you set the <code>valueToHeader</code> option to <code>true</code> to add the slider value to the header cell above the filter.</li>
|
||||
<li>Another option named <code>exactMatch</code> was added to allow exact or general matching of column content.</li>
|
||||
<li>A search delay was added in v2.7.11 (time set by <code>filter_searchDelay</code> option). It can be disabled by setting the <code>delayed</code> option to <code>false</code>.</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<h3><a href="#"><strong>jQuery UI Spinner</strong></a> <span class="xsmall">("Discount" column)</span></h3>
|
||||
<div>
|
||||
<ul>
|
||||
<li>In <span class="version">v2.15.0</span> the <code>compare</code> option was updated to allow adding a selector along with the input. The <code>selected</code> option allows choosing the default setting.<br><br></li>
|
||||
<li>This example shows how you can add a jQuery UI spinner to filter column content.</li>
|
||||
<li>The <code>filter_formatter</code> function provided in the extra "jquery.tablesorter.widgets-filter-formatter.js" file is used to add this custom control within the filter row.</li>
|
||||
<li>Add the following code to apply a spinner to filter a column:<pre class="prettyprint lang-javascript">$(function() {
|
||||
|
||||
$("table").tablesorter({
|
||||
theme: 'jui',
|
||||
// hidden filter input/selects will resize the columns, so try to minimize the change
|
||||
widthFixed : true,
|
||||
// initialize zebra striping and filter widgets
|
||||
widgets: ["zebra", "filter", "uitheme"],
|
||||
widgetOptions : {
|
||||
// jQuery selector string of an element used to reset the filters
|
||||
filter_reset : 'button.reset',
|
||||
// add custom selector elements to the filter row
|
||||
filter_formatter : {
|
||||
|
||||
// Discount column
|
||||
3 : function($cell, indx){
|
||||
return $.tablesorter.filterFormatter.uiSpinner( $cell, indx, {
|
||||
delayed: true, // delay search (set by filter_searchDelay)
|
||||
addToggle: false, // add a toggle switch to activate/deactive the search
|
||||
exactMatch: true, // exact (true) or match (false)
|
||||
compare : [ '', '=', '>=', '<=' ], // search values greater/less than selected value; overrides exactMatch
|
||||
selected : 2, // zero-based index of compare starting selected value
|
||||
|
||||
// add any of the jQuery UI Spinner options here (http://api.jqueryui.com/spinner/)
|
||||
min : 0,
|
||||
max : 45,
|
||||
value: 1,
|
||||
step: 1
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
});</pre></li>
|
||||
<li>This is the only jQuery UI widget that includes a toggle button. The toggle button is added by default, but if you don't want it, set the <code>addToggle</code> option to <code>false</code>. Without the toggle button, the filter is always active.</li>
|
||||
<li>Another option named <code>exactMatch</code> was added to allow exact or general matching of column content.</li>
|
||||
<li>A search delay was added in v2.7.11 (time set by <code>filter_searchDelay</code> option). It can be disabled by setting the <code>delayed</code> option to <code>false</code>.</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<h3><a href="#"><strong>jQuery UI Datepicker Comparison</strong></a> <span class="xsmall">("Date (one input)" column)</span></h3>
|
||||
<div>
|
||||
<ul>
|
||||
<li>In <span class="version">v2.15.0</span>
|
||||
<ul>
|
||||
<li>The <code>compare</code> option was updated to allow adding a selector along with the input. The <code>selected</code> option allows choosing the default setting.</li>
|
||||
<li>A <code>endOfDay</code> option was added, which when a <code><=</code> comparison is made, will include all times within the selected day. Try searching for <button data-column="4" data-value="<=1/14/2014"><= 1/14/2014</button>; it basically sets the time of the selected day to end at 23:59:59.</li>
|
||||
<li>Additionally, when <code>endOfDay</code> option is <code>true</code> and using an exact (<code>=</code>) comparison, all times within that selected day will be included - try searching for <button data-column="4" data-value="=1/20/2014">= 1/20/2014</button> to note that the day include various times.</li>
|
||||
</ul>
|
||||
<br>
|
||||
</li>
|
||||
<li>This example shows how you can add a jQuery UI Datepicker to compare to filter column content.</li>
|
||||
<li>The <code>filter_formatter</code> function provided in the extra "jquery.tablesorter.widgets-filter-formatter.js" file is used to add this custom control within the filter row.</li>
|
||||
<li>This code follows the <a class="external" href="http://jqueryui.com/datepicker/#default">default functionality</a> example from the jQuery UI docs.</li>
|
||||
<li>Add the following code to apply a datepicker comparison selector to the filter row:<pre class="prettyprint lang-javascript">$(function() {
|
||||
|
||||
$("table").tablesorter({
|
||||
theme: 'jui',
|
||||
// hidden filter input/selects will resize the columns, so try to minimize the change
|
||||
widthFixed : true,
|
||||
// initialize zebra striping and filter widgets
|
||||
widgets: ["zebra", "filter", "uitheme"],
|
||||
widgetOptions : {
|
||||
// jQuery selector string of an element used to reset the filters
|
||||
filter_reset : 'button.reset',
|
||||
// add custom selector elements to the filter row
|
||||
filter_formatter : {
|
||||
|
||||
// Date (one input)
|
||||
4 : function($cell, indx){
|
||||
return $.tablesorter.filterFormatter.uiDateCompare( $cell, indx, {
|
||||
cellText : 'Dates', // text added before the input
|
||||
compare : [ '', '=', '>=', '<=' ], // search values greater/less than selected value; overrides exactMatch
|
||||
selected : 3, // zero-based index of compare starting selected value
|
||||
|
||||
// add any of the jQuery UI Datepicker options here (http://api.jqueryui.com/datepicker/)
|
||||
// defaultDate : '1/1/2014', // default date
|
||||
changeMonth : true,
|
||||
changeYear : true
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
});</pre></li>
|
||||
<li>There is one issue with this comparison script, and that is with dates that contain a time:
|
||||
<ul>
|
||||
<li>Table data that contains dates with times will be parsed into values that include time.</li>
|
||||
<li>So if the <code>compare</code> option is set to <code>=</code>, it may not show any filtered table rows as none match that date at midnight. To fix this, either remove times from the table data, use a column parser that ignores the time, or use the Datepicker range selector and set the "from" input to the desired day and the "to" input to be the next day (at midnight).</li>
|
||||
<li><del>Using a <code>compare</code> of <code><=</code> will only show filtered dates from the selected day <em>at midnight</em> with earlier dates; i.e. a cell with the selected date but a time set to noon will not be visible</del>. As of <span class="version">v2.10/8</span>, the comparison of dates less than the selected date, now adds a time of 11:59:59 so it will include times within the selected date.</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<h3><a href="#"><strong>jQuery UI Datepicker Range Selector</strong></a> <span class="xsmall">("Date (two inputs)" column)</span></h3>
|
||||
<div>
|
||||
<ul>
|
||||
<li>In <span class="version">v2.15.0</span>, an <code>endOfDay</code> option was added, which when <code>true</code> and searching within one day, all times within that selected day will be included - try searching for <button data-column="5" data-value="1/20/2014 - 1/20/2014">1/20/2014 - 1/20/2014</button> to note that the day include various times.<br></li>
|
||||
<li>This example shows how you can add a jQuery UI Datepicker range to filter column content.</li>
|
||||
<li>The <code>filter_formatter</code> function provided in the extra "jquery.tablesorter.widgets-filter-formatter.js" file is used to add this custom control within the filter row.</li>
|
||||
<li>This code follows the <a class="external" href="http://jqueryui.com/datepicker/#date-range">date range</a> example from the jQuery UI docs.</li>
|
||||
<li>Updated two input functions so that if the "to" input is empty, all dates greater than the "from" date are shown. If the "from" input is empty, all dates less than the "to" input date are shown (<span class="version updated">v2.10.1</span>).</li>
|
||||
<li>Add the following code to apply a datepicker range selector to the filter row:<pre class="prettyprint lang-javascript">$(function() {
|
||||
|
||||
$("table").tablesorter({
|
||||
theme: 'jui',
|
||||
// hidden filter input/selects will resize the columns, so try to minimize the change
|
||||
widthFixed : true,
|
||||
// initialize zebra striping and filter widgets
|
||||
widgets: ["zebra", "filter", "uitheme"],
|
||||
widgetOptions : {
|
||||
// jQuery selector string of an element used to reset the filters
|
||||
filter_reset : 'button.reset',
|
||||
// add custom selector elements to the filter row
|
||||
filter_formatter : {
|
||||
|
||||
// Date (two inputs)
|
||||
6 : function($cell, indx){
|
||||
return $.tablesorter.filterFormatter.uiDatepicker( $cell, indx, {
|
||||
// add any of the jQuery UI Datepicker options here (http://api.jqueryui.com/datepicker/)
|
||||
// from : '8/1/2013', // starting date
|
||||
// to : '1/18/2014', // ending date
|
||||
textFrom: 'from', // "from" label text
|
||||
textTo: 'to', // "to" label text
|
||||
changeMonth: true,
|
||||
changeYear : true
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
});</pre></li>
|
||||
<li>Note that the datepicker options are slightly different from the default datepicker options:
|
||||
<ul>
|
||||
<li>Instead of using the <code>defaultDate</code> option of the datepicker widget, it has a <code>from</code> and <code>to</code> option to fullfill that purpose.</li>
|
||||
<li>The options added to this function will be applied to both the from and to datepicker inputs.</li>
|
||||
<li>As of <span class="version">v2.10.8</span>, the comparison of dates less than the selected "to" date, now adds a time of 11:59:59 so it will include times within the selected dates.</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<h3><a href="#"><strong>Custom Filter Formatter Function Information</strong></a></h3>
|
||||
<div>
|
||||
If you want to write your own custom filter formatter function, there are certain requirements that should be met:
|
||||
<ul>
|
||||
<li>Required input element:
|
||||
<ul>
|
||||
<li>If your selector isn't an input (e.g. jQuery UI Slider), then you'll need to return an input of type hidden which gets updated by the selector with the filter query for the column.
|
||||
<pre class="prettyprint lang-javascript">filter_formatter : {
|
||||
0 : function($cell, indx) {
|
||||
var $input = $('<input type="hidden">').appendTo($cell);
|
||||
// add your selector code here
|
||||
return $input;
|
||||
}
|
||||
}</pre></li>
|
||||
<li>If the input contains a value that doesn't match a standard filter syntax, then you'll need to return an input of type hidden with the correct format.</li>
|
||||
<li>This returned input element should to be attached to the <code>$cell</code>.</li>
|
||||
<li>The returned input should have a "search" event triggered upon it after being updated.</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>Some method should be added to show the user the current value of the selector - update a data attribute for css3 tooltips, or update the header cell.</li>
|
||||
<li>A reset function needs to also be included; bind to the <code>filterReset</code> event and clear out or disable your custom selector when triggered.
|
||||
<pre class="prettyprint lang-javascript">$cell.closest('table').bind('filterReset', function(){ /* update the input here */ });</pre>
|
||||
</li>
|
||||
<li>In <span class="version">v2.15.0</span>, in order to update your custom input with any saved filter searches, you will need to bind to the <code>filterFomatterUpdate</code> event to get the saved filter value from the hidden input and apply it to your custom input.
|
||||
<pre class="prettyprint lang-javascript">$cell.closest('table').bind('filterFomatterUpdate', function(){
|
||||
var savedSearch = $cell.find('input[type=hidden]').val();
|
||||
// apply this saved search to your custom input
|
||||
});</pre>
|
||||
<li>If your selector needs a parsed value to work with, add the <code>filter-parsed</code> class name to the header cell above the filter, use this code to do that:
|
||||
<pre class="prettyprint lang-javascript">$cell.closest('thead').find('th[data-column=' + indx + ']').addClass('filter-parsed');</pre>
|
||||
</li>
|
||||
<li>Since, by default, the filter only matches cell content, a <code>1</code> in the filter will show all rows with a one no matter where it is located. So, if you need an exact match, add an equal sign to the end of the value (<code>1=</code>). This forces the filter to exactly match the value in the search input.</li>
|
||||
<li>To include a search delay, trigger the search on the hidden input and pass a boolean. If <code>true</code> or undefined, the search will be delayed and not delayed if <code>false</code>; modify the delay time set by changing the <code>filter_searchDelay</code> option.
|
||||
<pre class="prettyprint lang-javascript">$input.val( newVal ).trigger('search', false); // no search delay</pre>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<h1>Demo</h1>
|
||||
<div id="switcher"></div>
|
||||
<button type="button" class="reset">Reset Search</button>
|
||||
<br>
|
||||
<div id="demo"><table class="tablesorter">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Rank</th>
|
||||
<th>Age</th>
|
||||
<th>Total (range)</th>
|
||||
<th>Discount</th>
|
||||
<th data-placeholder="Try 1/18/2013">Date (one input)</th>
|
||||
<th>Date (two inputs; range)</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>1</td><td>25</td><td>$5.95</td><td>22%</td><td>Jun 26, 2013 7:22 AM</td><td>Jun 26, 2013 7:22 AM</td></tr>
|
||||
<tr><td>11</td><td>12</td><td>$82.99</td><td>5%</td><td>Aug 21, 2013 12:21 PM</td><td>Aug 21, 2013 12:21 PM</td></tr>
|
||||
<tr><td>12</td><td>51</td><td>$99.29</td><td>18%</td><td>Oct 13, 2013 1:15 PM</td><td>Oct 13, 2013 1:15 PM</td></tr>
|
||||
<tr><td>51</td><td>28</td><td>$9.99</td><td>20%</td><td>Jul 6, 2013 8:14 AM</td><td>Jul 6, 2013 8:14 AM</td></tr>
|
||||
<tr><td>21</td><td>33</td><td>$19.99</td><td>25%</td><td>Dec 10, 2012 5:14 AM</td><td>Dec 10, 2012 5:14 AM</td></tr>
|
||||
<tr><td>013</td><td>18</td><td>$65.89</td><td>45%</td><td>Jan 12, 2013 11:14 AM</td><td>Jan 12, 2013 11:14 AM</td></tr>
|
||||
<tr><td>005</td><td>45</td><td>$153.19</td><td>45%</td><td>Jan 18, 2014 9:12 AM</td><td>Jan 18, 2014 9:12 AM</td></tr>
|
||||
<tr><td>10</td><td>3</td><td>$5.29</td><td>4%</td><td>Jan 8, 2013 5:11 PM</td><td>Jan 8, 2013 5:11 PM</td></tr>
|
||||
<tr><td>16</td><td>24</td><td>$14.19</td><td>14%</td><td>Jan 14, 2014 11:23 AM</td><td>Jan 14, 2014 11:23 AM</td></tr>
|
||||
<tr><td>66</td><td>22</td><td>$13.19</td><td>11%</td><td>Jan 18, 2013 9:12 AM</td><td>Jan 18, 2013 9:12 AM</td></tr>
|
||||
<tr><td>100</td><td>18</td><td>$55.20</td><td>15%</td><td>Feb 12, 2013 7:23 PM</td><td>Feb 12, 2013 7:23 PM</td></tr>
|
||||
<tr><td>55</td><td>65</td><td>$123.00</td><td>32%</td><td>Jan 20, 2014 1:12 PM</td><td>Jan 20, 2014 1:12 PM</td></tr>
|
||||
<tr><td>9</td><td>25</td><td>$22.09</td><td>17%</td><td>Jun 11, 2013 10:55 AM</td><td>Jun 11, 2013 10:55 AM</td></tr>
|
||||
<tr><td>13</td><td>12</td><td>$19.99</td><td>18%</td><td>Jan 20, 2014 7:45 PM</td><td>Jan 20, 2014 7:45 PM</td></tr>
|
||||
<tr><td>73</td><td>58</td><td>$129.19</td><td>39%</td><td>Jan 20, 2014 10:11 AM</td><td>Jan 20, 2014 10:11 AM</td></tr>
|
||||
</tbody>
|
||||
</table></div>
|
||||
|
||||
<h1>Page Header</h1>
|
||||
<div>
|
||||
<pre class="prettyprint lang-html"><!-- jQuery UI for range slider -->
|
||||
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/cupertino/jquery-ui.css">
|
||||
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
|
||||
|
||||
<!-- tablesorter plugin -->
|
||||
<link rel="stylesheet" href="../css/theme.blue.css">
|
||||
<script src="../js/jquery.tablesorter.js"></script>
|
||||
<script src="../js/jquery.tablesorter.widgets.js"></script>
|
||||
|
||||
<!-- filter formatter code -->
|
||||
<link rel="stylesheet" href="../css/filter.formatter.css">
|
||||
<script src="../js/jquery.tablesorter.widgets-filter-formatter.js"></script></pre>
|
||||
</div>
|
||||
|
||||
<h1>CSS</h1>
|
||||
<div id="css">
|
||||
<pre class="prettyprint lang-css"></pre>
|
||||
</div>
|
||||
|
||||
<h1>Javascript</h1>
|
||||
<div id="javascript">
|
||||
<pre class="prettyprint lang-javascript"></pre>
|
||||
</div>
|
||||
|
||||
<h1>HTML</h1>
|
||||
<div id="html">
|
||||
<pre class="prettyprint lang-html"></pre>
|
||||
</div>
|
||||
|
||||
<div class="next-up">
|
||||
<hr />
|
||||
Next up: <a href="example-widget-filter-formatter-2.html">jQuery custom filter widget formatter (HTML5 Elements) ››</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
352
assets/vendor/tablesorter/docs/example-widget-filter-formatter-2.html
vendored
Normal file
352
assets/vendor/tablesorter/docs/example-widget-filter-formatter-2.html
vendored
Normal file
@@ -0,0 +1,352 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery plugin: Tablesorter 2.0 - Custom Filter Widget Formatter (HTML5 Elements)</title>
|
||||
|
||||
<!-- jQuery -->
|
||||
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.js"></script>
|
||||
|
||||
<!-- Demo stuff -->
|
||||
<link class="ui-theme" rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/cupertino/jquery-ui.css">
|
||||
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
|
||||
<link rel="stylesheet" href="css/jq.css">
|
||||
<link href="css/prettify.css" rel="stylesheet">
|
||||
<script src="js/prettify.js"></script>
|
||||
<script src="js/docs.js"></script>
|
||||
|
||||
<!-- Tablesorter: required -->
|
||||
<link href="../css/theme.blue.css" rel="stylesheet">
|
||||
<link href="../css/filter.formatter.css" rel="stylesheet">
|
||||
<script src="../js/jquery.tablesorter.js"></script>
|
||||
<script src="../js/jquery.tablesorter.widgets.js"></script>
|
||||
<script src="../js/jquery.tablesorter.widgets-filter-formatter.js"></script>
|
||||
|
||||
<style id="css">/* css needed to get compare selector & slider in-line */
|
||||
.compare-select-wrapper { width: 60%; float: right; }</style>
|
||||
|
||||
<script id="js">$(function() {
|
||||
|
||||
$("table").tablesorter({
|
||||
theme: 'blue',
|
||||
// hidden filter input/selects will resize the columns, so try to minimize the change
|
||||
widthFixed : true,
|
||||
// initialize zebra striping and filter widgets
|
||||
widgets: ["zebra", "filter", "stickyHeaders"],
|
||||
widgetOptions : {
|
||||
// Use the $.tablesorter.storage utility to save the most recent filters
|
||||
filter_saveFilters : true,
|
||||
// jQuery selector string of an element used to reset the filters
|
||||
filter_reset : 'button.reset',
|
||||
// add custom selector elements to the filter row
|
||||
filter_formatter : {
|
||||
|
||||
// Rank
|
||||
0 : function($cell, indx){
|
||||
return $.tablesorter.filterFormatter.html5Range( $cell, indx, {
|
||||
value: 0,
|
||||
min: 0,
|
||||
max: 100,
|
||||
delayed: true,
|
||||
valueToHeader: true,
|
||||
compare : [ '=', '>=', '<=' ],
|
||||
selected: 1
|
||||
});
|
||||
},
|
||||
|
||||
// Color
|
||||
1 : function($cell, indx){
|
||||
return $.tablesorter.filterFormatter.html5Color( $cell, indx, {
|
||||
value: '#000000',
|
||||
addToggle: true,
|
||||
exactMatch: true,
|
||||
valueToHeader: false
|
||||
});
|
||||
},
|
||||
|
||||
// Age
|
||||
3: function($cell, indx){
|
||||
return $.tablesorter.filterFormatter.html5Number( $cell, indx, {
|
||||
value: 1,
|
||||
min: 1,
|
||||
max: 65,
|
||||
delayed: true,
|
||||
addToggle: true,
|
||||
exactMatch: true,
|
||||
compare: ''
|
||||
});
|
||||
},
|
||||
|
||||
// Total
|
||||
4 : function($cell, indx){
|
||||
return $.tablesorter.filterFormatter.html5Range( $cell, indx, {
|
||||
value: 0,
|
||||
min: 0,
|
||||
max: 150,
|
||||
delayed: true,
|
||||
valueToHeader: true,
|
||||
compare : '>='
|
||||
});
|
||||
},
|
||||
|
||||
// Discount
|
||||
5: function($cell, indx){
|
||||
return $.tablesorter.filterFormatter.html5Number( $cell, indx, {
|
||||
value: 1,
|
||||
min: 1,
|
||||
max: 44,
|
||||
delayed: true,
|
||||
addToggle: false,
|
||||
compare: [ '<=', '=', '>=' ],
|
||||
selected: 2
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
});</script>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<div id="banner">
|
||||
<h1>table<em>sorter</em></h1>
|
||||
<h2>Custom Filter Widget Formatter (HTML5 Elements)</h2>
|
||||
<h3>Flexible client-side table sorting</h3>
|
||||
<a href="index.html">Back to documentation</a>
|
||||
</div>
|
||||
<div id="main">
|
||||
|
||||
<p></p>
|
||||
<br>
|
||||
<div class="accordion">
|
||||
|
||||
<h3><a href="#">Notes</a></h3>
|
||||
<div>
|
||||
<ul>
|
||||
<li>As of tablesorter version 2.9+, this widget can no longer be applied to versions of tablesorter prior to version 2.8.</li>
|
||||
<li>At this time, these widgets do not work with the sticky header widget.</li>
|
||||
<li>This page shows you how to add a few default <strong>HTML5 elements</strong> to interact with the filter widget.</li>
|
||||
<li>If the HTML5 elements are not supported by your browser, you'll just see an input.</li>
|
||||
<li>Custom filter widget option <code>filter_formatter</code> was added in version 2.7.7.</li>
|
||||
<li>jQuery v1.4.3+ required.</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<h3><a href="#"><strong>HTML Range</strong></a> <span class="xsmall">("Rank" and "Total" columns)</span></h3>
|
||||
<div>
|
||||
<ul>
|
||||
<li>In <span class="version">v2.15.0</span> the <code>compare</code> option was updated to allow adding a selector along with the input. The <code>selected</code> option allows choosing the default setting.</li>
|
||||
<li>This example shows how you can add an HTML5 range input slider to filter column content.</li>
|
||||
<li>The <code>filter_formatter</code> function provided in the extra "jquery.tablesorter.widgets-filter-formatter.js" file is used to add this custom control within the filter row.</li>
|
||||
<li>Make sure to include all values within the selected range, otherwise rows outside of this range will be forever hidden.</li>
|
||||
<li>Add the following code to apply an HTML5 range slider to the filter row:<pre class="prettyprint lang-javascript">$(function() {
|
||||
|
||||
$("table").tablesorter({
|
||||
theme: 'blue',
|
||||
// initialize zebra striping and filter widgets
|
||||
widgets: ["zebra", "filter"],
|
||||
widgetOptions : {
|
||||
// jQuery selector string of an element used to reset the filters
|
||||
filter_reset : 'button.reset',
|
||||
// add custom selector elements to the filter row
|
||||
filter_formatter : {
|
||||
|
||||
// Rank
|
||||
0 : function($cell, indx){
|
||||
return $.tablesorter.filterFormatter.html5Range( $cell, indx, {
|
||||
value: 0,
|
||||
min: 0,
|
||||
max: 100,
|
||||
delayed: true,
|
||||
valueToHeader: true,
|
||||
compare : [ '=', '>=', '<=' ],
|
||||
selected: 1
|
||||
});
|
||||
},
|
||||
|
||||
// Total
|
||||
4 : function($cell, indx){
|
||||
return $.tablesorter.filterFormatter.html5Range( $cell, indx, {
|
||||
value: 0,
|
||||
min: 0,
|
||||
max: 150,
|
||||
delayed: true,
|
||||
valueToHeader: true,
|
||||
compare : '>='
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
});</pre></li>
|
||||
<li>By default, this code has the <code>valueToHeader</code> option set to <code>true</code> to add the slider value to the header cell above the filter.</li>
|
||||
<li>The tooltip above the slider is NOT added in this example because the slider handle is not a separate element. But if you are interested, you can use <a href="http://codepen.io/chriscoyier/pen/lokyH">this code</a> by Chris Coyier to animate a range slider bubble.</li>
|
||||
<li>Another option named <code>exactMatch</code> was added to allow exact or general matching of column content.</li>
|
||||
<li>Notice that the left-most value, zero in this case, will clear the column filter to allow a method to show all column content. You can modify the "all" text using the <code>allText</code> option.</li>
|
||||
<li>A search delay option was added in v2.7.11 (time set by <code>filter_searchDelay</code> option). It can be disabled by setting the <code>delayed</code> option to <code>false</code>.</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<h3><a href="#"><strong>HTML5 color input</strong></a> <span class="xsmall">("Color" column)</span></h3>
|
||||
<div>
|
||||
<ul>
|
||||
<li>This example shows how you can add an HTML5 color input to filter column content.</li>
|
||||
<li>The <code>filter_formatter</code> function is used to add a custom control within the filter row, but a hidden input is still required to store the filter value.</li>
|
||||
<li>Add the following code to apply a color input to the filter row:<pre class="prettyprint lang-javascript">$(function() {
|
||||
|
||||
$("table").tablesorter({
|
||||
theme: 'blue',
|
||||
// hidden filter input/selects will resize the columns, so try to minimize the change
|
||||
widthFixed : true,
|
||||
// initialize zebra striping and filter widgets
|
||||
widgets: ["zebra", "filter"],
|
||||
widgetOptions : {
|
||||
// jQuery selector string of an element used to reset the filters
|
||||
filter_reset : 'button.reset',
|
||||
// add custom selector elements to the filter row
|
||||
filter_formatter : {
|
||||
|
||||
// Color
|
||||
1 : function($cell, indx){
|
||||
return $.tablesorter.filterFormatter.html5Color( $cell, indx, {
|
||||
value: '#000000',
|
||||
addToggle: true,
|
||||
exactMatch: true,
|
||||
valueToHeader: false
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
});</pre></li>
|
||||
<li>This color selector will only output the color as a hex value with a hash followed by six characters (<code>#000000</code>).</li>
|
||||
<li>By default, this code has the <code>valueToHeader</code> option set to <code>false</code>. The currently selected color is added to a span within the cell by default.</li>
|
||||
<li>Another option named <code>exactMatch</code> was added to allow exact or general matching of column content, in case you have multiple colors in one cell.</li>
|
||||
<li>This selector includes a toggle button. The toggle button is added by default, but if you don't want it, set the <code>addToggle</code> option to <code>false</code>. Without the toggle button, the filter is always active.</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<h3><a href="#"><strong>HTML5 Number Selector</strong></a> <span class="xsmall">("Age" and "Discount" columns)</span></h3>
|
||||
<div>
|
||||
<ul>
|
||||
<li>In <span class="version">v2.15.0</span> the <code>compare</code> option was updated to allow adding a selector along with the input. The <code>selected</code> option allows choosing the default setting.</li>
|
||||
<li>This example shows how you can add an HTML5 number spinner to the filter column content.</li>
|
||||
<li>The <code>filter_formatter</code> function provided in the extra "jquery.tablesorter.widgets-filter-formatter.js" file is used to add this custom control within the filter row.</li>
|
||||
<li>Add the following code to apply an HTML spinner to filter a column:<pre class="prettyprint lang-javascript">$(function() {
|
||||
|
||||
$("table").tablesorter({
|
||||
theme: 'blue',
|
||||
// hidden filter input/selects will resize the columns, so try to minimize the change
|
||||
widthFixed : true,
|
||||
// initialize zebra striping and filter widgets
|
||||
widgets: ["zebra", "filter"],
|
||||
widgetOptions : {
|
||||
// jQuery selector string of an element used to reset the filters
|
||||
filter_reset : 'button.reset',
|
||||
// add custom selector elements to the filter row
|
||||
filter_formatter : {
|
||||
|
||||
// Age
|
||||
3: function($cell, indx){
|
||||
return $.tablesorter.filterFormatter.html5Number( $cell, indx, {
|
||||
value: 1,
|
||||
min: 1,
|
||||
max: 65,
|
||||
delayed: true,
|
||||
addToggle: true,
|
||||
exactMatch: true,
|
||||
compare: ''
|
||||
});
|
||||
},
|
||||
|
||||
// Discount
|
||||
5: function($cell, indx){
|
||||
return $.tablesorter.filterFormatter.html5Number( $cell, indx, {
|
||||
value: 1,
|
||||
min: 1,
|
||||
max: 44,
|
||||
delayed: true,
|
||||
addToggle: false,
|
||||
compare: [ '<=', '=', '>=' ],
|
||||
selected: 2
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
});</pre></li>
|
||||
<li>This is spinner includes a toggle button. The toggle button is added by default, but if you don't want it, set the <code>addToggle</code> option to <code>false</code>. Without the toggle button, the filter is always active.</li>
|
||||
<li>Another option named <code>exactMatch</code> was added to allow exact or general matching of column content.</li>
|
||||
<li>A search delay option was added in v2.7.11 (time set by <code>filter_searchDelay</code> option). It can be disabled by setting the <code>delayed</code> option to <code>false</code>.</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<h1>Demo</h1>
|
||||
<button type="button" class="reset">Reset Search</button>
|
||||
<div id="demo"><table class="tablesorter">
|
||||
<thead>
|
||||
<tr><th>Rank</th><th>Color</th><th>Name</th><th>Age</th><th>Total</th><th>Discount</th><th>Date</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>1</td><td>#ff0000</td><td>Johnson</td><td>25</td><td>$5.95</td><td>22%</td><td>Jun 26, 2013 7:22 AM</td></tr>
|
||||
<tr><td>11</td><td>#00ff00</td><td>Hibert</td><td>12</td><td>$2.99</td><td>5%</td><td>Aug 21, 2013 12:21 PM</td></tr>
|
||||
<tr><td>12</td><td>#0000ff</td><td>Henry</td><td>51</td><td>$42.29</td><td>18%</td><td>Oct 13, 2013 1:15 PM</td></tr>
|
||||
<tr><td>51</td><td>#00ff00</td><td>Parker</td><td>28</td><td>$9.99</td><td>20%</td><td>Jul 6, 2013 8:14 AM</td></tr>
|
||||
<tr><td>21</td><td>#ffffff</td><td>Hood</td><td>33</td><td>$19.99</td><td>25%</td><td>Dec 10, 2012 5:14 AM</td></tr>
|
||||
<tr><td>013</td><td>#ff0000</td><td>Kent</td><td>18</td><td>$15.89</td><td>44%</td><td>Jan 12, 2013 11:14 AM</td></tr>
|
||||
<tr><td>005</td><td>#00ff00</td><td>Bruce</td><td>45</td><td>$153.19</td><td>44%</td><td>Jan 18, 2014 9:12 AM</td></tr>
|
||||
<tr><td>10</td><td>#000000</td><td>Alex</td><td>3</td><td>$5.29</td><td>4%</td><td>Jan 8, 2013 5:11 PM</td></tr>
|
||||
<tr><td>16</td><td>#ff0000</td><td>Franco</td><td>24</td><td>$14.19</td><td>14%</td><td>Jan 14, 2014 11:23 AM</td></tr>
|
||||
<tr><td>66</td><td>#000000</td><td>Evans</td><td>22</td><td>$13.19</td><td>11%</td><td>Jan 18, 2013 9:12 AM</td></tr>
|
||||
<tr><td>100</td><td>#ffffff</td><td>Brenda</td><td>18</td><td>$55.20</td><td>15%</td><td>Feb 12, 2013 7:23 PM</td></tr>
|
||||
<tr><td>55</td><td>#000000</td><td>Bronson</td><td>65</td><td>$123.00</td><td>32%</td><td>Jan 20, 2014 1:12 PM</td></tr>
|
||||
<tr><td>9</td><td>#000000</td><td>Martha</td><td>25</td><td>$22.09</td><td>17%</td><td>Jun 11, 2013 10:55 AM</td></tr>
|
||||
</tbody>
|
||||
</table></div>
|
||||
|
||||
<h1>Page Header</h1>
|
||||
<div>
|
||||
<pre class="prettyprint lang-html"><!-- jQuery UI for range slider -->
|
||||
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/cupertino/jquery-ui.css">
|
||||
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
|
||||
|
||||
<!-- tablesorter plugin -->
|
||||
<link rel="stylesheet" href="../css/theme.blue.css">
|
||||
<script src="../js/jquery.tablesorter.js"></script>
|
||||
<script src="../js/jquery.tablesorter.widgets.js"></script>
|
||||
|
||||
<!-- filter formatter code -->
|
||||
<link rel="stylesheet" href="../css/filter.formatter.css">
|
||||
<script src="../js/jquery.tablesorter.widgets-filter-formatter.js"></script></pre>
|
||||
</div>
|
||||
|
||||
<h1>Javascript</h1>
|
||||
<div id="javascript">
|
||||
<pre class="prettyprint lang-javascript"></pre>
|
||||
</div>
|
||||
|
||||
<h1>HTML</h1>
|
||||
<div id="html">
|
||||
<pre class="prettyprint lang-html"></pre>
|
||||
</div>
|
||||
|
||||
<div class="next-up">
|
||||
<hr />
|
||||
Next up: <a href="example-widget-ui-theme.html">UITheme widget - jQuery UI theme ››</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
503
assets/vendor/tablesorter/docs/example-widget-filter.html
vendored
Normal file
503
assets/vendor/tablesorter/docs/example-widget-filter.html
vendored
Normal file
@@ -0,0 +1,503 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery plugin: Tablesorter 2.0 - Filter Widget</title>
|
||||
|
||||
<!-- jQuery -->
|
||||
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.js"></script>
|
||||
|
||||
<!-- Demo stuff -->
|
||||
<link class="ui-theme" rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/cupertino/jquery-ui.css">
|
||||
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
|
||||
<link rel="stylesheet" href="css/jq.css">
|
||||
<link href="css/prettify.css" rel="stylesheet">
|
||||
<script src="js/prettify.js"></script>
|
||||
<script src="js/docs.js"></script>
|
||||
<style>
|
||||
/* override the vertical-align top in the blue theme */
|
||||
.notes.tablesorter-blue tbody td { vertical-align: middle; }
|
||||
</style>
|
||||
|
||||
<!-- Tablesorter: required -->
|
||||
<link rel="stylesheet" href="../css/theme.blue.css">
|
||||
<script src="../js/jquery.tablesorter.js"></script>
|
||||
<script src="../js/jquery.tablesorter.widgets.js"></script>
|
||||
|
||||
<script id="js">$(function() {
|
||||
|
||||
// call the tablesorter plugin
|
||||
$("table.tablesorter").tablesorter({
|
||||
theme: 'blue',
|
||||
|
||||
// hidden filter input/selects will resize the columns, so try to minimize the change
|
||||
widthFixed : true,
|
||||
|
||||
// initialize zebra striping and filter widgets
|
||||
widgets: ["zebra", "filter"],
|
||||
|
||||
// headers: { 5: { sorter: false, filter: false } },
|
||||
|
||||
widgetOptions : {
|
||||
|
||||
// filter_anyMatch options was removed in v2.15; it has been replaced by the filter_external option
|
||||
|
||||
// If there are child rows in the table (rows with class name from "cssChildRow" option)
|
||||
// and this option is true and a match is found anywhere in the child row, then it will make that row
|
||||
// visible; default is false
|
||||
filter_childRows : false,
|
||||
|
||||
// if true, a filter will be added to the top of each table column;
|
||||
// disabled by using -> headers: { 1: { filter: false } } OR add class="filter-false"
|
||||
// if you set this to false, make sure you perform a search using the second method below
|
||||
filter_columnFilters : true,
|
||||
|
||||
// extra css class name(s) applied to the table row containing the filters & the inputs within that row
|
||||
// this option can either be a string (class applied to all filters) or an array (class applied to indexed filter)
|
||||
filter_cssFilter : '', // or []
|
||||
|
||||
// jQuery selector (or object) pointing to an input to be used to match the contents of any column
|
||||
// please refer to the filter-any-match demo for limitations - new in v2.15
|
||||
filter_external : '',
|
||||
|
||||
// class added to filtered rows (rows that are not showing); needed by pager plugin
|
||||
filter_filteredRow : 'filtered',
|
||||
|
||||
// add custom filter elements to the filter row
|
||||
// see the filter formatter demos for more specifics
|
||||
filter_formatter : null,
|
||||
|
||||
// add custom filter functions using this option
|
||||
// see the filter widget custom demo for more specifics on how to use this option
|
||||
filter_functions : null,
|
||||
|
||||
// if true, filters are collapsed initially, but can be revealed by hovering over the grey bar immediately
|
||||
// below the header row. Additionally, tabbing through the document will open the filter row when an input gets focus
|
||||
filter_hideFilters : true,
|
||||
|
||||
// Set this option to false to make the searches case sensitive
|
||||
filter_ignoreCase : true,
|
||||
|
||||
// if true, search column content while the user types (with a delay)
|
||||
filter_liveSearch : true,
|
||||
|
||||
// a header with a select dropdown & this class name will only show available (visible) options within that drop down.
|
||||
filter_onlyAvail : 'filter-onlyAvail',
|
||||
|
||||
// jQuery selector string of an element used to reset the filters
|
||||
filter_reset : 'button.reset',
|
||||
|
||||
// Use the $.tablesorter.storage utility to save the most recent filters (default setting is false)
|
||||
filter_saveFilters : true,
|
||||
|
||||
// Delay in milliseconds before the filter widget starts searching; This option prevents searching for
|
||||
// every character while typing and should make searching large tables faster.
|
||||
filter_searchDelay : 300,
|
||||
|
||||
// if true, server-side filtering should be performed because client-side filtering will be disabled, but
|
||||
// the ui and events will still be used.
|
||||
filter_serversideFiltering: false,
|
||||
|
||||
// Set this option to true to use the filter to find text from the start of the column
|
||||
// So typing in "a" will find "albert" but not "frank", both have a's; default is false
|
||||
filter_startsWith : false,
|
||||
|
||||
// Filter using parsed content for ALL columns
|
||||
// be careful on using this on date columns as the date is parsed and stored as time in seconds
|
||||
filter_useParsedData : false,
|
||||
|
||||
// data attribute in the header cell that contains the default filter value
|
||||
filter_defaultAttrib : 'data-value'
|
||||
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
// External search
|
||||
// buttons set up like this:
|
||||
// <button type="button" data-filter-column="4" data-filter-text="2?%">Saved Search</button>
|
||||
$('button[data-filter-column]').click(function(){
|
||||
/*** first method *** data-filter-column="1" data-filter-text="!son"
|
||||
add search value to Discount column (zero based index) input */
|
||||
var filters = [],
|
||||
$t = $(this),
|
||||
col = $t.data('filter-column'), // zero-based index
|
||||
txt = $t.data('filter-text') || $t.text(); // text to add to filter
|
||||
|
||||
filters[col] = txt;
|
||||
// using "table.hasFilters" here to make sure we aren't targetting a sticky header
|
||||
$.tablesorter.setFilters( $('table.hasFilters'), filters, true ); // new v2.9
|
||||
|
||||
/** old method (prior to tablsorter v2.9 ***
|
||||
var filters = $('table.tablesorter').find('input.tablesorter-filter');
|
||||
filters.val(''); // clear all filters
|
||||
filters.eq(col).val(txt).trigger('search', false);
|
||||
******/
|
||||
|
||||
/*** second method ***
|
||||
this method bypasses the filter inputs, so the "filter_columnFilters"
|
||||
option can be set to false (no column filters showing)
|
||||
******/
|
||||
/*
|
||||
var columns = [];
|
||||
columns[5] = '2?%'; // or define the array this way [ '', '', '', '', '', '2?%' ]
|
||||
$('table').trigger('search', [ columns ]);
|
||||
*/
|
||||
|
||||
return false;
|
||||
});
|
||||
|
||||
});</script>
|
||||
|
||||
<script>
|
||||
$(function(){
|
||||
|
||||
// *** widgetfilter_startsWith toggle button ***
|
||||
$('button.toggle').click(function(){
|
||||
var c = $('table.tablesorter')[0].config,
|
||||
$t = $(this),
|
||||
// toggle the boolean
|
||||
fsw = !c.widgetOptions.filter_startsWith,
|
||||
fic = !c.widgetOptions.filter_ignoreCase;
|
||||
if ($t.hasClass('fsw')) {
|
||||
c.widgetOptions.filter_startsWith = fsw;
|
||||
$('#start').html(fsw.toString());
|
||||
} else if ($t.hasClass('fic')) {
|
||||
c.widgetOptions.filter_ignoreCase = fic;
|
||||
$('#case').html(fic.toString());
|
||||
} else {
|
||||
$t = c.$headers.eq(1).toggleClass('filter-match');
|
||||
$t.find('span').html( $t.hasClass('filter-match') ? '' : ' No' );
|
||||
}
|
||||
// update search after option change; add false to trigger to skip search delay
|
||||
$('table.tablesorter').trigger('search', false);
|
||||
return false;
|
||||
});
|
||||
|
||||
});
|
||||
</script>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<div id="banner">
|
||||
<h1>table<em>sorter</em></h1>
|
||||
<h2>Filter Widget</h2>
|
||||
<h3>Flexible client-side table sorting</h3>
|
||||
<a href="index.html">Back to documentation</a>
|
||||
</div>
|
||||
<div id="main">
|
||||
|
||||
<p></p>
|
||||
<br>
|
||||
<div class="accordion">
|
||||
|
||||
<h3 id="notes"><a href="#">Notes</a></h3>
|
||||
<div>
|
||||
<ul>
|
||||
<li>In <span class="version updated">v2.15</span>,
|
||||
<ul>
|
||||
<li>The <code>filter_anyMatch</code> widget option was completely <span class="label alert">removed</span>. Sorry for not deprecating this option, but the filter any match code was completely rewritten.</li>
|
||||
<li>Added a <code>filter_external</code> widget option to only accept a jQuery selector string/object; please see the updated <a href="example-widget-filter-any-match.html">filter any match</a> demo for more details.</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>Added & set <code>filter_saveFilters</code> to <code>true</code> (default is <code>false</code>) in this demo (<span class="version">v2.14</span>).</li>
|
||||
<li>Hover over the grey bar below the table header to open the filter row. Disable this by setting <code>filter_hideFilters</code> option to <code>false</code>.</li>
|
||||
<li>This widget uses jQuery's <code>.nextUntil()</code> function which is only available is jQuery version 1.4+.</li>
|
||||
<li>This widget does work with tablesorter v2.0.5.</li>
|
||||
<li>Using the filters:
|
||||
<table class="tablesorter-blue notes">
|
||||
<thead><tr><th>Type <small class="bright">(1)(2)</small></th><th>Description</th><th>Examples</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td class="center">text</td><td>Any text entered in the filter will <strong>match</strong> text found within the column</td><td><code>abc</code> (finds "abc", "abcd", "abcde", etc); <button data-filter-column="1">Aaron</button> (finds "Aaron" and "Philip Aaron Wong")</td></tr>
|
||||
<tr><td class="center"><code>~</code></td><td>Perform a fuzzy search (matches sequential characters) by adding a tilde to the beginning of the query (<span class="version">v2.13.3</span>)</td><td><button data-filter-column="1">~bee</button> (matches "Bruce Lee" and "Brenda Dexter") or <button data-filter-column="1">~piano</button> (matches "Philip Aaron Wong")</td></tr>
|
||||
<tr><td class="center"><code>"</code></td><td>To exactly match the search query, add a quote, apostrophe or equal sign to the beginning and/or end of the query</td><td><code>abc"</code> or <code>abc=</code> (exactly match "abc"); <button data-filter-column="1">John"</button> or <button data-filter-column="1">John=</button> (exactly match "John")</td></tr>
|
||||
<tr><td class="center"><code>?</code></td><td>Wildcard for a single, non-space character.</td><td><code>J?n</code> (finds "Jan" and "Jun", but not "Joan"); <button data-filter-column="2">a?s</button> (finds "Dumass" and "Evans", but not "McMasters")</td></tr>
|
||||
<tr><td class="center"><code>*</code></td><td>Wildcard for zero or more non-space characters.</td><td><code>B*k</code> (matches "Black" and "Book"); <button data-filter-column="2">a*s</button> (matches "Dumass", "Evans" and "McMasters")</td></tr>
|
||||
<tr><td class="center"><code>/\d/</code></td><td>Add any regex to the query to use in the query</td><td><code>/b[aeiou]g/i</code> (finds "bag", "beg", "BIG", "Bug", etc); <button data-filter-column="1">/r$/</button> (matches text that ends with an "r")</td></tr>
|
||||
<tr><td class="center"><code>< <= >= ></code></td><td>Find alphabetical or numerical values less than or greater than or equal to the filtered query <small class="bright">(2)</small>.</td><td><button data-filter-column="5">>= 10</button> (find values greater than or equal to 10)</td></tr>
|
||||
<tr><td class="center"><code>!</code></td><td>Not operator. Filter the column with content that <strong>do not</strong> match the query.</td><td><code>!fe</code> (hide rows with "female" in that column, but shows rows with "male"); <button data-filter-column="1">!a</button> (find text that doesn't contain an "a")</td></tr>
|
||||
<tr><td class="center"><code> && </code> or <code> AND </code></td><td>Logical "and". Filter the column for content that matches text from either side of the operator.</td><td><code>box && bat</code> (matches a column cell that contains both "box" and "bat"); <button data-filter-column="1">Br && c</button> (Find text that contains both "br" and "c")</td></tr>
|
||||
<tr><td class="center"><code>|</code> or <code> OR </code></td><td>Logical "or" (Vertical bar). Filter the column for content that matches text from either side of the bar <small class="bright">(3)</small>.</td><td><code>box|bat</code> (matches a column cell with either "box" or "bat"); <button data-filter-column="1">Alex|Peter</button> (Find text that contains either "Alex" or "Peter")</td></tr>
|
||||
<tr><td class="center"><code> - </code> or <code> to </code></td><td>Find a range of values. Make sure there is a space before and after the dash (or the word "to") <small class="bright">(4)</small>.</td><td><button data-filter-column="3">10 - 30</button> or <button data-filter-column="4">10 to 30</button> (match values between 10 and 30)</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<span class="bright">(1)</span> You cannot combine these operators with each other (except for the wildcards).<br>
|
||||
<span class="bright">(2)</span> The filter order (or precendence) of how searches are checked is as follows: <span class="smallcode">regex (<code>/\d/</code>) <strong>></strong> operators (<code>< <= >= ></code>) <strong>></strong> exact (<code>"</code>) <strong>></strong> not match (<code>!</code>) <strong>></strong> and (<code> AND </code>) <strong>></strong> range (<code> - </code>) <strong>></strong> wild/or (<code>?</code>, <code>*</code> and <code> OR </code>) <strong>></strong> fuzzy (<code>~</code>); so an exact match will override "and", "or" and "range" searches </span> (*NOTE* order changed in <span class="version updated">v2.15</span>, operators prioritized before exact; see <a href="https://github.com/Mottie/tablesorter/issues/465">issue #465</a>) <br>
|
||||
<span class="bright">(3)</span> Logical "or" comparisons can now show exact matches (by default; <span class="version">v2.10.1</span>) or just match cell contents.<br>
|
||||
<span class="bright">(4)</span> In tablesorter <span class="version">v2.10</span>, comparisons can be made in date columns (if properly parsed).
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<h3><a href="#">Options</a></h3>
|
||||
<div>
|
||||
<h3>Filter widget defaults (added inside of tablesorter <code>widgetOptions</code>)</h3>
|
||||
<ul>
|
||||
<li><del><code>filter_anyMatch : null</code></del> - jQuery selector string (or jQuery object) of external anyMatch filter (<span class="label alert">removed</span> in v2.15; please see <a href="example-widget-filter-any-match.html">the demo</a> for more details).</li>
|
||||
<li><code>filter_childRows : false</code> - if true, filter includes child row content in the search.</li>
|
||||
<li><code>filter_columnFilters : true</code> - if true, a filter will be added to the top of each table column.</li>
|
||||
<li><code>filter_cssFilter : ''</code> - extra css class name(s) applied to the table row containing the filters & the inputs within that row. This option can either be a string (class applied to all filters) or an array (class applied to indexed filter).</li>
|
||||
<li><code>filter_defaultAttrib : 'data-value'</code> - this option contains the name of the data-attribute which contains the default (starting) filter value.</li>
|
||||
<li><code>filter_external : ''</code> - jQuery selector (or object) pointing to an input to be used to match the contents of any column; please refer to the updated <a href="example-widget-filter-any-match.html">filter-any-match demo</a> for limitations (<span class="version">v2.15</span>).</li>
|
||||
<li><code>filter_filteredRow : 'filtered'</code> - css class name added to filtered rows (rows that are not showing); needed by pager plugin.</li>
|
||||
<li><code>filter_formatter : null</code> - add custom filter elements to the filter row.</li>
|
||||
<li><code>filter_functions : null</code> - add custom filter functions using this option.</li>
|
||||
<li><code>filter_hideFilters : false</code> - if true, filters are hidden initially, but can be revealed by clicking on the filter icon <span class="remark">*</span>.</li>
|
||||
<li><code>filter_ignoreCase : true</code> - if true, make all searches case-insensitive.</li>
|
||||
<li><code>filter_liveSearch : true</code> - if true, search column content while the user types (with a delay). If false, the user must press enter to start the search. If set to a number, when the length of the input text reaches this minimum length, a search will initiate.</li>
|
||||
<li><code>filter_onlyAvail : 'filter-onlyAvail'</code> - a header with a select dropdown & this class name will only show available (visible) options within that drop down.</li>
|
||||
<li><code>filter_reset : null</code> - jQuery selector string of an element used to reset the filters.</li>
|
||||
<li><code>filter_saveFilters : false</code> - Uses the <code>$.tablesorter.storage</code> utility to save the most recent filters.</li>
|
||||
<li><code>filter_searchDelay : 300</code> - typing delay in milliseconds before starting a search.</li>
|
||||
<li><code>filter_serversideFiltering : false</code> - if true, filter will be done server-side. The client-side filtering will be disabled, but the ui and events will still be used.</li>
|
||||
<li><code>filter_startsWith : false</code> - if true, filter start from the beginning of the cell contents.</li>
|
||||
<li><code>filter_useParsedData : false</code> - filter all data using parsed content.</li>
|
||||
</ul>
|
||||
<!-- <span class="alert">Caution</span>: In my testing, it appears that Chrome does not properly render a previously hidden search input text properly (<a href="http://jsfiddle.net/Mottie/Mjbab/1/">demo</a>), so for now, I'm changing this demo's <code>filter_hideFilters</code> option to <code>false</code> until the source of this problem is determined. -->
|
||||
</div>
|
||||
|
||||
<h3><a href="#">Classes</a></h3>
|
||||
<div>
|
||||
Class names that can be added to the <code>th</code> header cells:
|
||||
<ul>
|
||||
<li><code>filter-false</code> - disable the filter for a specific header column.</li>
|
||||
<li><code>filter-select</code> - build a default select box for a column (shows unique column content). See the <a href="example-widget-filter-custom.html">custom filter widget</a> demo for an example.</li>
|
||||
<li><code>filter-match</code> - applies to "filter-select" columns and columns where the user can use the logical "or" search. Makes the filter/select match the column contents instead of exactly matching.</li>
|
||||
<li><code>filter-parsed</code> - set a column to filter through parsed data instead of the actual table cell content.</li>
|
||||
<li><code>filter-onlyAvail</code> - show only available (visible) options within a default select box. See the <a href="example-widget-filter-custom.html">custom filter widget</a> demo "Discount" column for an example.</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<h3><a href="#">Methods</a></h3>
|
||||
<div>
|
||||
<h3>Set Filter Placeholder Text</h3>
|
||||
<blockquote>
|
||||
Set a <code>data-placeholder</code> attribute on the associated table header with your desired placeholder text
|
||||
<pre class="prettyprint lang-html"><th data-placeholder="Enter Something">Name</th></pre>
|
||||
or, set the header cell's jQuery data
|
||||
<pre class="prettyprint lang-javascript">$('.tablesorter th:eq(0)').data('placeholder', 'Search for...')</pre>
|
||||
</blockquote>
|
||||
|
||||
<h3>filterReset</h3>
|
||||
<blockquote>
|
||||
Use the <code>filterReset</code> method to reset (clear) all of the current filters using this method
|
||||
<pre class="prettyprint lang-javascript">$('table').trigger('filterReset');</pre>
|
||||
</blockquote>
|
||||
|
||||
<h3>search</h3>
|
||||
<blockquote>
|
||||
With this method, you can pass an array of filter values:
|
||||
<pre class="prettyprint lang-javascript">// apply "2?%" filter to the fifth column (zero-based index)
|
||||
var columns = [];
|
||||
columns[5] = '2?%';
|
||||
// or define the array this way var columns = [ '', '', '', '', '', '2?%' ]
|
||||
$('table').trigger('search', [ columns ]);</pre>
|
||||
or, just pass <code>false</code> to refresh the current search:
|
||||
<pre class="prettyprint lang-javascript">$('table').trigger('search', false);</pre>
|
||||
* Note: using this search method will update the contents of the filters within the filter row.<br>
|
||||
<br>
|
||||
In <span class="version updated">v2.15</span>, one additional parameter can be added to the array to perform an "any-match" of the table; <span class="label warning">Warning!</span> please note that if no external input (with a <code>data-column="all"</code> is attached using <a href="index.html#function-bindsearch"><code>bindSearch</code></a> function) is visible, the user will not know that a filter has been applied. <pre class="prettyprint lang-js">// in a table with 4 columns; set the 5th parameter to any-match
|
||||
$('table').trigger( 'search', [['', '', '', '', 'orange']] ); // find orange in any column</pre>
|
||||
</blockquote>
|
||||
|
||||
<h3>Get current filters</h3>
|
||||
<blockquote>
|
||||
Get an array of the currently applied filters (<span class="version">v2.9</span>).
|
||||
<pre class="prettyprint lang-javascript">$.tablesorter.getFilters( $('table') ); // or $('table.hasFilters')</pre>
|
||||
This method returns an array of filter values or <code>false</code> if the selected table does not contain a filter row.<br>
|
||||
<br>
|
||||
Internally, the get filters functions returns the filters stored within this table data <code>$('table').data('lastSearch')</code>, unless an additional parameter of <code>true</code> is passed to the function:
|
||||
<pre class="prettyprint lang-javascript">$.tablesorter.getFilters( $('table'), true ); // get current input values instead of data stored filters</pre>
|
||||
As of <span class="version updated">v2.15</span>, if an external "any-match" filter (see <code>filter_external</code> widget option) is included, one additional array parameter will be returned in the filter - the value of the any match search.
|
||||
<pre class="prettyprint lang-js">// in a table with six columns, this function will return an array with seven
|
||||
// parameters; something like this: [ '', '', '', '', '', '', '11' ],
|
||||
// where the "11" will be obtained from the "any-match" input
|
||||
var filters = $.tablesorter.getFilters( $('table') );</pre>
|
||||
</blockquote>
|
||||
|
||||
<h3>Set current filters</h3>
|
||||
<blockquote>
|
||||
Set the values of the actual filters using this method; include a <code>true</code> boolean to actually apply the search (<span class="version">v2.9</span>).
|
||||
<pre class="prettyprint lang-javascript">// update filters, but don't apply the search
|
||||
$.tablesorter.setFilters( $('table'), [ '', '', '', '', '', '2?%' ] );
|
||||
|
||||
// update filters, AND apply the search
|
||||
$.tablesorter.setFilters( $('table'), [ '', '', '', '', '', '2?%' ], true );</pre>
|
||||
This method returns <code>true</code> if the filters were sucessfully applied, or <code>false</code> if the table does have a filter row.<br>
|
||||
<br>
|
||||
As of <span class="version updated">v2.15</span>, if an external "any-match" filter (see <code>filter_external</code> widget option) is included, add an additional array parameter to set that filter; so if a table has six columns, add the any-match search as the seventh value.
|
||||
<pre class="prettyprint lang-js">// in a table with 6 columns, the 7th filter will apply
|
||||
// to the any-match filter & match any table column with "11"
|
||||
$.tablesorter.setFilters( $('table'), [ '', '', '', '', '', '', '11' ], true );</pre>
|
||||
</blockquote>
|
||||
|
||||
<h3>Bind External filter</h3>
|
||||
<blockquote>
|
||||
Use this method to bind external search filters; include a data-attribute <code>data-column</code> with the column index to target, or use <code>data-column="all"</code> to preform an "any-match" search (<span class="version updated">v2.15</span>). If no <code>data-column</code> is added to the input, the input will be ignored.
|
||||
<pre class="prettyprint lang-html"><!-- will perform an "any-match" type of search (matches any column) -->
|
||||
<input type="search" class="search" data-column="all">
|
||||
<!-- will only search the first column (zero-based index) -->
|
||||
<input type="search" class="search" data-column="0"></pre>
|
||||
<pre class="prettyprint lang-javascript">// Target the $('.search') input using built in functioning
|
||||
// this binds to the search using "search" and "keyup" and allows using filter_liveSearch
|
||||
// or delayed search & pressing escape to cancel the search
|
||||
// pass an optional third parameter (false boolean) to force the inputs to update
|
||||
// this allows changing the data-column for an input dynamically
|
||||
$.tablesorter.filter.bindSearch( $table, $('.search'), false );</pre>
|
||||
If you don't care about the enhanced search filter, then bind to both the "keyup" and "search" events
|
||||
<pre class="prettyprint lang-javascript">// Basic search binding, alternate to the above
|
||||
// bind to search - pressing enter and clicking on "x" to clear (Webkit)
|
||||
// keyup allows dynamic searching
|
||||
$(".search").bind('search keyup', function (e) {
|
||||
$('table').trigger('search', [ [this.value] ]);
|
||||
});
|
||||
</pre></blockquote>
|
||||
|
||||
</div>
|
||||
|
||||
<h3><a href="#">Events</a></h3>
|
||||
<div>
|
||||
<ul>
|
||||
<li><code>filterEnd</code> - Event triggered when the filter widget has finished processing the search.</li>
|
||||
<li><code>filterInit</code> - Event triggered when the filter widget has finished initializing.</li>
|
||||
<li><code>filterStart</code> - Event triggered when the filter widget has started processing the search.</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<h3><a href="#">Changes</a></h3>
|
||||
<div class="inner">
|
||||
<p>Moved to the wiki pages - <a href="https://github.com/Mottie/tablesorter/wiki/Change3">filter change log</a>.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h1>Demo</h1>
|
||||
<button type="button" class="toggle fsw">Toggle</button> filter_startsWith : <span id="start">false</span> (if true, search from beginning of cell content only)<br>
|
||||
<button type="button" class="toggle fic">Toggle</button> filter_ignoreCase : <span id="case">true</span> (if false, the search will be case sensitive)<br>
|
||||
<button type="button" class="toggle ffm">Toggle</button> filter-match (if class name added to the "First Name" column, all "or" searches will only match the content; Search <button data-filter-column="1">alex|br*|c</button> in the First Name column (<span class="version">2.10.1</span>).
|
||||
<hr>
|
||||
|
||||
<div id="demo">Search <button type="button" data-filter-column="5" data-filter-text="2?%">2?%</button> in the Discount column<br>
|
||||
<button type="button" class="reset">Reset</button> <!-- targeted by the "filter_reset" option -->
|
||||
|
||||
<table class="tablesorter">
|
||||
<thead>
|
||||
<tr>
|
||||
<!-- you can also add a placeholder using script; $('.tablesorter th:eq(0)').data('placeholder', 'hello') -->
|
||||
<th data-placeholder="" class="filter-false">Rank</th>
|
||||
<th data-placeholder="Try B*{space} or alex|br*|c" class="filter-match">First Name (<span></span> filter-match )</th>
|
||||
<th data-placeholder="Try <d">Last Name</th>
|
||||
<th data-placeholder="Try >=33">Age</th>
|
||||
<th data-placeholder="Try <9.99">Total</th>
|
||||
<th data-placeholder="Try 2?%">Discount</th> <!-- add class="filter-false" to disable the filter in this column -->
|
||||
<th data-placeholder="Try /20[^0]\d/ or >1/1/2010">Date</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>1</td><td>Philip Aaron Wong</td><td>Johnson Sr Esq</td><td>25</td><td>$5.95</td><td>22%</td><td>Jun 26, 2004 7:22 AM</td></tr>
|
||||
<tr><td>11</td><td>Aaron</td><td>Hibert</td><td>12</td><td>$2.99</td><td>5%</td><td>Aug 21, 2009 12:21 PM</td></tr>
|
||||
<tr><td>12</td><td>Brandon Clark</td><td>Henry Jr</td><td>51</td><td>$42.29</td><td>18%</td><td>Oct 13, 2000 1:15 PM</td></tr>
|
||||
<tr><td>111</td><td>Peter</td><td>Parker</td><td>28</td><td>$9.99</td><td>20%</td><td>Jul 6, 2006 8:14 AM</td></tr>
|
||||
<tr><td>21</td><td>John</td><td>Hood</td><td>33</td><td>$19.99</td><td>25%</td><td>Dec 10, 2002 5:14 AM</td></tr>
|
||||
<tr><td>013</td><td>Clark</td><td>Kent Sr.</td><td>18</td><td>$15.89</td><td>44%</td><td>Jan 12, 2003 11:14 AM</td></tr>
|
||||
<tr><td>005</td><td>Bruce</td><td>Almighty Esq</td><td>45</td><td>$153.19</td><td>44%</td><td>Jan 18, 2021 9:12 AM</td></tr>
|
||||
<tr><td>10</td><td>Alex</td><td>Dumass</td><td>13</td><td>$5.29</td><td>4%</td><td>Jan 8, 2012 5:11 PM</td></tr>
|
||||
<tr><td>16</td><td>Jim</td><td>Franco</td><td>24</td><td>$14.19</td><td>14%</td><td>Jan 14, 2004 11:23 AM</td></tr>
|
||||
<tr><td>166</td><td>Bruce Lee</td><td>Evans</td><td>22</td><td>$13.19</td><td>11%</td><td>Jan 18, 2007 9:12 AM</td></tr>
|
||||
<tr><td>100</td><td>Brenda Dexter</td><td>McMasters</td><td>18</td><td>$55.20</td><td>15%</td><td>Feb 12, 2010 7:23 PM</td></tr>
|
||||
<tr><td>55</td><td>Dennis</td><td>Bronson</td><td>65</td><td>$123.00</td><td>32%</td><td>Jan 20, 2001 1:12 PM</td></tr>
|
||||
<tr><td>9</td><td>Martha</td><td>delFuego</td><td>25</td><td>$22.09</td><td>17%</td><td>Jun 11, 2011 10:55 AM</td></tr>
|
||||
</tbody>
|
||||
</table></div>
|
||||
|
||||
<h1>Page Header</h1>
|
||||
<div>
|
||||
<pre class="prettyprint lang-html"><!-- blue theme stylesheet -->
|
||||
<link rel="stylesheet" href="../css/theme.blue.css">
|
||||
<!-- tablesorter plugin -->
|
||||
<script src="../js/jquery.tablesorter.js"></script>
|
||||
|
||||
<!-- tablesorter widget file - loaded after the plugin -->
|
||||
<script src="../js/jquery.tablesorter.widgets.js"></script></pre>
|
||||
</div>
|
||||
|
||||
<h1>Javascript</h1>
|
||||
<div id="javascript">
|
||||
<pre class="prettyprint lang-javascript"></pre>
|
||||
</div>
|
||||
|
||||
<h1>CSS</h1>
|
||||
<div>
|
||||
<pre class="prettyprint lang-css">/* This css is already contained within each theme file */
|
||||
/* filter row */
|
||||
.tablesorter-filter-row td {
|
||||
background: #eee;
|
||||
line-height: normal;
|
||||
text-align: center; /* center the input */
|
||||
-webkit-transition: line-height 0.1s ease;
|
||||
-moz-transition: line-height 0.1s ease;
|
||||
-o-transition: line-height 0.1s ease;
|
||||
transition: line-height 0.1s ease;
|
||||
}
|
||||
/* optional disabled input styling */
|
||||
.tablesorter-filter-row .disabled {
|
||||
opacity: 0.5;
|
||||
filter: alpha(opacity=50);
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
/* hidden filter row */
|
||||
.tablesorter-filter-row.hideme td {
|
||||
/*** *********************************************** ***/
|
||||
/*** change this padding to modify the thickness ***/
|
||||
/*** of the closed filter row (height = padding x 2) ***/
|
||||
padding: 2px;
|
||||
/*** *********************************************** ***/
|
||||
margin: 0;
|
||||
line-height: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
.tablesorter-filter-row.hideme .tablesorter-filter {
|
||||
height: 1px;
|
||||
min-height: 0;
|
||||
border: 0;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
/* don't use visibility: hidden because it disables tabbing */
|
||||
opacity: 0;
|
||||
filter: alpha(opacity=0);
|
||||
}
|
||||
|
||||
/* filters */
|
||||
.tablesorter-filter {
|
||||
width: 95%;
|
||||
height: inherit;
|
||||
margin: 4px;
|
||||
padding: 4px;
|
||||
background-color: #fff;
|
||||
border: 1px solid #bbb;
|
||||
color: #333;
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
-webkit-transition: height 0.1s ease;
|
||||
-moz-transition: height 0.1s ease;
|
||||
-o-transition: height 0.1s ease;
|
||||
transition: height 0.1s ease;
|
||||
}</pre>
|
||||
</div>
|
||||
|
||||
<h1>HTML</h1>
|
||||
<div id="html">
|
||||
<pre class="prettyprint lang-html"></pre>
|
||||
</div>
|
||||
|
||||
<div class="next-up">
|
||||
<hr />
|
||||
Next up: <a href="example-widget-filter-any-match.html">jQuery Any Match filter widget ››</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
180
assets/vendor/tablesorter/docs/example-widget-grouping-filter-childrows.html
vendored
Normal file
180
assets/vendor/tablesorter/docs/example-widget-grouping-filter-childrows.html
vendored
Normal file
@@ -0,0 +1,180 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery plugin: Tablesorter 2.0 - Grouping + Filter widget with child rows</title>
|
||||
|
||||
<!-- jQuery -->
|
||||
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
|
||||
|
||||
<!-- Demo stuff -->
|
||||
<link class="ui-theme" rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/cupertino/jquery-ui.css">
|
||||
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
|
||||
<link rel="stylesheet" href="css/jq.css">
|
||||
<link href="css/prettify.css" rel="stylesheet">
|
||||
<script src="js/prettify.js"></script>
|
||||
<script src="js/docs.js"></script>
|
||||
|
||||
<style id="css">/* extra css needed because there are 5 child rows */
|
||||
/* no zebra striping */
|
||||
.tablesorter-blue tbody > tr:hover + tr.tablesorter-childRow + tr.tablesorter-childRow + tr.tablesorter-childRow > td,
|
||||
.tablesorter-blue tbody > tr:hover + tr.tablesorter-childRow + tr.tablesorter-childRow + tr.tablesorter-childRow + tr.tablesorter-childRow > td,
|
||||
.tablesorter-blue tbody > tr:hover + tr.tablesorter-childRow + tr.tablesorter-childRow + tr.tablesorter-childRow + tr.tablesorter-childRow + tr.tablesorter-childRow > td,
|
||||
/* with zebra striping */
|
||||
.tablesorter-blue tbody > tr.even:hover + tr.tablesorter-childRow + tr.tablesorter-childRow + tr.tablesorter-childRow + tr.tablesorter-childRow > td
|
||||
.tablesorter-blue tbody > tr.even:hover + tr.tablesorter-childRow + tr.tablesorter-childRow + tr.tablesorter-childRow + tr.tablesorter-childRow + tr.tablesorter-childRow > td
|
||||
.tablesorter-blue tbody > tr.even:hover + tr.tablesorter-childRow + tr.tablesorter-childRow + tr.tablesorter-childRow + tr.tablesorter-childRow > td,
|
||||
.tablesorter-blue tbody > tr.even:hover + tr.tablesorter-childRow + tr.tablesorter-childRow + tr.tablesorter-childRow + tr.tablesorter-childRow + tr.tablesorter-childRow > td {
|
||||
background: #d9d9d9;
|
||||
}
|
||||
.tablesorter-blue tbody > tr.odd:hover + tr.tablesorter-childRow + tr.tablesorter-childRow + tr.tablesorter-childRow > td,
|
||||
.tablesorter-blue tbody > tr.odd:hover + tr.tablesorter-childRow + tr.tablesorter-childRow + tr.tablesorter-childRow + tr.tablesorter-childRow > td,
|
||||
.tablesorter-blue tbody > tr.odd:hover + tr.tablesorter-childRow + tr.tablesorter-childRow + tr.tablesorter-childRow + tr.tablesorter-childRow + tr.tablesorter-childRow > td {
|
||||
background: #bfbfbf;
|
||||
}
|
||||
|
||||
/* Grouping widget css */
|
||||
tr.group-header td {
|
||||
background: #eee;
|
||||
}
|
||||
.group-name {
|
||||
text-transform: uppercase;
|
||||
font-weight: bold;
|
||||
}
|
||||
.group-count {
|
||||
color: #999;
|
||||
}
|
||||
.group-hidden {
|
||||
display: none !important;
|
||||
}
|
||||
.group-header, .group-header td {
|
||||
user-select: none;
|
||||
-moz-user-select: none;
|
||||
}
|
||||
/* collapsed arrow */
|
||||
tr.group-header td i {
|
||||
display: inline-block;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-top: 4px solid transparent;
|
||||
border-bottom: 4px solid #888;
|
||||
border-right: 4px solid #888;
|
||||
border-left: 4px solid transparent;
|
||||
margin-right: 7px;
|
||||
user-select: none;
|
||||
-moz-user-select: none;
|
||||
}
|
||||
tr.group-header.collapsed td i {
|
||||
border-top: 5px solid transparent;
|
||||
border-bottom: 5px solid transparent;
|
||||
border-left: 5px solid #888;
|
||||
border-right: 0;
|
||||
margin-right: 10px;
|
||||
}</style>
|
||||
|
||||
<!-- Tablesorter: required -->
|
||||
<link rel="stylesheet" href="../css/theme.blue.css">
|
||||
<script src="../js/jquery.tablesorter.js"></script>
|
||||
<script src="../js/jquery.tablesorter.widgets.js"></script>
|
||||
|
||||
<!-- grouping widget -->
|
||||
<script src="../js/parsers/parser-input-select.js"></script>
|
||||
<script src="../js/widgets/widget-grouping.js"></script>
|
||||
|
||||
<script id="js">$(function(){
|
||||
|
||||
$("table").tablesorter({
|
||||
theme : 'blue',
|
||||
sortList : [[1,0]],
|
||||
widgets: ['group', 'filter'],
|
||||
widgetOptions: {
|
||||
group_collapsible : true,
|
||||
group_collapsed : false,
|
||||
group_count : false,
|
||||
filter_childRows : false,
|
||||
}
|
||||
});
|
||||
|
||||
$('.tablesorter-childRow td').hide();
|
||||
|
||||
$('.tablesorter').delegate('.toggle', 'click' ,function(){
|
||||
$(this).closest('tr').nextUntil('tr:not(.tablesorter-childRow)').find('td').toggle();
|
||||
return false;
|
||||
});
|
||||
|
||||
});</script>
|
||||
</head>
|
||||
<body id="group">
|
||||
<div id="banner">
|
||||
<h1>table<em>sorter</em></h1>
|
||||
<h2>Grouping + Filter widget with child rows</h2>
|
||||
<h3>Flexible client-side table sorting</h3>
|
||||
<a href="index.html">Back to documentation</a>
|
||||
</div>
|
||||
<div id="main">
|
||||
|
||||
<h1>Demo</h1>
|
||||
|
||||
<div id="demo"><table class="tablesorter">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="Customer group-false"></th>
|
||||
<th class="group-word">Order</th>
|
||||
<th class="group-false">Status</th>
|
||||
<th class="group-false">Priority</th>
|
||||
<th class="group-false">Price</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
|
||||
<tr><td rowspan="3"><a href="#" class="toggle">Good Toys<a></td><td>USA</td><td>80%</td><td></td><td></td></tr>
|
||||
<tr class="tablesorter-childRow"><td>1561651</td><td>finish</td><td>0</td><td>$5</td></tr>
|
||||
<tr class="tablesorter-childRow"><td>558815</td><td>finish</td><td>0</td><td>$55</td></tr>
|
||||
|
||||
<tr><td rowspan="3"><a href="#" class="toggle">Cycle Clearance</a></td><td>FRANCE</td><td>25%</td><td></td><td></td></tr>
|
||||
<tr class="tablesorter-childRow"><td>21485213</td><td>in progress</td><td>2</td><td>$7</td></tr>
|
||||
<tr class="tablesorter-childRow"><td>12547854</td><td>finish</td><td>0</td><td>$18</td></tr>
|
||||
|
||||
<tr><td rowspan="5"><a href="#" class="toggle">Cycle Initial Bike Company<a></td><td>USA</td><td>36%</td><td></td><td></td></tr>
|
||||
<tr class="tablesorter-childRow"><td>12574521</td><td>in progress</td><td>1</td><td>$5</td></tr>
|
||||
<tr class="tablesorter-childRow"><td>7895452</td><td>in progress</td><td>2</td><td>$78</td></tr>
|
||||
<tr class="tablesorter-childRow"><td>1542021</td><td>finish</td><td>0</td><td>$28</td></tr>
|
||||
<tr class="tablesorter-childRow"><td>4489885</td><td>finish</td><td>0</td><td>$18</td></tr>
|
||||
|
||||
<tr><td rowspan="5"><a href="#" class="toggle">Sports Store<a></td><td>USA</td><td>90%</td><td></td><td></td></tr>
|
||||
<tr class="tablesorter-childRow"><td>18915</td><td>in progress</td><td>2</td><td>$5</td></tr>
|
||||
<tr class="tablesorter-childRow"><td>5402574</td><td>in progress</td><td>2</td><td>$78</td></tr>
|
||||
<tr class="tablesorter-childRow"><td>26478</td><td>finish</td><td>0</td><td>$28</td></tr>
|
||||
<tr class="tablesorter-childRow"><td>25682</td><td>finish</td><td>0</td><td>$18</td></tr>
|
||||
|
||||
<tr><td rowspan="5"><a href="#" class="toggle">Locks Company<a></td><td>UK</td><td>24%</td><td></td><td></td></tr>
|
||||
<tr class="tablesorter-childRow"><td>18915</td><td>in progress</td><td>2</td><td>$5</td></tr>
|
||||
<tr class="tablesorter-childRow"><td>5402574</td><td>in progress</td><td>1</td><td>$78</td></tr>
|
||||
<tr class="tablesorter-childRow"><td>26478</td><td>finish</td><td>0</td><td>$28</td></tr>
|
||||
<tr class="tablesorter-childRow"><td>25682</td><td>finish</td><td>0</td><td>$18</td></tr>
|
||||
|
||||
<tr><td rowspan="3"><a href="#" class="toggle">Famous Bike Shop<a></td><td>UK</td><td>12%</td><td></td><td></td></tr>
|
||||
<tr class="tablesorter-childRow"><td>185406</td><td>in progress</td><td>2</td><td>$5</td></tr>
|
||||
<tr class="tablesorter-childRow"><td>541265</td><td>in progress</td><td>2</td><td>$78</td></tr>
|
||||
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<h1>Script</h1>
|
||||
<div id="javascript">
|
||||
<pre class="prettyprint lang-js"></pre>
|
||||
</div>
|
||||
|
||||
<h1>CSS</h1>
|
||||
<div id="css">
|
||||
<pre class="prettyprint lang-css"></pre>
|
||||
</div>
|
||||
|
||||
<h1>HTML</h1>
|
||||
<div id="html">
|
||||
<pre class="prettyprint lang-html"></pre>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
482
assets/vendor/tablesorter/docs/example-widget-grouping.html
vendored
Normal file
482
assets/vendor/tablesorter/docs/example-widget-grouping.html
vendored
Normal file
@@ -0,0 +1,482 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery plugin: Tablesorter 2.0 - Grouping Rows Widget</title>
|
||||
|
||||
<!-- jQuery -->
|
||||
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
|
||||
|
||||
<!-- Demo stuff -->
|
||||
<link class="ui-theme" rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/cupertino/jquery-ui.css">
|
||||
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
|
||||
<link rel="stylesheet" href="css/jq.css">
|
||||
<link href="css/prettify.css" rel="stylesheet">
|
||||
<script src="js/prettify.js"></script>
|
||||
<script src="js/docs.js"></script>
|
||||
|
||||
<style id="css">tr.group-header td {
|
||||
background: #eee;
|
||||
}
|
||||
.group-name {
|
||||
text-transform: uppercase;
|
||||
font-weight: bold;
|
||||
}
|
||||
.group-count {
|
||||
color: #999;
|
||||
}
|
||||
.group-hidden {
|
||||
display: none;
|
||||
}
|
||||
.group-header, .group-header td {
|
||||
user-select: none;
|
||||
-moz-user-select: none;
|
||||
}
|
||||
/* collapsed arrow */
|
||||
tr.group-header td i {
|
||||
display: inline-block;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-top: 4px solid transparent;
|
||||
border-bottom: 4px solid #888;
|
||||
border-right: 4px solid #888;
|
||||
border-left: 4px solid transparent;
|
||||
margin-right: 7px;
|
||||
user-select: none;
|
||||
-moz-user-select: none;
|
||||
}
|
||||
tr.group-header.collapsed td i {
|
||||
border-top: 5px solid transparent;
|
||||
border-bottom: 5px solid transparent;
|
||||
border-left: 5px solid #888;
|
||||
border-right: 0;
|
||||
margin-right: 10px;
|
||||
}</style>
|
||||
|
||||
<!-- Tablesorter: required -->
|
||||
<link href="../css/theme.blue.css" rel="stylesheet">
|
||||
<script src="../js/jquery.tablesorter.js"></script>
|
||||
<script src="../js/jquery.tablesorter.widgets.js"></script>
|
||||
|
||||
<!-- grouping widget -->
|
||||
<script src="../js/parsers/parser-input-select.js"></script>
|
||||
<script src="../js/widgets/widget-grouping.js"></script>
|
||||
|
||||
<script id="js">$(function(){
|
||||
|
||||
$(".tablesorter").tablesorter({
|
||||
theme : "blue",
|
||||
headers: {
|
||||
0: { sorter: "checkbox" },
|
||||
3: { sorter: "select" },
|
||||
6: { sorter: "inputs" }
|
||||
},
|
||||
widgets: [ "group", "columns", "zebra" ],
|
||||
widgetOptions: {
|
||||
group_collapsible : true, // make the group header clickable and collapse the rows below it.
|
||||
group_collapsed : false, // start with all groups collapsed (if true)
|
||||
group_saveGroups : true, // remember collapsed groups
|
||||
group_saveReset : '.group_reset', // element to clear saved collapsed groups
|
||||
group_count : " ({num})", // if not false, the "{num}" string is replaced with the number of rows in the group
|
||||
|
||||
// change these default date names based on your language preferences
|
||||
group_months : [ "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec" ],
|
||||
group_week : [ "Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday" ],
|
||||
group_time : [ "AM", "PM" ],
|
||||
|
||||
// this function is used when "group-date" is set to create the date string
|
||||
// you can just return date, date.toLocaleString(), date.toLocaleDateString() or d.toLocaleTimeString()
|
||||
// reference: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date#Conversion_getter
|
||||
group_dateString : function(date) {
|
||||
return date.toLocaleString();
|
||||
},
|
||||
|
||||
group_formatter : function(txt, col, table, c, wo) {
|
||||
// txt = current text; col = current column
|
||||
// table = current table (DOM); c = table.config; wo = table.config.widgetOptions
|
||||
if (col === 7 && txt.indexOf("GMT") > 0) {
|
||||
// remove "GMT-0000 (Xxxx Standard Time)" from the end of the full date
|
||||
txt = txt.substring(0, txt.indexOf("GMT"));
|
||||
}
|
||||
// If there are empty cells, name the group "Empty"
|
||||
return txt === "" ? "Empty" : txt;
|
||||
},
|
||||
|
||||
group_callback : function($cell, $rows, column, table){
|
||||
// callback allowing modification of the group header labels
|
||||
// $cell = current table cell (containing group header cells ".group-name" & ".group-count"
|
||||
// $rows = all of the table rows for the current group; table = current table (DOM)
|
||||
// column = current column being sorted/grouped
|
||||
if (column === 2) {
|
||||
var subtotal = 0;
|
||||
$rows.each(function(){
|
||||
subtotal += parseFloat( $(this).find("td").eq(column).text() );
|
||||
});
|
||||
$cell.find(".group-count").append("; subtotal: " + subtotal );
|
||||
}
|
||||
},
|
||||
// event triggered on the table when the grouping widget has finished work
|
||||
group_complete : "groupingComplete"
|
||||
}
|
||||
});
|
||||
|
||||
});</script>
|
||||
</head>
|
||||
<body id="group">
|
||||
<div id="banner">
|
||||
<h1>table<em>sorter</em></h1>
|
||||
<h2>Grouping Rows Widget</h2>
|
||||
<h3>Flexible client-side table sorting</h3>
|
||||
<a href="index.html">Back to documentation</a>
|
||||
</div>
|
||||
<div id="main">
|
||||
|
||||
<p></p>
|
||||
<br>
|
||||
|
||||
<div class="accordion">
|
||||
|
||||
<h3><a href="#">Notes</a></h3>
|
||||
<div>
|
||||
<ul>
|
||||
<li>This widget will <strong>only work</strong> in tablesorter version 2.8+ and jQuery version 1.7+.</li>
|
||||
<li>Please do not use this widget in very large tables (it might be really slow) <del>or when your table includes multiple tbodies</del>.</li>
|
||||
<li>In <span class="version">v2.15.6</span>, added <code>group_saveGroups</code> & <code>group_saveReset</code> options. More details are included in the "Options" section.</li>
|
||||
<li>In <span class="version">v2.14</span>, added <code>group_dateString</code> option. More details are included in the "Options" section.</li>
|
||||
<li>In <span class="version">v2.13</span>, added <code>group_separator</code> option & <code>group-separator-#</code> header class name. To see this in action, check out the <a href="example-parsers-file-type.html">file type parser demo</a>.</li>
|
||||
<li>In <span class="version">v2.12</span>, added <code>group_callback</code> & <code>group_complete</code> options. See options section below for details.</li>
|
||||
<li>In <span class="version">v2.11</span>:
|
||||
<ul>
|
||||
<li>The grouping widget now works across multiple tbodies.</li>
|
||||
<li>Added <code>group-false</code> header option which disables the grouping widget for a specific column.</li>
|
||||
<li>Added the <code>group_collapsed</code> option - get more details in the options block below.</li>
|
||||
<li>You can now toggle <strong>all</strong> group rows by holding down the <kbd>Shift</kbd> key while clicking on a group header.</li>
|
||||
<li>This widget now works properly with the pager addon (pager addon updated).</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>Clicking on any of the sortable header cells will cause the column below it to sort and add a group header.</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<h3><a href="#">Options</a></h3>
|
||||
<div>
|
||||
<h3>Group widget default options (added inside of tablesorter <code>widgetOptions</code>)</h3>
|
||||
<table class="tablesorter-blue">
|
||||
<thead>
|
||||
<tr><th>Option</th><th>Default</th><th>Description</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>group_collapsible</td>
|
||||
<td><code>true</code></td>
|
||||
<td>
|
||||
when <code>true</code>, the group headers become clickable and collapse the rows below it.
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>group_collapsed</td>
|
||||
<td><code>false</code></td>
|
||||
<td>
|
||||
when <code>true</code> and <code>group_collapsible</code> is also <code>true</code>, all groups will start collapsed (<span class="version">v2.11</span>)
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>group_saveGroups</td>
|
||||
<td><code>true</code></td>
|
||||
<td>Remember collapsed groups (<span class="version">v2.15.6</span>)
|
||||
<ul>
|
||||
<li>This option saves the currently collapsed groups, using the group name.</li>
|
||||
<li>Collapsed groups are saved by column and group class name, so that the groups can be dynamically changed and still remember the correct collapsed groups. Try changing the group names (using the sliders) in the demo below & then collapsing some groups several times; go back to previous groups and it will remember which groups were collapsed.</li>
|
||||
<li>Because the group name is saved, groups with a number range (e.g. "group-number-10"; see the "Numeric" column below) will show a different range depending on sort direction; in this situation, each sort direction is saved independently.</li>
|
||||
<li>This option requires the <code>$.tablesorter.storage</code> utility contained within the <code>jquery.tablesorter.widgets.js</code> file.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>group_saveReset</td>
|
||||
<td><code>null</code></td>
|
||||
<td>Element used to clear saved collapsed groups (<span class="version">v2.15.6</span>)
|
||||
<ul>
|
||||
<li>This option should contain a jQuery selector string or jQuery object pointing to an element to be used to reset (clear) the list of collapsed groups.</li>
|
||||
<li>You can also clear the saved collapsed groups by calling this function: <code>$.tablesorter.grouping.clearSavedGroups(table);</code> (table would be either the table DOM or table jQuery object).</li>
|
||||
<li>This option requires the <code>$.tablesorter.storage</code> utility contained within the <code>jquery.tablesorter.widgets.js</code> file.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>group_count</td>
|
||||
<td><code>" ({num})"</code></td>
|
||||
<td>
|
||||
Allows you to add custom formatting, or remove, the group count within the group header. Set it to <code>false</code> or an empty string to remove the count.
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>group_separator</td>
|
||||
<td><code>"-"</code></td>
|
||||
<td>
|
||||
When the <code>group-separator</code> class name is added, it uses the setting from this option to split the table cell content for grouping <span class="version">v2.13</span>.<br>
|
||||
<br>
|
||||
If your content has mixed separators (e.g. <code>images/cats/burger-time.jpg</code>), you can set this option to use a regular expression:
|
||||
<pre class="prettyprint lang-js">// the above example becomes: ["images", "cats", "burger-time", "jpg"]
|
||||
group_separator : /[/.]/</pre>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>group_formatter</td>
|
||||
<td><code>null</code></td>
|
||||
<td>
|
||||
Use this function to modify the group header text before it gets applied. It provides various parameters (<code>txt, col, table, c, wo</code>) to make it work for any of the table columns and data. See the comments in the example below for more details.
|
||||
<ul>
|
||||
<li><code>txt</code> - current text of the group header.</li>
|
||||
<li><code>col</code> - current table column being grouped (zero-based index).</li>
|
||||
<li><code>table</code> - current table (DOM).</li>
|
||||
<li><code>c</code> - table data from <code>table.config</code>.</li>
|
||||
<li><code>wo</code> - table widget options from <code>table.config.widgetOptions</code>.</li>
|
||||
</ul>
|
||||
<pre class="prettyprint lang-js">group_formatter : function(txt, col, table, c, wo) {
|
||||
// If there are empty cells, name the group "Empty"
|
||||
return txt === "" ? "Empty" : txt;
|
||||
}</pre>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>group_callback</td>
|
||||
<td><code>null</code></td>
|
||||
<td>
|
||||
Use this function to further modify the group header to include more information (i.e. group totals). Parameters include (<code>$cell, $rows, column, table</code>). See the example below for more details <span class="version">v2.12</span>.
|
||||
<ul>
|
||||
<li><code>$cell</code> - current group header table cell (jQuery object).</li>
|
||||
<li><code>$rows</code> - current group rows (jQuery object).</li>
|
||||
<li><code>column</code> - current table column being grouped (zero-based index).</li>
|
||||
<li><code>table</code> - current table (DOM).</li>
|
||||
</ul>
|
||||
<pre class="prettyprint lang-js">group_callback : function($cell, $rows, column, table){
|
||||
$cell.find('.group-name').append(' group'); // adds "group" to the end of the group name
|
||||
}</pre>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>group_complete</td>
|
||||
<td><code>"groupingComplete"</code></td>
|
||||
<td>
|
||||
Event triggered on the table when the grouping widget has finished work <span class="version">v2.12</span>.
|
||||
<pre class="prettyprint lang-js">$('table').on('groupingComplete', function(){
|
||||
// always hide empty groups ("Empty" can be added by the group_formatter function)
|
||||
$(this).find('.group-header:contains("Empty")').trigger('toggleGroup');
|
||||
});</pre>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>
|
||||
group_months<br>
|
||||
group_week<br>
|
||||
group_time
|
||||
</td>
|
||||
<td>(see description)</td>
|
||||
<td>
|
||||
Name arrays included so that the language of the date groups can be modified easily. Defaults (English):
|
||||
<ul>
|
||||
<li>group_months: (<code>[ "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec" ]</code>) - Month names.</li>
|
||||
<li>group_week: (<code>[ "Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday" ]</code>) - Named days of the week.</li>
|
||||
<li>group_time: (<code>[ "AM", "PM" ]</code>) - Time of day.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>group_dateString</td>
|
||||
<td>(see description)</td>
|
||||
<td>
|
||||
When the <code>"group-date"</code> class name is set on a column, this function is used to format the date string. This is the default function:
|
||||
<pre class="prettyprint lang-js">// you can just return date, date.toLocaleString(), date.toLocaleDateString() or d.toLocaleTimeString()
|
||||
group_dateString : function(date) {
|
||||
return date.toLocaleString();
|
||||
}</pre>
|
||||
Other functions that can be used are <code>date</code> (alone), <code>date.toLocaleString()</code>, <code>date.toLocaleDateString()</code> or <code>d.toLocaleTimeString()</code>. See <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date#Conversion_getter">this reference</a> for more details.
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<h3><a href="#">Header Class Names</a></h3>
|
||||
<div>
|
||||
<h3>Group header class names (when changing the grouping, notice that the <em>sort doesn't change, just the position and names of the group headers</em>):</h3>
|
||||
<ul>
|
||||
<li><code>"group-word"</code> (same as <code>"group-word-1"</code>) - group the rows using the first word it finds in the column's parsed data.</li>
|
||||
<li><code>"group-word-n"</code> (<code>"n"</code> can be any number) - group the rows using the nth word in the column<span class="remark">*</span>.</li>
|
||||
<li><code>"group-separator"</code> (same as <code>"group-separator-1"</code>) - group the rows using the text between the start and first separator that it finds in the column's parsed data (<span class="version">v2.13</span>).</li>
|
||||
<li><code>"group-separator-n"</code> (<code>"n"</code> can be any number) - group the rows using the nth separated group in the column (<span class="version">v2.13</span>)<span class="remark">*</span>.</li>
|
||||
<li><code>"group-letter"</code> (same as <code>"group-letter-1"</code>) - group the rows using the first letter it finds in the column's parsed data.</li>
|
||||
<li><code>"group-letter-n"</code> (<code>"n"</code> can be any number) - group the rows using letters 1 through n (if n = 2, then it's the first 2 letters) in the column's parsed data.</li>
|
||||
<li><code>"group-number"</code> (same as <code>"group-number-1"</code>) - group the rows by the number it finds in the column (step of one).</li>
|
||||
<li><code>"group-number-n"</code> (<code>"n"</code> can be any number) - group the rows into blocks of every n values. So, if n = 10, the groups will be 0-9, 10-19, 20-29, etc</li>
|
||||
<li><code>"group-date"</code> - group the rows by full date (this shows the current UTC time corrected for your time zone)</li>
|
||||
<li><code>"group-date-year"</code> - group the rows by year</li>
|
||||
<li><code>"group-date-month"</code> - group the rows by month<span class="remark">*</span></li>
|
||||
<li><code>"group-date-day"</code> - group the rows by month/day<span class="remark">*</span></li>
|
||||
<li><code>"group-date-week"</code> - group the rows by day of the week<span class="remark">*</span></li>
|
||||
<li><code>"group-date-time"</code> - group the rows by time<span class="remark">*</span></li>
|
||||
<li><code>"group-false"</code> - disable grouping of rows for a column (<span class="version">v2.11</span>).</li>
|
||||
</ul>
|
||||
<span class="remark">*</span> When sorting some columns, different group headers with the same group name may exist (try "group-date-week" and "group-date-time"). To make these columns sort specifically by the group you want, you'll need to modify the parser.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p></p>
|
||||
|
||||
<h1>Demo</h1>
|
||||
|
||||
<span class="demo-label">Numeric column:</span> <div id="slider0"></div> <span class="numberclass"></span> (includes subtotals)<br>
|
||||
<span class="demo-label">Animals column:</span> <div id="slider1"></div> <span class="animalclass"></span><br>
|
||||
<span class="demo-label">Date column:</span> <div id="slider2"></div> <span class="dateclass"></span>
|
||||
<br><br>
|
||||
<button class="group_reset">Reset Saved Collapsed Groups</button>
|
||||
<div id="demo"><table class="tablesorter">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="group-word"></th> <!-- checkbox status -->
|
||||
<th class="group-number">Quality (number)</th> <!-- notice this uses the same class name as the Numeric column, it's just left at 1 -->
|
||||
<th class="group-number-10">Numeric (every <span>10</span>)</th>
|
||||
<th class="group-letter-1">Priority (letter)</th>
|
||||
<th class="group-letter-1">Animals (first <span>letter</span>)</th>
|
||||
<th class="group-word-1">Natural Sort (first word)</th>
|
||||
<th class="group-word-2">Inputs (second word)</th>
|
||||
<!-- try "group-date", "group-date-year", "group-date-month", "group-date-day", "group-date-week" or "group-date-time" -->
|
||||
<th class="group-date">Date (<span>Full</span>)</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<th></th>
|
||||
<th>Quality</th>
|
||||
<th>Numeric</th>
|
||||
<th>Priority</th>
|
||||
<th>Animals</th>
|
||||
<th>Natural Sort</th>
|
||||
<th>Inputs</th>
|
||||
<th>Date</th>
|
||||
</tr>
|
||||
</tfoot>
|
||||
<tbody>
|
||||
<tr><td><input type="checkbox" checked></td><td>1</td><td>10</td><td><select><option selected>A</option><option>B</option><option>C</option></select></td><td>Koala</td><td>abc 123</td><td><input type="text" value="item: truck" /></td><td>1/13/2013 12:01 AM</td></tr>
|
||||
<tr><td><input type="checkbox"></td><td>3</td><td>29</td><td><select><option>A</option><option>B</option><option selected>C</option></select></td><td>Kangaroo</td><td>abc 1</td><td><input type="text" value="item: car" /></td><td>1/15/2013</td></tr>
|
||||
<tr><td><input type="checkbox"></td><td>2</td><td>10</td><td><select><option>A</option><option>B</option><option selected>C</option></select></td><td>Ant</td><td>abc 9</td><td><input type="text" value="item: motorcycle" /></td><td>1/13/2013</td></tr>
|
||||
<tr><td><input type="checkbox"></td><td>3</td><td>81</td><td><select><option>A</option><option selected>B</option><option>C</option></select></td><td>Bee</td><td>zyx 24</td><td><input type="text" value="item: golf cart" /></td><td>1/11/2013</td></tr>
|
||||
<tr><td><input type="checkbox" checked></td><td>3</td><td>21</td><td><select><option>A</option><option selected>B</option><option>C</option></select></td><td>Aardwolf</td><td>zyx 55</td><td><input type="text" value="item: scooter" /></td><td>1/13/2013 03:30 AM</td></tr>
|
||||
<tr><td><input type="checkbox"></td><td>1</td><td>3</td><td><select><option selected>A</option><option>B</option><option>C</option></select></td><td>Bear</td><td>abc 11</td><td><input type="text" /></td><td>1/15/2013</td></tr>
|
||||
<tr><td><input type="checkbox"></td><td>4</td><td>12</td><td><select><option>A</option><option selected>B</option><option>C</option></select></td><td>Armadillo</td><td>zyx 2</td><td><input type="text" /></td><td>1/15/2013 12:30 PM</td></tr>
|
||||
<tr><td><input type="checkbox" checked></td><td>2</td><td>56</td><td><select><option selected>A</option><option>B</option><option>C</option></select></td><td>Aardvark</td><td>abc 2</td><td><input type="text" value="item: skateboard" /></td><td>1/22/2013</td></tr>
|
||||
<tr><td><input type="checkbox"></td><td>1</td><td>55</td><td><select><option selected>A</option><option>B</option><option>C</option></select></td><td>Lion</td><td>abc 9</td><td><input type="text" /></td><td>2/15/2013</td></tr>
|
||||
<tr><td><input type="checkbox" checked></td><td>4</td><td>87</td><td><select><option>A</option><option selected>B</option><option>C</option></select></td><td>Anteater</td><td>ABC 10</td><td><input type="text" value="item: skates" /></td><td>1/3/2013</td></tr>
|
||||
<tr><td><input type="checkbox" checked></td><td>2</td><td>98</td><td><select><option>A</option><option>B</option><option selected>C</option></select></td><td>Lemur</td><td>zyx 1</td><td><input type="text" /></td><td>1/11/2013</td></tr>
|
||||
<tr><td><input type="checkbox"></td><td>1</td><td>20</td><td><select><option>A</option><option>B</option><option selected>C</option></select></td><td>Llama</td><td>zyx 12</td><td><input type="text" /></td><td>12/13/2012</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<h1>Page Header</h1>
|
||||
<div>
|
||||
<pre class="prettyprint lang-html"><!-- Tablesorter: required -->
|
||||
<link href="../css/theme.blue.css" rel="stylesheet">
|
||||
<script src="../js/jquery.tablesorter.js"></script>
|
||||
<script src="../js/jquery.tablesorter.widgets.js"></script>
|
||||
|
||||
<!-- Grouping widget -->
|
||||
<script src="../js/parsers/parser-input-select.js"></script>
|
||||
<script src="../js/widgets/widget-grouping.js"></script></pre>
|
||||
</div>
|
||||
|
||||
<h1>Script</h1>
|
||||
<div id="javascript">
|
||||
<pre class="prettyprint lang-js"></pre>
|
||||
</div>
|
||||
|
||||
<h1>CSS</h1>
|
||||
<div id="css">
|
||||
<pre class="prettyprint lang-css"></pre>
|
||||
</div>
|
||||
|
||||
<h1>HTML</h1>
|
||||
<div id="html">
|
||||
<pre class="prettyprint lang-html"></pre>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
/* DEMO ONLY CODE */
|
||||
$(function(){
|
||||
var startBlock = 10,
|
||||
startVal = 1,
|
||||
curGroup = 0,
|
||||
numcol = 2,
|
||||
letcol = 4,
|
||||
datecol = 7,
|
||||
dateGroups = [ '', 'year', 'month', 'day', 'week', 'time' ];
|
||||
// Numeric column slider
|
||||
$( "#slider0" ).slider({
|
||||
value: startBlock,
|
||||
min: 10,
|
||||
max: 50,
|
||||
step: 10,
|
||||
create: function(){
|
||||
$('.numberclass').html(' "group-number-' + startBlock + '"');
|
||||
$('.tablesorter-header-inner:eq(' + numcol + ')').find('span').html(startBlock);
|
||||
},
|
||||
slide: function( event, ui ) {
|
||||
$('.tablesorter')[0].config.$headers.eq(numcol)
|
||||
.attr('class', function(i,v){
|
||||
return v.replace(/group-number-\d+/, 'group-number-' + ui.value);
|
||||
})
|
||||
.trigger('sorton', [ [[numcol,0]] ]);
|
||||
$('.numberclass').html(' "group-number-' + ui.value + '"');
|
||||
$('.tablesorter-header-inner:eq(' + numcol + ')').find('span').html(ui.value);
|
||||
}
|
||||
});
|
||||
// animal (letter) column slider
|
||||
$( "#slider1" ).slider({
|
||||
value: startVal,
|
||||
min: 1,
|
||||
max: 5,
|
||||
step: 1,
|
||||
create: function(){
|
||||
$('.animalclass').html(' "group-letter-' + startVal + '"');
|
||||
$('.tablesorter-header-inner:eq(' + letcol + ')').find('span').html(startVal === 1 ? 'letter' : startVal + ' letters');
|
||||
},
|
||||
slide: function( event, ui ) {
|
||||
$('.tablesorter')[0].config.$headers.eq(letcol)
|
||||
.attr('class', function(i,v){
|
||||
return v.replace(/group-letter-\d+/, 'group-letter-' + ui.value);
|
||||
})
|
||||
.trigger('sorton', [ [[letcol,0]] ]);
|
||||
$('.animalclass').html(' "group-letter-' + ui.value + '"');
|
||||
$('.tablesorter-header-inner:eq(' + letcol + ')').find('span').html(ui.value === 1 ? 'letter' : ui.value + ' letters');
|
||||
}
|
||||
});
|
||||
// date column slider
|
||||
$( "#slider2" ).slider({
|
||||
value: curGroup,
|
||||
min: 0,
|
||||
max: 5,
|
||||
step: 1,
|
||||
create: function(){
|
||||
$('.dateclass').html(' "group-date' + (curGroup > 0 ? '-' + dateGroups[curGroup] : '') + '"');
|
||||
$('.tablesorter-header-inner:eq(' + datecol + ')').find('span').html(curGroup === 0 ? 'full' : dateGroups[curGroup]);
|
||||
},
|
||||
slide: function( event, ui ) {
|
||||
$('.tablesorter')[0].config.$headers.eq(datecol)
|
||||
.attr('class', function(i,v){
|
||||
return v.replace(/group-date(-\w+)?/, 'group-date' + (ui.value > 0 ? '-' + dateGroups[ui.value] : ''));
|
||||
})
|
||||
.trigger('sorton', [ [[datecol,0]] ]);
|
||||
$('.dateclass').html(' "group-date' + (ui.value > 0 ? '-' + dateGroups[ui.value] : '') + '"');
|
||||
$('.tablesorter-header-inner:eq(' + datecol + ')').find('span').html(ui.value === 0 ? 'full' : dateGroups[ui.value]);
|
||||
}
|
||||
});
|
||||
|
||||
});
|
||||
</script>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
320
assets/vendor/tablesorter/docs/example-widget-header-titles.html
vendored
Normal file
320
assets/vendor/tablesorter/docs/example-widget-header-titles.html
vendored
Normal file
@@ -0,0 +1,320 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery plugin: Tablesorter 2.0 - headerTitles widget</title>
|
||||
|
||||
<!-- jQuery -->
|
||||
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
|
||||
|
||||
<!-- Demo stuff -->
|
||||
<link rel="stylesheet" href="css/jq.css">
|
||||
<link href="css/prettify.css" rel="stylesheet">
|
||||
<link href="css/tipsy.css" rel="stylesheet">
|
||||
<link class="ui-theme" rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/cupertino/jquery-ui.css">
|
||||
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
|
||||
<script src="js/prettify.js"></script>
|
||||
<script src="js/docs.js"></script>
|
||||
<script src="js/jquery.tipsy.min.js"></script>
|
||||
|
||||
<!-- Tablesorter: required -->
|
||||
<link rel="stylesheet" href="../css/theme.blue.css">
|
||||
<script src="../js/jquery.tablesorter.js"></script>
|
||||
|
||||
<!-- Tablesorter: optional -->
|
||||
<script src="../js/widgets/widget-headerTitles.js"></script>
|
||||
|
||||
<script id="js">$(function() {
|
||||
|
||||
var updateTooltips = function($cell, txt) {
|
||||
// dynamically update tipsy
|
||||
if ($cell.is(':hover')) {
|
||||
$cell
|
||||
.attr({ title : txt, 'original-title': txt })
|
||||
// hide, then show the tooltip to force updating & realignment
|
||||
.tipsy('hide')
|
||||
.tipsy('show');
|
||||
}
|
||||
return txt;
|
||||
};
|
||||
|
||||
$("#table1").tablesorter({
|
||||
theme : 'blue',
|
||||
sortList: [[0,0]],
|
||||
headers : { 4: { sorter: false } },
|
||||
widgets: ['zebra', 'headerTitles'],
|
||||
widgetOptions: {
|
||||
headerTitle_useAria : true,
|
||||
// add tooltip class
|
||||
headerTitle_tooltip : 'tooltip',
|
||||
// manipulate the title as desired
|
||||
headerTitle_callback : updateTooltips
|
||||
}
|
||||
});
|
||||
|
||||
// This table is showing all of the headerTitle widget options
|
||||
$("#table2").tablesorter({
|
||||
theme : 'blue',
|
||||
sortList: [[0,0]],
|
||||
// third click resets the sort
|
||||
sortReset: true,
|
||||
headers : { 4: { sorter: false } },
|
||||
widgets: ['zebra', 'headerTitles'],
|
||||
widgetOptions: {
|
||||
// headerTitle_prefix : 'Sort: ', // option has been deprecated
|
||||
// use aria-label text
|
||||
// e.g. "First Name: Ascending sort applied, activate to apply a descending sort"
|
||||
headerTitle_useAria : false,
|
||||
// add tooltip class
|
||||
headerTitle_tooltip : 'tooltip',
|
||||
// custom titles [ "ascending", "descending", "unsorted" ]
|
||||
headerTitle_cur_text : [ 'Ascending text sort applied', 'Descending text sort applied', 'Currently unsorted' ],
|
||||
headerTitle_cur_numeric : [ 'Ascending numeric sort applied', 'Descending numeric sort applied', 'Currently unsorted' ],
|
||||
headerTitle_nxt_text : [ ' apply ascending text sort', ' apply descending text sort', 'remove sort' ],
|
||||
headerTitle_nxt_numeric : [ ' apply ascending numeric sort', ' apply descending numeric sort', 'remove sort' ],
|
||||
|
||||
// title display; {prefix} adds above prefix
|
||||
// {type} adds the current sort order from above (text or numeric)
|
||||
// {next} adds the next sort direction using the sort order above
|
||||
headerTitle_output_sorted : '{current}; activate to {next}',
|
||||
headerTitle_output_unsorted : '{current}; activate to {next}',
|
||||
headerTitle_output_nosort : 'No sort available',
|
||||
// use this type to override the parser detection result
|
||||
// e.g. use for numerically parsed columns (e.g. dates), but you
|
||||
// want the user to see a text sort, e.g. [ 'text', '', 'numeric' ]
|
||||
// use '' (empty string) to use the default
|
||||
headerTitle_type : ['', '', '', '', '', 'text'],
|
||||
// manipulate the title as desired
|
||||
headerTitle_callback : updateTooltips
|
||||
}
|
||||
});
|
||||
|
||||
// using defaults, no tooltips
|
||||
$("#table3").tablesorter({
|
||||
theme : 'blue',
|
||||
sortList: [[0,0]],
|
||||
headers : { 4: { sorter: false } },
|
||||
widgets: ['zebra', 'headerTitles']
|
||||
});
|
||||
|
||||
// add tooltip
|
||||
$('.tooltip').tipsy({ gravity: 's' });
|
||||
|
||||
// switch aria mode
|
||||
var $state = $('#usearia'),
|
||||
$table1 = $('#table1'),
|
||||
// first table only
|
||||
wo = $table1[0].config.widgetOptions;
|
||||
$('button').on('click', function(){
|
||||
wo.headerTitle_useAria = !wo.headerTitle_useAria;
|
||||
// show current state in demo
|
||||
$state.text( wo.headerTitle_useAria );
|
||||
// force headerTitles widget to update
|
||||
$table1.trigger('refreshHeaderTitle');
|
||||
});
|
||||
|
||||
});</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="banner">
|
||||
<h1>table<em>sorter</em></h1>
|
||||
<h2>headerTitles Widget</h2>
|
||||
<h3>Flexible client-side table sorting</h3>
|
||||
<a href="index.html">Back to documentation</a>
|
||||
</div>
|
||||
|
||||
<div id="main">
|
||||
|
||||
<p></p>
|
||||
<br>
|
||||
|
||||
<div class="accordion">
|
||||
|
||||
<h3><a href="#">Notes</a></h3>
|
||||
<div>
|
||||
<ul>
|
||||
<li>In <span class="version">2.15.7</span>,
|
||||
<ul>
|
||||
<li>Sorry for all of these breaking changes, I should have left this widget in beta.</li>
|
||||
<li>The <code>headerTitle_prefix</code>, <code>headerTitle_text</code>, <code>headerTitle_numeric</code> options has been replaced, in lieu of the new ouput options; sorry for no deprecation notice.</li>
|
||||
<li>Added <code>headerTitle_useAria</code>, <code>headerTitle_tooltip</code>, <code>headerTitle_output_sorted</code>, <code>headerTitle_output_unsorted</code>, <code>headerTitle_output_nosort</code>, <code>headerTitle_cur_text</code>, <code>headerTitle_cur_numeric</code>, <code>headerTitle_nxt_text</code>, <code>headerTitle_nxt_numeric</code>, <code>headerTitle_type</code> & <code>headerTitle_callback</code> options. See the options section below for more details.</li>
|
||||
<li>Added <code>"refreshHeaderTitle"</code> method to force the widget to update.</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>This widget adds a title to the table headers when they are sorted.</li>
|
||||
<li>Click on any header. You may have to move the mouse off, then back on the header to see the title appear.</li>
|
||||
<li>This widget will not work with the original tablesorter plugin (v2.0.5).</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<h3><a href="#">Options</a></h3>
|
||||
<div>
|
||||
<table class="tablesorter-blue">
|
||||
<colgroup>
|
||||
<col style="width:50px;">
|
||||
<col style="width:120px;">
|
||||
<col>
|
||||
</colgroup>
|
||||
<thead>
|
||||
<tr><th>Option</th><th>Default</th><th>Description</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>headerTitle_useAria</td>
|
||||
<td><code>false</code></td>
|
||||
<td>
|
||||
When <code>true</code>, the headers titles are extracted from the <code>aria-label</code>. The text in that label is built from the <a href="http://mottie.github.io/tablesorter/docs/#variable-language"><code>$.tablesorter.language</code> option</a>.
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>headerTitle_tooltip</td>
|
||||
<td><code>""</code></td>
|
||||
<td>
|
||||
Add a (tooltip) class name to the header, yeah you could have used the <a href="http://mottie.github.io/tablesorter/docs/#cssheader"><code>cssHeader</code> option</a> to do the same thing, but this option allows adding classes using an array.
|
||||
<pre class="prettyprint lang-js">headerTitle_tooltip : [ 'tooltip-text', 'tooltip-text', 'tooltip-numeric', 'tooltip-numeric', '', 'tooltip-text']</pre>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
headerTitle_cur_text<br>
|
||||
headerTitle_cur_numeric
|
||||
</td>
|
||||
<td>(see description)</td>
|
||||
<td>
|
||||
When any of the header title output options use the <code>{current}</code> tag, it is replaced by values from either the current ("cur") text or numeric option array as determined by the column unsorted state or sort direction.<br>
|
||||
<br>
|
||||
The array must contain text for ascending, descending and unsorted state (in that order). Defaults:
|
||||
<pre class="prettyprint lang-js">headerTitle_cur_text : [ ' sort: A - Z', ' sort: Z - A', 'ly unsorted' ],
|
||||
headerTitle_cur_numeric : [ ' sort: 0 - 9', ' sort: 9 - 0', 'ly unsorted' ]</pre>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
headerTitle_nxt_text<br>
|
||||
headerTitle_nxt_numeric
|
||||
</td>
|
||||
<td>(see description)</td>
|
||||
<td>
|
||||
When any of the header title output options use the <code>{next}</code> tag, it is replaced by values from either the next ("nxt") text or numeric option array as determined by the column unsorted state or sort direction.<br>
|
||||
<br>
|
||||
The array must contain text for when the next state is ascending, descending and unsorted (in that order). Defaults:
|
||||
<pre class="prettyprint lang-js">headerTitle_nxt_text : [ ' sort: A - Z', ' sort: Z - A', 'remove sort' ],
|
||||
headerTitle_nxt_numeric : [ ' sort: 0 - 9', ' sort: 9 - 0', 'remove sort' ]</pre>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
headerTitle_output_sorted<br>
|
||||
headerTitle_output_unsorted<br>
|
||||
headerTitle_output_nosort
|
||||
</td>
|
||||
<td>(see description)</td>
|
||||
<td>
|
||||
Set the output string for each sort condition: sorted, unsorted or sorting disabled.<br>
|
||||
<br>
|
||||
Each of these option strings can include a <code>{name}</code>, <code>{current}</code> and <code>{next}</code> tag.
|
||||
<ul>
|
||||
<li>The <code>{name}</code> tag is replaced by the header text.</li>
|
||||
<li>The <code>{current}</code> tag is replaced by the type-appropriate text from either the <code>headerTitle_cur_text</code> or <code>headerTitle_cur_numeric</code> option.</li>
|
||||
<li>The <code>{next}</code> tag is replaced by the type-appropriate text from either the <code>headerTitle_nxt_text</code> or <code>headerTitle_nxt_numeric</code> option.</li>
|
||||
</ul>
|
||||
Defaults:
|
||||
<pre class="prettyprint lang-js">headerTitle_output_sorted : 'current{current}; activate to {next}',
|
||||
headerTitle_output_unsorted : 'current{current}; activate to {next} ',
|
||||
headerTitle_output_nosort : 'No sort available'</pre>
|
||||
Note: the reason "activate" is used instead of "click" is because the user can also <kbd>Tab</kbd> to the header cell and press <kbd>Enter</kbd> to initiate a sort.
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>headerTitle_type</td>
|
||||
<td><code>[]</code></td>
|
||||
<td>Each column type is determined by the parser <code>type</code> value. So, if you want to override a column default type, set this option with an array with the specified column changed to either "text" or "numeric". This is useful when a date column shows as a numeric sort, but you want your users to see it as a text sort.<br>
|
||||
<br>
|
||||
As seen in the second table initialization code below, if an array element is undefined or an empty string, it will not override the default type.
|
||||
<pre class="prettyprint lang-js">headerTitle_type : ['', '', '', '', '', 'text']</pre>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>headerTitle_callback</td>
|
||||
<td><code>null</code></td>
|
||||
<td>
|
||||
This callback function is executed after the title text string has completed processing. Any additional changes, or modifications can be done within this function. This function has two parameters <code>$cell</code> (the header cell as a jQuery object), and the processed text (<code>txt</code>). The function <strong>must</strong> return the text!
|
||||
<pre class="prettyprint lang-js">headerTitle_callback : function($cell, txt) {
|
||||
return txt;
|
||||
}</pre>In this demo, you will notice that this function is used to dynamically update the tooltip.
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<h3><a href="#">Method</a></h3>
|
||||
<div>
|
||||
<h3>Force headerTitle widget update</h3>
|
||||
If you need to programmically force the header title to update, trigger a <code>refreshHeaderTitle</code> event on the table:
|
||||
<pre class="prettyprint lang-js">$('table').trigger('refreshHeaderTitle');</pre>
|
||||
In this demo, this method is used when switching between the default header title and aria-label text.
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<h1>Demo</h1>
|
||||
<div id="demo">
|
||||
|
||||
<h3>Tooltip plugin using togglable aria-label text</h3>
|
||||
<button>use aria-label</button>: <span id="usearia" class="bright">true</span>
|
||||
|
||||
<table id="table1">
|
||||
<thead>
|
||||
<tr><th>First Name</th><th>Last Name</th><th>Age</th><th>Total</th><th>Discount</th><th>Date</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>Peter</td><td>Parker</td><td>28</td><td>$9.99</td><td>20%</td><td>Jan 18, 2001 9:12 AM</td></tr>
|
||||
<tr><td>John</td><td>Evans</td><td>33</td><td>$9.99</td><td>25%</td><td>Dec 10, 2002 5:14 AM</td></tr>
|
||||
<tr><td>Clark</td><td>Kent</td><td>22</td><td>$15.89</td><td>44%</td><td>Jan 12, 2003 11:14 AM</td></tr>
|
||||
<tr><td>Bruce</td><td>Almighty</td><td>45</td><td>$15.89</td><td>44%</td><td>Jan 18, 2001 9:12 AM</td></tr>
|
||||
<tr><td>Bruce</td><td>Evans</td><td>22</td><td>$13.19</td><td>11%</td><td>Jul 6, 2006 8:14 AM</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<h3>Tooltip plugin with alternative titles</h3>
|
||||
<table id="table2">
|
||||
<thead>
|
||||
<tr><th>First Name</th><th>Last Name</th><th>Age</th><th>Total</th><th>Discount</th><th>Date</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>Peter</td><td>Parker</td><td>28</td><td>$9.99</td><td>20%</td><td>Jan 18, 2001 9:12 AM</td></tr>
|
||||
<tr><td>John</td><td>Evans</td><td>33</td><td>$9.99</td><td>25%</td><td>Dec 10, 2002 5:14 AM</td></tr>
|
||||
<tr><td>Clark</td><td>Kent</td><td>22</td><td>$15.89</td><td>44%</td><td>Jan 12, 2003 11:14 AM</td></tr>
|
||||
<tr><td>Bruce</td><td>Almighty</td><td>45</td><td>$15.89</td><td>44%</td><td>Jan 18, 2001 9:12 AM</td></tr>
|
||||
<tr><td>Bruce</td><td>Evans</td><td>22</td><td>$13.19</td><td>11%</td><td>Jul 6, 2006 8:14 AM</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<h3>No Tooltip Plugin</h3>
|
||||
<table id="table3">
|
||||
<thead>
|
||||
<tr><th>First Name</th><th>Last Name</th><th>Age</th><th>Total</th><th>Discount</th><th>Date</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>Peter</td><td>Parker</td><td>28</td><td>$9.99</td><td>20%</td><td>Jan 18, 2001 9:12 AM</td></tr>
|
||||
<tr><td>John</td><td>Evans</td><td>33</td><td>$9.99</td><td>25%</td><td>Dec 10, 2002 5:14 AM</td></tr>
|
||||
<tr><td>Clark</td><td>Kent</td><td>22</td><td>$15.89</td><td>44%</td><td>Jan 12, 2003 11:14 AM</td></tr>
|
||||
<tr><td>Bruce</td><td>Almighty</td><td>45</td><td>$15.89</td><td>44%</td><td>Jan 18, 2001 9:12 AM</td></tr>
|
||||
<tr><td>Bruce</td><td>Evans</td><td>22</td><td>$13.19</td><td>11%</td><td>Jul 6, 2006 8:14 AM</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
</div>
|
||||
|
||||
<h1>Javascript</h1>
|
||||
<div id="javascript">
|
||||
<pre class="prettyprint lang-javascript"></pre>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
372
assets/vendor/tablesorter/docs/example-widget-pager-ajax.html
vendored
Normal file
372
assets/vendor/tablesorter/docs/example-widget-pager-ajax.html
vendored
Normal file
@@ -0,0 +1,372 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery plugin: Tablesorter 2.0 - Pager Widget - Ajax</title>
|
||||
|
||||
<!-- jQuery -->
|
||||
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
|
||||
|
||||
<!-- Demo stuff -->
|
||||
<link href="css/jq.css" rel="stylesheet">
|
||||
<link href="css/prettify.css" rel="stylesheet">
|
||||
<script src="js/prettify.js"></script>
|
||||
<script src="js/docs.js"></script>
|
||||
|
||||
<!-- Tablesorter: required -->
|
||||
<link href="../css/theme.blue.css" rel="stylesheet">
|
||||
<script src="../js/jquery.tablesorter.js"></script>
|
||||
<script src="../js/jquery.tablesorter.widgets.js"></script>
|
||||
|
||||
<!-- Tablesorter: optional -->
|
||||
<link rel="stylesheet" href="../addons/pager/jquery.tablesorter.pager.css">
|
||||
<script src="../js/widgets/widget-pager.js"></script>
|
||||
|
||||
<!-- Tablesorter: optional -->
|
||||
<script src="../js/jquery.tablesorter.widgets.js"></script>
|
||||
|
||||
<script id="js">$(function(){
|
||||
|
||||
// Initialize tablesorter
|
||||
// ***********************
|
||||
$("table")
|
||||
.tablesorter({
|
||||
theme: 'blue',
|
||||
widthFixed: true,
|
||||
sortLocaleCompare: true, // needed for accented characters in the data
|
||||
sortList: [ [0,1] ],
|
||||
widgets: ['zebra', 'filter', 'pager'],
|
||||
widgetOptions: {
|
||||
|
||||
// output default: '{page}/{totalPages}'
|
||||
// possible variables: {page}, {totalPages}, {filteredPages}, {startRow}, {endRow}, {filteredRows} and {totalRows}
|
||||
pager_output: '{startRow} - {endRow} / {filteredRows} ({totalRows})', //'{startRow} to {endRow} of {totalRows} rows', // '{page}/{totalPages}'
|
||||
|
||||
// apply disabled classname to the pager arrows when the rows at either extreme is visible
|
||||
pager_updateArrows: true,
|
||||
|
||||
// starting page of the pager (zero based index)
|
||||
pager_startPage: 0,
|
||||
|
||||
// Number of visible rows
|
||||
pager_size: 25,
|
||||
|
||||
// Save pager page & size if the storage script is loaded (requires $.tablesorter.storage in jquery.tablesorter.widgets.js)
|
||||
pager_savePages: true,
|
||||
|
||||
// if true, the table will remain the same height no matter how many records are displayed. The space is made up by an empty
|
||||
// table row set to a height to compensate; default is false
|
||||
pager_fixedHeight: false,
|
||||
|
||||
// remove rows from the table to speed up the sort of large tables.
|
||||
// setting this to false, only hides the non-visible rows; needed if you plan to add/remove rows with the pager enabled.
|
||||
pager_removeRows: false, // removing rows in larger tables speeds up the sort
|
||||
|
||||
// use this format: "http://mydatabase.com?page={page}&size={size}&{sortList:col}&{filterList:fcol}"
|
||||
// where {page} is replaced by the page number, {size} is replaced by the number of records to show,
|
||||
// {sortList:col} adds the sortList to the url into a "col" array, and {filterList:fcol} adds
|
||||
// the filterList to the url into an "fcol" array.
|
||||
// So a sortList = [[2,0],[3,0]] becomes "&col[2]=0&col[3]=0" in the url
|
||||
// and a filterList = [[2,Blue],[3,13]] becomes "&fcol[2]=Blue&fcol[3]=13" in the url
|
||||
pager_ajaxUrl: 'assets/City{page}.json?{filterList:filter}&{sortList:column}',
|
||||
|
||||
// modify the url after all processing has been applied
|
||||
pager_customAjaxUrl: function(table, url) {
|
||||
// manipulate the url string as you desire
|
||||
// url += '&cPage=' + window.location.pathname;
|
||||
// trigger my custom event
|
||||
$(table).trigger('changingUrl', url);
|
||||
// send the server the current page
|
||||
return url;
|
||||
},
|
||||
|
||||
// modify the $.ajax object to allow complete control over your ajax requests
|
||||
pager_ajaxObject: {
|
||||
dataType: 'json'
|
||||
},
|
||||
|
||||
// process ajax so that the following information is returned:
|
||||
// [ total_rows (number), rows (array of arrays), headers (array; optional) ]
|
||||
// example:
|
||||
// [
|
||||
// 100, // total rows
|
||||
// [
|
||||
// [ "row1cell1", "row1cell2", ... "row1cellN" ],
|
||||
// [ "row2cell1", "row2cell2", ... "row2cellN" ],
|
||||
// ...
|
||||
// [ "rowNcell1", "rowNcell2", ... "rowNcellN" ]
|
||||
// ],
|
||||
// [ "header1", "header2", ... "headerN" ] // optional
|
||||
// ]
|
||||
pager_ajaxProcessing: function(data){
|
||||
if (data && data.hasOwnProperty('rows')) {
|
||||
var r, row, c, d = data.rows,
|
||||
// total number of rows (required)
|
||||
total = data.total_rows,
|
||||
// array of header names (optional)
|
||||
headers = data.headers,
|
||||
// all rows: array of arrays; each internal array has the table cell data for that row
|
||||
rows = [],
|
||||
// len should match pager set size (c.size)
|
||||
len = d.length;
|
||||
// this will depend on how the json is set up - see City0.json
|
||||
// rows
|
||||
for ( r=0; r < len; r++ ) {
|
||||
row = []; // new row array
|
||||
// cells
|
||||
for ( c in d[r] ) {
|
||||
if (typeof(c) === "string") {
|
||||
row.push(d[r][c]); // add each table cell data to row array
|
||||
}
|
||||
}
|
||||
rows.push(row); // add new row array to rows array
|
||||
}
|
||||
// in version 2.10, you can optionally return $(rows) a set of table rows within a jQuery object
|
||||
return [ total, rows, headers ];
|
||||
}
|
||||
},
|
||||
|
||||
// css class names of pager arrows
|
||||
pager_css: {
|
||||
container : 'tablesorter-pager',
|
||||
errorRow : 'tablesorter-errorRow', // error information row (don't include period at beginning)
|
||||
disabled : 'disabled' // class added to arrows @ extremes (i.e. prev/first arrows "disabled" on first page)
|
||||
},
|
||||
|
||||
// jQuery selectors
|
||||
pager_selectors: {
|
||||
container : '.pager', // target the pager markup (wrapper)
|
||||
first : '.first', // go to first page arrow
|
||||
prev : '.prev', // previous page arrow
|
||||
next : '.next', // next page arrow
|
||||
last : '.last', // go to last page arrow
|
||||
goto : '.gotoPage', // go to page selector - select dropdown that sets the current page
|
||||
pageDisplay : '.pagedisplay', // location of where the "output" is displayed
|
||||
pageSize : '.pagesize' // page size selector - select dropdown that sets the "size" option
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
});
|
||||
});</script>
|
||||
|
||||
</head>
|
||||
<body id="pager-demo">
|
||||
<div id="banner">
|
||||
<h1>table<em>sorter</em></h1>
|
||||
<h2>Pager Widget - Ajax</h2>
|
||||
<h3>Flexible client-side table sorting</h3>
|
||||
<a href="index.html">Back to documentation</a>
|
||||
</div>
|
||||
|
||||
<div id="main">
|
||||
|
||||
<p class="tip">
|
||||
<em>NOTE!</em>
|
||||
<ul>
|
||||
<li>This pager WIDGET <em>can not</em> be applied to the original tablesorter.</li>
|
||||
<li>Do not use this widget along with the pager plugin.</li>
|
||||
<li>The pager.css file also works with this pager widget.</li>
|
||||
<li>This widget is still in <span class="beta">development</span> as it has not been throughly tested.</li>
|
||||
<li>Extensive documentation has not been included, as all functioning is essentially identical to the pager addon, but here are some important differences:
|
||||
<ul>
|
||||
<li>All of the options are now set within the <code>widgetOptions</code>.</li>
|
||||
<li>Most option names have only been modified by adding <code>pager_</code> as a prefix.</li>
|
||||
<li>Exceptions include moving all applied css class names into a <code>pager_css</code> option and all selectors into <code>pager_selectors</code>, including the original <code>container</code> option.</li>
|
||||
<li>See the Javascript code below for a full example of how to use this widget with <strong>ajax</strong>.</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>The "ID" column has a default filter setting of ">30" and a descending sort, but neither is applied as this demo is not connected a server (just a basic JSON file).</li>
|
||||
</ul>
|
||||
</p>
|
||||
|
||||
|
||||
<h1>Demo</h1>
|
||||
Original Ajax url: <span id="origurl"></span><br>
|
||||
Current Ajax url: <span id="url"></span>
|
||||
<br>
|
||||
<table class="tablesorter">
|
||||
<thead>
|
||||
<tr>
|
||||
<td class="pager sorter-false" colspan="5">
|
||||
<img src="../addons/pager/icons/first.png" class="first" alt="First" />
|
||||
<img src="../addons/pager/icons/prev.png" class="prev" alt="Prev" />
|
||||
<span class="pagedisplay"></span> <!-- this can be any element, including an input -->
|
||||
<img src="../addons/pager/icons/next.png" class="next" alt="Next" />
|
||||
<img src="../addons/pager/icons/last.png" class="last" alt="Last" />
|
||||
<select class="pagesize">
|
||||
<option value="25">25</option>
|
||||
</select>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th data-value=">30">1</th>
|
||||
<th>2</th>
|
||||
<th>3</th>
|
||||
<th>4</th>
|
||||
<th>5</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<th>1</th>
|
||||
<th>2</th>
|
||||
<th>3</th>
|
||||
<th>4</th>
|
||||
<th>5</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="pager" colspan="5">
|
||||
<img src="../addons/pager/icons/first.png" class="first" alt="First" />
|
||||
<img src="../addons/pager/icons/prev.png" class="prev" alt="Prev" />
|
||||
<span class="pagedisplay"></span> <!-- this can be any element, including an input -->
|
||||
<img src="../addons/pager/icons/next.png" class="next" alt="Next" />
|
||||
<img src="../addons/pager/icons/last.png" class="last" alt="Last" />
|
||||
<select class="pagesize">
|
||||
<option value="25">25</option>
|
||||
</select>
|
||||
</td>
|
||||
</tr>
|
||||
</tfoot>
|
||||
<tbody>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<h1>Javascript</h1>
|
||||
<div id="javascript">
|
||||
<pre class="prettyprint lang-javascript"></pre>
|
||||
</div>
|
||||
|
||||
<h1>CSS</h1>
|
||||
<div>
|
||||
<pre class="prettyprint lang-css">/* pager wrapper, div */
|
||||
.pager {
|
||||
padding: 5px;
|
||||
}
|
||||
/* pager wrapper, in thead/tfoot */
|
||||
td.pager {
|
||||
background-color: #e6eeee;
|
||||
}
|
||||
/* pager navigation arrows */
|
||||
.pager img {
|
||||
vertical-align: middle;
|
||||
margin-right: 2px;
|
||||
}
|
||||
/* pager output text */
|
||||
.pager .pagedisplay {
|
||||
font-size: 11px;
|
||||
padding: 0 5px 0 5px;
|
||||
width: 50px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/*** loading ajax indeterminate progress indicator ***/
|
||||
#tablesorterPagerLoading {
|
||||
background: rgba(255,255,255,0.8) url(icons/loading.gif) center center no-repeat;
|
||||
position: absolute;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
/*** css used when "updateArrows" option is true ***/
|
||||
/* the pager itself gets a disabled class when the number of rows is less than the size */
|
||||
.pager.disabled {
|
||||
display: none;
|
||||
}
|
||||
/* hide or fade out pager arrows when the first or last row is visible */
|
||||
.pager img.disabled {
|
||||
/* visibility: hidden */
|
||||
opacity: 0.5;
|
||||
filter: alpha(opacity=50);
|
||||
}</pre>
|
||||
</div>
|
||||
|
||||
<h1>HTML</h1>
|
||||
<div id="html">
|
||||
<pre class="prettyprint lang-html"><!-- jQuery -->
|
||||
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
|
||||
|
||||
<!-- Tablesorter: required -->
|
||||
<link href="css/theme.blue.css" rel="stylesheet">
|
||||
<script src="js/jquery.tablesorter.js"></script>
|
||||
<script src="js/jquery.tablesorter.widgets.js"></script>
|
||||
|
||||
<!-- Tablesorter: pager widget -->
|
||||
<link href="css/jquery.tablesorter.pager.css" rel="stylesheet">
|
||||
<script src="js/widget-pager.js"></script>
|
||||
|
||||
<table class="tablesorter">
|
||||
<thead>
|
||||
<tr>
|
||||
<td class="pager" colspan="5">
|
||||
<img src="../addons/pager/icons/first.png" class="first"/>
|
||||
<img src="../addons/pager/icons/prev.png" class="prev"/>
|
||||
<span class="pagedisplay"></span> <!-- this can be any element, including an input -->
|
||||
<img src="../addons/pager/icons/next.png" class="next"/>
|
||||
<img src="../addons/pager/icons/last.png" class="last"/>
|
||||
<select class="pagesize">
|
||||
<option value="25">25</option>
|
||||
</select>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>1</th> <!-- thead text will be updated from the JSON; make sure the number of columns matches the JSON data -->
|
||||
<th>2</th>
|
||||
<th>3</th>
|
||||
<th>4</th>
|
||||
<th>5</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<th>1</th> <!-- tfoot text will be updated at the same time as the thead -->
|
||||
<th>2</th>
|
||||
<th>3</th>
|
||||
<th>4</th>
|
||||
<th>5</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="pager" colspan="5">
|
||||
<img src="../addons/pager/icons/first.png" class="first"/>
|
||||
<img src="../addons/pager/icons/prev.png" class="prev"/>
|
||||
<span class="pagedisplay"></span> <!-- this can be any element, including an input -->
|
||||
<img src="../addons/pager/icons/next.png" class="next"/>
|
||||
<img src="../addons/pager/icons/last.png" class="last"/>
|
||||
<select class="pagesize">
|
||||
<option value="25">25</option>
|
||||
</select>
|
||||
</td>
|
||||
</tr>
|
||||
</tfoot>
|
||||
<tbody> <!-- tbody will be loaded via JSON -->
|
||||
</tbody>
|
||||
</table></pre>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="next-up">
|
||||
<hr />
|
||||
Next up: <a href="example-pager-filtered.html">Pager plugin + filter widget ››</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<script>
|
||||
var $url = $('#url');
|
||||
$('table')
|
||||
|
||||
// show current URL for the DEMO ONLY
|
||||
.on('changingUrl', function(e, url){
|
||||
$url.html(url);
|
||||
})
|
||||
|
||||
.on('pagerInitialized', function(){
|
||||
// allow THIS demo to sort the content; this variable is automatically set to true when ajax
|
||||
// is used as there isn't any way to sort the server side data from the client side.
|
||||
this.config.serverSideSorting = false;
|
||||
// show original highlighted URL
|
||||
$('#origurl').html( this.config.widgetOptions.pager_ajaxUrl.replace(/(\{.*?\})/g, '<span class="results">$1</span>') );
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
648
assets/vendor/tablesorter/docs/example-widget-pager.html
vendored
Normal file
648
assets/vendor/tablesorter/docs/example-widget-pager.html
vendored
Normal file
@@ -0,0 +1,648 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery plugin: Tablesorter 2.0 - Pager Widget</title>
|
||||
|
||||
<!-- jQuery -->
|
||||
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
|
||||
|
||||
<!-- Demo stuff -->
|
||||
<link href="css/jq.css" rel="stylesheet">
|
||||
<link href="css/prettify.css" rel="stylesheet">
|
||||
<script src="js/prettify.js"></script>
|
||||
<script src="js/docs.js"></script>
|
||||
|
||||
<!-- Tablesorter: required -->
|
||||
<link href="../css/theme.blue.css" rel="stylesheet">
|
||||
<script src="../js/jquery.tablesorter.js"></script>
|
||||
<script src="../js/jquery.tablesorter.widgets.js"></script>
|
||||
|
||||
<!-- Tablesorter: optional -->
|
||||
<link rel="stylesheet" href="../addons/pager/jquery.tablesorter.pager.css">
|
||||
<script src="../js/widgets/widget-pager.js"></script>
|
||||
|
||||
<script id="js">$(function(){
|
||||
|
||||
$("table")
|
||||
|
||||
// Initialize tablesorter
|
||||
// ***********************
|
||||
.tablesorter({
|
||||
theme: 'blue',
|
||||
widthFixed: true,
|
||||
widgets: ['zebra', 'pager'],
|
||||
|
||||
widgetOptions: {
|
||||
|
||||
// output default: '{page}/{totalPages}'
|
||||
// possible variables: {page}, {totalPages}, {filteredPages}, {startRow}, {endRow}, {filteredRows} and {totalRows}
|
||||
pager_output: '{startRow} to {endRow} of {totalRows} rows', // '{page}/{totalPages}'
|
||||
|
||||
// apply disabled classname to the pager arrows when the rows at either extreme is visible
|
||||
pager_updateArrows: true,
|
||||
|
||||
// starting page of the pager (zero based index)
|
||||
pager_startPage: 0,
|
||||
|
||||
// Number of visible rows
|
||||
pager_size: 10,
|
||||
|
||||
// Save pager page & size if the storage script is loaded (requires $.tablesorter.storage in jquery.tablesorter.widgets.js)
|
||||
pager_savePages: true,
|
||||
|
||||
// if true, the table will remain the same height no matter how many records are displayed. The space is made up by an empty
|
||||
// table row set to a height to compensate; default is false
|
||||
pager_fixedHeight: false,
|
||||
|
||||
// remove rows from the table to speed up the sort of large tables.
|
||||
// setting this to false, only hides the non-visible rows; needed if you plan to add/remove rows with the pager enabled.
|
||||
pager_removeRows: false, // removing rows in larger tables speeds up the sort
|
||||
|
||||
// use this format: "http://mydatabase.com?page={page}&size={size}&{sortList:col}&{filterList:fcol}"
|
||||
// where {page} is replaced by the page number, {size} is replaced by the number of records to show,
|
||||
// {sortList:col} adds the sortList to the url into a "col" array, and {filterList:fcol} adds
|
||||
// the filterList to the url into an "fcol" array.
|
||||
// So a sortList = [[2,0],[3,0]] becomes "&col[2]=0&col[3]=0" in the url
|
||||
// and a filterList = [[2,Blue],[3,13]] becomes "&fcol[2]=Blue&fcol[3]=13" in the url
|
||||
pager_ajaxUrl: null,
|
||||
|
||||
// modify the url after all processing has been applied
|
||||
pager_customAjaxUrl: function(table, url) { return url; },
|
||||
|
||||
// modify the $.ajax object to allow complete control over your ajax requests
|
||||
pager_ajaxObject: {
|
||||
dataType: 'json'
|
||||
},
|
||||
|
||||
// process ajax so that the following information is returned:
|
||||
// [ total_rows (number), rows (array of arrays), headers (array; optional) ]
|
||||
// example:
|
||||
// [
|
||||
// 100, // total rows
|
||||
// [
|
||||
// [ "row1cell1", "row1cell2", ... "row1cellN" ],
|
||||
// [ "row2cell1", "row2cell2", ... "row2cellN" ],
|
||||
// ...
|
||||
// [ "rowNcell1", "rowNcell2", ... "rowNcellN" ]
|
||||
// ],
|
||||
// [ "header1", "header2", ... "headerN" ] // optional
|
||||
// ]
|
||||
pager_ajaxProcessing: function(ajax){ return [ 0, [], null ]; },
|
||||
|
||||
// css class names of pager arrows
|
||||
pager_css: {
|
||||
container : 'tablesorter-pager',
|
||||
errorRow : 'tablesorter-errorRow', // error information row (don't include period at beginning)
|
||||
disabled : 'disabled' // class added to arrows @ extremes (i.e. prev/first arrows "disabled" on first page)
|
||||
},
|
||||
|
||||
// jQuery selectors
|
||||
pager_selectors: {
|
||||
container : '.pager', // target the pager markup (wrapper)
|
||||
first : '.first', // go to first page arrow
|
||||
prev : '.prev', // previous page arrow
|
||||
next : '.next', // next page arrow
|
||||
last : '.last', // go to last page arrow
|
||||
goto : '.gotoPage', // go to page selector - select dropdown that sets the current page
|
||||
pageDisplay : '.pagedisplay', // location of where the "output" is displayed
|
||||
pageSize : '.pagesize' // page size selector - select dropdown that sets the "size" option
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
})
|
||||
|
||||
// bind to pager events
|
||||
// *********************
|
||||
.bind('pagerChange pagerComplete pagerInitialized pageMoved', function(e, c){
|
||||
var p = c.pager, // NEW with the widget... it returns config, instead of config.pager
|
||||
msg = '"</span> event triggered, ' + (e.type === 'pagerChange' ? 'going to' : 'now on') +
|
||||
' page <span class="typ">' + (p.page + 1) + '/' + p.totalPages + '</span>';
|
||||
$('#display')
|
||||
.append('<li><span class="str">"' + e.type + msg + '</li>')
|
||||
.find('li:first').remove();
|
||||
})
|
||||
|
||||
// Add two new rows using the "addRows" method
|
||||
// the "update" method doesn't work here because not all rows are
|
||||
// present in the table when the pager is applied ("removeRows" is false)
|
||||
// ***********************************************************************
|
||||
var r, $row, num = 50,
|
||||
row = '<tr><td>Student{i}</td><td>{m}</td><td>{g}</td><td>{r}</td><td>{r}</td><td>{r}</td><td>{r}</td><td><button type="button" class="remove" title="Remove this row">X</button></td></tr>' +
|
||||
'<tr><td>Student{j}</td><td>{m}</td><td>{g}</td><td>{r}</td><td>{r}</td><td>{r}</td><td>{r}</td><td><button type="button" class="remove" title="Remove this row">X</button></td></tr>';
|
||||
$('button:contains(Add)').click(function(){
|
||||
// add two rows of random data!
|
||||
r = row.replace(/\{[gijmr]\}/g, function(m){
|
||||
return {
|
||||
'{i}' : num + 1,
|
||||
'{j}' : num + 2,
|
||||
'{r}' : Math.round(Math.random() * 100),
|
||||
'{g}' : Math.random() > 0.5 ? 'male' : 'female',
|
||||
'{m}' : Math.random() > 0.5 ? 'Mathematics' : 'Languages'
|
||||
}[m];
|
||||
});
|
||||
num = num + 2;
|
||||
$row = $(r);
|
||||
$('table')
|
||||
.find('tbody').append($row)
|
||||
.trigger('addRows', [$row]);
|
||||
return false;
|
||||
});
|
||||
|
||||
// Delete a row
|
||||
// *************
|
||||
$('table').delegate('button.remove', 'click' ,function(){
|
||||
var t = $('table');
|
||||
// disabling the pager will restore all table rows
|
||||
// t.trigger('disable.pager');
|
||||
// remove chosen row
|
||||
$(this).closest('tr').remove();
|
||||
// restore pager
|
||||
// t.trigger('enable.pager');
|
||||
t.trigger('update');
|
||||
return false;
|
||||
});
|
||||
|
||||
// Destroy pager / Restore pager
|
||||
// **************
|
||||
$('button:contains(Destroy)').click(function(){
|
||||
// Exterminate, annhilate, destroy! http://www.youtube.com/watch?v=LOqn8FxuyFs
|
||||
var $t = $(this);
|
||||
if (/Destroy/.test( $t.text() )){
|
||||
$('table')[0].config.widgets = ['zebra'];
|
||||
$('table').trigger('refreshWidgets');
|
||||
|
||||
//.trigger('destroy.pager');
|
||||
$t.text('Restore Pager');
|
||||
} else {
|
||||
$('table')[0].config.widgets = ['zebra', 'pager'];
|
||||
$('table').trigger('applyWidgets');
|
||||
$t.text('Destroy Pager');
|
||||
}
|
||||
return false;
|
||||
});
|
||||
|
||||
// Disable / Enable
|
||||
// **************
|
||||
$('.toggle').click(function(){
|
||||
var mode = /Disable/.test( $(this).text() );
|
||||
$('table').trigger( (mode ? 'disable' : 'enable') + '.pager');
|
||||
$(this).text( (mode ? 'Enable' : 'Disable') + 'Pager');
|
||||
return false;
|
||||
});
|
||||
$('table').bind('pagerChange', function(){
|
||||
// pager automatically enables when table is sorted.
|
||||
$('.toggle').text('Disable Pager');
|
||||
});
|
||||
|
||||
});</script>
|
||||
</head>
|
||||
<body id="pager-demo">
|
||||
<div id="banner">
|
||||
<h1>table<em>sorter</em></h1>
|
||||
<h2>Pager Widget</h2>
|
||||
<h3>Flexible client-side table sorting</h3>
|
||||
<a href="index.html">Back to documentation</a>
|
||||
</div>
|
||||
|
||||
<div id="main">
|
||||
|
||||
<p class="tip">
|
||||
<em>NOTE!</em>
|
||||
<ul>
|
||||
<li>This pager WIDGET <em>can not</em> be applied to the original tablesorter.</li>
|
||||
<li>Do not use this widget along with the pager plugin.</li>
|
||||
<li>The pager.css file also works with this pager widget.</li>
|
||||
<li>This widget is still in <span class="beta">development</span> as it has not been throughly tested.</li>
|
||||
<li>Extensive documentation has not been included, as all functioning is essentially identical to the pager addon, but here are some important differences:
|
||||
<ul>
|
||||
<li>All of the options are now set within the <code>widgetOptions</code>.</li>
|
||||
<li>Pager events (pagerChange pagerComplete pagerInitialized pageMoved) now return <code>table.config</code> instead of <code>table.config.pager</code>.</li>
|
||||
<li>Most option names have only been modified by adding <code>pager_</code> as a prefix.</li>
|
||||
<li>Exceptions include moving all applied css class names into a <code>pager_css</code> option and all selectors into <code>pager_selectors</code>, including the original <code>container</code> option.</li>
|
||||
<li>Because I stopped trying so hard to make widgets compatible with jQuery v1.2.6, this widget requires at least v1.3+.</li>
|
||||
<li>See the Javascript code below for a full example.</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</p>
|
||||
|
||||
<h1>Triggered Events</h1>
|
||||
<ul id="display">
|
||||
<li>Pager events will appear here.</li>
|
||||
<li> </li>
|
||||
<li> </li>
|
||||
</ul>
|
||||
|
||||
<h1>Demo</h1>
|
||||
<br>
|
||||
<button type="button">Add Rows</button> <button type="button" class="toggle">Disable Pager</button> <button type="button">Destroy Pager</button>
|
||||
<br><br>
|
||||
<div class="pager">
|
||||
<img src="../addons/pager/icons/first.png" class="first" alt="First" />
|
||||
<img src="../addons/pager/icons/prev.png" class="prev" alt="Prev" />
|
||||
<span class="pagedisplay"></span> <!-- this can be any element, including an input -->
|
||||
<img src="../addons/pager/icons/next.png" class="next" alt="Next" />
|
||||
<img src="../addons/pager/icons/last.png" class="last" alt="Last" />
|
||||
<select class="pagesize" title="Select page size">
|
||||
<option value="10">10</option>
|
||||
<option value="20">20</option>
|
||||
<option value="30">30</option>
|
||||
<option value="40">40</option>
|
||||
</select>
|
||||
<select class="gotoPage" title="Select page number"></select>
|
||||
</div>
|
||||
|
||||
<table class="tablesorter">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Major</th>
|
||||
<th>Sex</th>
|
||||
<th>English</th>
|
||||
<th>Japanese</th>
|
||||
<th>Calculus</th>
|
||||
<th>Geometry</th>
|
||||
<th class="remove sorter-false"></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Major</th>
|
||||
<th>Sex</th>
|
||||
<th>English</th>
|
||||
<th>Japanese</th>
|
||||
<th>Calculus</th>
|
||||
<th>Geometry</th>
|
||||
<th></th>
|
||||
</tr>
|
||||
</tfoot>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Student01</td>
|
||||
<td>Languages</td>
|
||||
<td>male</td>
|
||||
<td>80</td>
|
||||
<td>70</td>
|
||||
<td>75</td>
|
||||
<td>80</td>
|
||||
<td><button type="button" class="remove" title="Remove this row">X</button></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Student02</td>
|
||||
<td>Mathematics</td>
|
||||
<td>male</td>
|
||||
<td>90</td>
|
||||
<td>88</td>
|
||||
<td>100</td>
|
||||
<td>90</td>
|
||||
<td><button type="button" class="remove" title="Remove this row">X</button></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Student03</td>
|
||||
<td>Languages</td>
|
||||
<td>female</td>
|
||||
<td>85</td>
|
||||
<td>95</td>
|
||||
<td>80</td>
|
||||
<td>85</td>
|
||||
<td><button type="button" class="remove" title="Remove this row">X</button></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Student04</td>
|
||||
<td>Languages</td>
|
||||
<td>male</td>
|
||||
<td>60</td>
|
||||
<td>55</td>
|
||||
<td>100</td>
|
||||
<td>100</td>
|
||||
<td><button type="button" class="remove" title="Remove this row">X</button></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Student05</td>
|
||||
<td>Languages</td>
|
||||
<td>female</td>
|
||||
<td>68</td>
|
||||
<td>80</td>
|
||||
<td>95</td>
|
||||
<td>80</td>
|
||||
<td><button type="button" class="remove" title="Remove this row">X</button></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Student06</td>
|
||||
<td>Mathematics</td>
|
||||
<td>male</td>
|
||||
<td>100</td>
|
||||
<td>99</td>
|
||||
<td>100</td>
|
||||
<td>90</td>
|
||||
<td><button type="button" class="remove" title="Remove this row">X</button></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Student07</td>
|
||||
<td>Mathematics</td>
|
||||
<td>male</td>
|
||||
<td>85</td>
|
||||
<td>68</td>
|
||||
<td>90</td>
|
||||
<td>90</td>
|
||||
<td><button type="button" class="remove" title="Remove this row">X</button></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Student08</td>
|
||||
<td>Languages</td>
|
||||
<td>male</td>
|
||||
<td>100</td>
|
||||
<td>90</td>
|
||||
<td>90</td>
|
||||
<td>85</td>
|
||||
<td><button type="button" class="remove" title="Remove this row">X</button></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Student09</td>
|
||||
<td>Mathematics</td>
|
||||
<td>male</td>
|
||||
<td>80</td>
|
||||
<td>50</td>
|
||||
<td>65</td>
|
||||
<td>75</td>
|
||||
<td><button type="button" class="remove" title="Remove this row">X</button></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Student10</td>
|
||||
<td>Languages</td>
|
||||
<td>male</td>
|
||||
<td>85</td>
|
||||
<td>100</td>
|
||||
<td>100</td>
|
||||
<td>90</td>
|
||||
<td><button type="button" class="remove" title="Remove this row">X</button></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Student11</td>
|
||||
<td>Languages</td>
|
||||
<td>male</td>
|
||||
<td>86</td>
|
||||
<td>85</td>
|
||||
<td>100</td>
|
||||
<td>100</td>
|
||||
<td><button type="button" class="remove" title="Remove this row">X</button></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Student12</td>
|
||||
<td>Mathematics</td>
|
||||
<td>female</td>
|
||||
<td>100</td>
|
||||
<td>75</td>
|
||||
<td>70</td>
|
||||
<td>85</td>
|
||||
<td><button type="button" class="remove" title="Remove this row">X</button></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Student13</td>
|
||||
<td>Languages</td>
|
||||
<td>female</td>
|
||||
<td>100</td>
|
||||
<td>80</td>
|
||||
<td>100</td>
|
||||
<td>90</td>
|
||||
<td><button type="button" class="remove" title="Remove this row">X</button></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Student14</td>
|
||||
<td>Languages</td>
|
||||
<td>female</td>
|
||||
<td>50</td>
|
||||
<td>45</td>
|
||||
<td>55</td>
|
||||
<td>90</td>
|
||||
<td><button type="button" class="remove" title="Remove this row">X</button></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Student15</td>
|
||||
<td>Languages</td>
|
||||
<td>male</td>
|
||||
<td>95</td>
|
||||
<td>35</td>
|
||||
<td>100</td>
|
||||
<td>90</td>
|
||||
<td><button type="button" class="remove" title="Remove this row">X</button></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Student16</td>
|
||||
<td>Languages</td>
|
||||
<td>female</td>
|
||||
<td>100</td>
|
||||
<td>50</td>
|
||||
<td>30</td>
|
||||
<td>70</td>
|
||||
<td><button type="button" class="remove" title="Remove this row">X</button></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Student17</td>
|
||||
<td>Languages</td>
|
||||
<td>female</td>
|
||||
<td>80</td>
|
||||
<td>100</td>
|
||||
<td>55</td>
|
||||
<td>65</td>
|
||||
<td><button type="button" class="remove" title="Remove this row">X</button></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Student18</td>
|
||||
<td>Mathematics</td>
|
||||
<td>male</td>
|
||||
<td>30</td>
|
||||
<td>49</td>
|
||||
<td>55</td>
|
||||
<td>75</td>
|
||||
<td><button type="button" class="remove" title="Remove this row">X</button></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Student19</td>
|
||||
<td>Languages</td>
|
||||
<td>male</td>
|
||||
<td>68</td>
|
||||
<td>90</td>
|
||||
<td>88</td>
|
||||
<td>70</td>
|
||||
<td><button type="button" class="remove" title="Remove this row">X</button></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Student20</td>
|
||||
<td>Mathematics</td>
|
||||
<td>male</td>
|
||||
<td>40</td>
|
||||
<td>45</td>
|
||||
<td>40</td>
|
||||
<td>80</td>
|
||||
<td><button type="button" class="remove" title="Remove this row">X</button></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Student21</td>
|
||||
<td>Languages</td>
|
||||
<td>male</td>
|
||||
<td>50</td>
|
||||
<td>45</td>
|
||||
<td>100</td>
|
||||
<td>100</td>
|
||||
<td><button type="button" class="remove" title="Remove this row">X</button></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Student22</td>
|
||||
<td>Mathematics</td>
|
||||
<td>male</td>
|
||||
<td>100</td>
|
||||
<td>99</td>
|
||||
<td>100</td>
|
||||
<td>90</td>
|
||||
<td><button type="button" class="remove" title="Remove this row">X</button></td>
|
||||
</tr>
|
||||
<tr><td>Student23</td><td>Mathematics</td><td>male</td><td>82</td><td>77</td><td>0</td><td>79</td><td><button type="button" class="remove" title="Remove this row">X</button></td></tr>
|
||||
<tr><td>Student24</td><td>Languages</td><td>female</td><td>100</td><td>91</td><td>13</td><td>82</td><td><button type="button" class="remove" title="Remove this row">X</button></td></tr>
|
||||
<tr><td>Student25</td><td>Mathematics</td><td>male</td><td>22</td><td>96</td><td>82</td><td>53</td><td><button type="button" class="remove" title="Remove this row">X</button></td></tr>
|
||||
<tr><td>Student26</td><td>Languages</td><td>female</td><td>37</td><td>29</td><td>56</td><td>59</td><td><button type="button" class="remove" title="Remove this row">X</button></td></tr>
|
||||
<tr><td>Student27</td><td>Mathematics</td><td>male</td><td>86</td><td>82</td><td>69</td><td>23</td><td><button type="button" class="remove" title="Remove this row">X</button></td></tr>
|
||||
<tr><td>Student28</td><td>Languages</td><td>female</td><td>44</td><td>25</td><td>43</td><td>1</td><td><button type="button" class="remove" title="Remove this row">X</button></td></tr>
|
||||
<tr><td>Student29</td><td>Mathematics</td><td>male</td><td>77</td><td>47</td><td>22</td><td>38</td><td><button type="button" class="remove" title="Remove this row">X</button></td></tr>
|
||||
<tr><td>Student30</td><td>Languages</td><td>female</td><td>19</td><td>35</td><td>23</td><td>10</td><td><button type="button" class="remove" title="Remove this row">X</button></td></tr>
|
||||
<tr><td>Student31</td><td>Mathematics</td><td>male</td><td>90</td><td>27</td><td>17</td><td>50</td><td><button type="button" class="remove" title="Remove this row">X</button></td></tr>
|
||||
<tr><td>Student32</td><td>Languages</td><td>female</td><td>60</td><td>75</td><td>33</td><td>38</td><td><button type="button" class="remove" title="Remove this row">X</button></td></tr>
|
||||
<tr><td>Student33</td><td>Mathematics</td><td>male</td><td>4</td><td>31</td><td>37</td><td>15</td><td><button type="button" class="remove" title="Remove this row">X</button></td></tr>
|
||||
<tr><td>Student34</td><td>Languages</td><td>female</td><td>77</td><td>97</td><td>81</td><td>44</td><td><button type="button" class="remove" title="Remove this row">X</button></td></tr>
|
||||
<tr><td>Student35</td><td>Mathematics</td><td>male</td><td>5</td><td>81</td><td>51</td><td>95</td><td><button type="button" class="remove" title="Remove this row">X</button></td></tr>
|
||||
<tr><td>Student36</td><td>Languages</td><td>female</td><td>70</td><td>61</td><td>70</td><td>94</td><td><button type="button" class="remove" title="Remove this row">X</button></td></tr>
|
||||
<tr><td>Student37</td><td>Mathematics</td><td>male</td><td>60</td><td>3</td><td>61</td><td>84</td><td><button type="button" class="remove" title="Remove this row">X</button></td></tr>
|
||||
<tr><td>Student38</td><td>Languages</td><td>female</td><td>63</td><td>39</td><td>0</td><td>11</td><td><button type="button" class="remove" title="Remove this row">X</button></td></tr>
|
||||
<tr><td>Student39</td><td>Mathematics</td><td>male</td><td>50</td><td>46</td><td>32</td><td>38</td><td><button type="button" class="remove" title="Remove this row">X</button></td></tr>
|
||||
<tr><td>Student40</td><td>Languages</td><td>female</td><td>51</td><td>75</td><td>25</td><td>3</td><td><button type="button" class="remove" title="Remove this row">X</button></td></tr>
|
||||
<tr><td>Student41</td><td>Mathematics</td><td>male</td><td>43</td><td>34</td><td>28</td><td>78</td><td><button type="button" class="remove" title="Remove this row">X</button></td></tr>
|
||||
<tr><td>Student42</td><td>Languages</td><td>female</td><td>11</td><td>89</td><td>60</td><td>95</td><td><button type="button" class="remove" title="Remove this row">X</button></td></tr>
|
||||
<tr><td>Student43</td><td>Mathematics</td><td>male</td><td>48</td><td>92</td><td>18</td><td>88</td><td><button type="button" class="remove" title="Remove this row">X</button></td></tr>
|
||||
<tr><td>Student44</td><td>Languages</td><td>female</td><td>82</td><td>2</td><td>59</td><td>73</td><td><button type="button" class="remove" title="Remove this row">X</button></td></tr>
|
||||
<tr><td>Student45</td><td>Mathematics</td><td>male</td><td>91</td><td>73</td><td>37</td><td>39</td><td><button type="button" class="remove" title="Remove this row">X</button></td></tr>
|
||||
<tr><td>Student46</td><td>Languages</td><td>female</td><td>4</td><td>8</td><td>12</td><td>10</td><td><button type="button" class="remove" title="Remove this row">X</button></td></tr>
|
||||
<tr><td>Student47</td><td>Mathematics</td><td>male</td><td>89</td><td>10</td><td>6</td><td>11</td><td><button type="button" class="remove" title="Remove this row">X</button></td></tr>
|
||||
<tr><td>Student48</td><td>Languages</td><td>female</td><td>90</td><td>32</td><td>21</td><td>18</td><td><button type="button" class="remove" title="Remove this row">X</button></td></tr>
|
||||
<tr><td>Student49</td><td>Mathematics</td><td>male</td><td>42</td><td>49</td><td>49</td><td>72</td><td><button type="button" class="remove" title="Remove this row">X</button></td></tr>
|
||||
<tr><td>Student50</td><td>Languages</td><td>female</td><td>56</td><td>37</td><td>67</td><td>54</td><td><button type="button" class="remove" title="Remove this row">X</button></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<div class="pager">
|
||||
<img src="../addons/pager/icons/first.png" class="first" alt="First" />
|
||||
<img src="../addons/pager/icons/prev.png" class="prev" alt="Prev" />
|
||||
<span class="pagedisplay"></span> <!-- this can be any element, including an input -->
|
||||
<img src="../addons/pager/icons/next.png" class="next" alt="Next" />
|
||||
<img src="../addons/pager/icons/last.png" class="last" alt="Last" />
|
||||
<select class="pagesize" title="Select page size">
|
||||
<option value="10">10</option>
|
||||
<option value="20">20</option>
|
||||
<option value="30">30</option>
|
||||
<option value="40">40</option>
|
||||
</select>
|
||||
<select class="gotoPage" title="Select page number"></select>
|
||||
</div>
|
||||
|
||||
<h1>Javascript</h1>
|
||||
<div id="javascript">
|
||||
<pre class="prettyprint lang-javascript"></pre>
|
||||
</div>
|
||||
|
||||
<h1>CSS</h1>
|
||||
<div>
|
||||
<pre class="prettyprint lang-css">/* pager wrapper, div */
|
||||
.tablesorter-pager {
|
||||
padding: 5px;
|
||||
}
|
||||
/* pager wrapper, in thead/tfoot */
|
||||
td.tablesorter-pager {
|
||||
background-color: #e6eeee;
|
||||
margin: 0; /* needed for bootstrap .pager gets a 18px bottom margin */
|
||||
}
|
||||
/* pager navigation arrows */
|
||||
.tablesorter-pager img {
|
||||
vertical-align: middle;
|
||||
margin-right: 2px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* pager output text */
|
||||
.tablesorter-pager .pagedisplay {
|
||||
padding: 0 5px 0 5px;
|
||||
width: 50px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* pager element reset (needed for bootstrap) */
|
||||
.tablesorter-pager select {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/*** css used when "updateArrows" option is true ***/
|
||||
/* the pager itself gets a disabled class when the number of rows is less than the size */
|
||||
.tablesorter-pager.disabled {
|
||||
display: none;
|
||||
}
|
||||
/* hide or fade out pager arrows when the first or last row is visible */
|
||||
.tablesorter-pager .disabled {
|
||||
/* visibility: hidden */
|
||||
opacity: 0.5;
|
||||
filter: alpha(opacity=50);
|
||||
cursor: default;
|
||||
}</pre>
|
||||
</div>
|
||||
|
||||
<h1>HTML</h1>
|
||||
<div id="html">
|
||||
<pre class="prettyprint lang-html"><!-- jQuery -->
|
||||
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
|
||||
|
||||
<!-- Tablesorter: required -->
|
||||
<link href="css/theme.blue.css" rel="stylesheet">
|
||||
<script src="js/jquery.tablesorter.js"></script>
|
||||
<script src="js/jquery.tablesorter.widgets.js"></script>
|
||||
|
||||
<!-- Tablesorter: pager widget -->
|
||||
<link href="css/jquery.tablesorter.pager.css" rel="stylesheet">
|
||||
<script src="js/widget-pager.js"></script>
|
||||
|
||||
<table class="tablesorter">
|
||||
<!-- view page source to see the entire table -->
|
||||
</table>
|
||||
|
||||
<!-- pager -->
|
||||
<div id="pager" class="pager">
|
||||
<form>
|
||||
<img src="first.png" class="first"/>
|
||||
<img src="prev.png" class="prev"/>
|
||||
<span class="pagedisplay"></span> <!-- this can be any element, including an input -->
|
||||
<img src="next.png" class="next"/>
|
||||
<img src="last.png" class="last"/>
|
||||
<select class="pagesize">
|
||||
<option selected="selected" value="10">10</option>
|
||||
<option value="20">20</option>
|
||||
<option value="30">30</option>
|
||||
<option value="40">40</option>
|
||||
</select>
|
||||
</form>
|
||||
</div></pre>
|
||||
|
||||
</div>
|
||||
|
||||
<a id="change-log"></a>
|
||||
<h1>Pager Change Log</h1>
|
||||
<ul>
|
||||
<li>Moved to <a href="https://github.com/Mottie/tablesorter/wiki/Change2">wiki pages</a>.</li>
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
239
assets/vendor/tablesorter/docs/example-widget-resizable.html
vendored
Normal file
239
assets/vendor/tablesorter/docs/example-widget-resizable.html
vendored
Normal file
@@ -0,0 +1,239 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery plugin: Tablesorter 2.0 - Resizable Columns Widget</title>
|
||||
|
||||
<!-- jQuery -->
|
||||
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
|
||||
|
||||
<!-- Demo stuff -->
|
||||
<link rel="stylesheet" href="css/jq.css">
|
||||
<link href="css/prettify.css" rel="stylesheet">
|
||||
<script src="js/prettify.js"></script>
|
||||
<script src="js/docs.js"></script>
|
||||
|
||||
<!-- Tablesorter: required -->
|
||||
<link rel="stylesheet" href="../css/theme.blue.css">
|
||||
<script src="../js/jquery.tablesorter.js"></script>
|
||||
<script src="../js/jquery.tablesorter.widgets.js"></script>
|
||||
|
||||
<!-- Tablesorter: optional -->
|
||||
<!-- <script src="../addons/pager/jquery.tablesorter.pager.js"></script> -->
|
||||
|
||||
<style>
|
||||
th.tablesorter-header.resizable-false { background-color: #e6bf99; }
|
||||
</style>
|
||||
|
||||
<script id="js">$(function() {
|
||||
|
||||
$("table:first").tablesorter({
|
||||
theme : 'blue',
|
||||
// initialize zebra striping and resizable widgets on the table
|
||||
widgets: [ "zebra", "resizable" ],
|
||||
widgetOptions: {
|
||||
resizable_addLastColumn : true
|
||||
}
|
||||
});
|
||||
|
||||
$("table:last").tablesorter({
|
||||
theme : 'blue',
|
||||
// initialize zebra striping and resizable widgets on the table
|
||||
widgets: [ "zebra", "resizable" ]
|
||||
});
|
||||
|
||||
});</script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="banner">
|
||||
<h1>table<em>sorter</em></h1>
|
||||
<h2>Resizable Columns Widget</h2>
|
||||
<h3>Flexible client-side table sorting</h3>
|
||||
<a href="index.html">Back to documentation</a>
|
||||
</div>
|
||||
<div id="main">
|
||||
|
||||
<p class="tip">
|
||||
<em>NOTE!</em>
|
||||
<ul>
|
||||
<li>As of tablesorter version 2.9+, this widget can no longer be applied to versions of tablesorter prior to version 2.8.</li>
|
||||
<li>This widget now saves all changed column widths to local storage, or it falls back to a cookie! (v2.1)</li>
|
||||
<li>Column width saving requires the new "$.tablesorter.storage()" function included with the "jquery.tablesorter.widgets.js" file (v2.1).</li>
|
||||
<li>Right clicking (opening the context menu) will now reset the resized columns (v2.4).</li>
|
||||
<li>Holding down the shift key while resizing will force the last column or the table to resize instead of the next column, but only if the table is full width (v2.7.4).</li>
|
||||
<li>Prevent resizing a column by adding any of the following (they all do the same thing), set in order of priority (v2.7.4):
|
||||
<ul>
|
||||
<li>jQuery data <code>data-resizable="false"</code>.</li>
|
||||
<li>metadata <code>class="{ resizable: 'false'}"</code>. This requires the metadata plugin.</li>
|
||||
<li>headers option <code>headers : { 0 : { resizable : 'false' } }</code>.</li>
|
||||
<li>header class name <code>class="resizable-false"</code>.</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>Setting the <code>resizable</code> widget option to <code>false</code>, will only prevent the saving of resized columns, it has nothing to do with preventing a column from being resized.</li>
|
||||
<li>Because this widget uses jQuery's <code>closest()</code> (jQuery 1.3+) and <code>index()</code> (jQuery 1.4+) functions, it requires these newer versions of jQuery in order to work.</li>
|
||||
<li>In order to save the resized widths, jQuery version 1.4.1+ should be used because jQuery's <code>parseJson()</code> function is needed.</li>
|
||||
<li>Setting the <code>resizable_addLastColumn</code> widget option to <code>true</code> will add the resizable handle to the last column, see the "non-full" width table below (<span class="version">v2.9.0</span>).</li>
|
||||
</ul>
|
||||
</p>
|
||||
|
||||
<h1>Demo</h1>
|
||||
<div id="demo">
|
||||
<h3>Non-full width table <small>(individual columns resize)</small></h3>
|
||||
<table class="tablesorter" style="width:auto">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>First Name</th>
|
||||
<th>Last Name</th>
|
||||
<th class="resizable-false">Age</th>
|
||||
<th>Total</th>
|
||||
<th>Discount</th>
|
||||
<th>Date</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Peter</td>
|
||||
<td>Parker</td>
|
||||
<td>28</td>
|
||||
<td>$9.99</td>
|
||||
<td>20%</td>
|
||||
<td>Jul 6, 2006 8:14 AM</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>John</td>
|
||||
<td>Hood</td>
|
||||
<td>33</td>
|
||||
<td>$19.99</td>
|
||||
<td>25%</td>
|
||||
<td>Dec 10, 2002 5:14 AM</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Clark</td>
|
||||
<td>Kent</td>
|
||||
<td>18</td>
|
||||
<td>$15.89</td>
|
||||
<td>44%</td>
|
||||
<td>Jan 12, 2003 11:14 AM</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Bruce</td>
|
||||
<td>Almighty</td>
|
||||
<td>45</td>
|
||||
<td>$153.19</td>
|
||||
<td>44%</td>
|
||||
<td>Jan 18, 2001 9:12 AM</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Bruce</td>
|
||||
<td>Evans</td>
|
||||
<td>22</td>
|
||||
<td>$13.19</td>
|
||||
<td>11%</td>
|
||||
<td>Jan 18, 2007 9:12 AM</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<h3>Full width table <small>(use shift to force last column to resize)</small></h3>
|
||||
<table class="tablesorter">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>First Name</th>
|
||||
<th>Last Name</th>
|
||||
<th class="resizable-false">Age</th>
|
||||
<th>Total</th>
|
||||
<th>Discount</th>
|
||||
<th>Date</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Peter</td>
|
||||
<td>Parker</td>
|
||||
<td>28</td>
|
||||
<td>$9.99</td>
|
||||
<td>20%</td>
|
||||
<td>Jul 6, 2006 8:14 AM</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>John</td>
|
||||
<td>Hood</td>
|
||||
<td>33</td>
|
||||
<td>$19.99</td>
|
||||
<td>25%</td>
|
||||
<td>Dec 10, 2002 5:14 AM</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Clark</td>
|
||||
<td>Kent</td>
|
||||
<td>18</td>
|
||||
<td>$15.89</td>
|
||||
<td>44%</td>
|
||||
<td>Jan 12, 2003 11:14 AM</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Bruce</td>
|
||||
<td>Almighty</td>
|
||||
<td>45</td>
|
||||
<td>$153.19</td>
|
||||
<td>44%</td>
|
||||
<td>Jan 18, 2001 9:12 AM</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Bruce</td>
|
||||
<td>Evans</td>
|
||||
<td>22</td>
|
||||
<td>$13.19</td>
|
||||
<td>11%</td>
|
||||
<td>Jan 18, 2007 9:12 AM</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<h1>Page Header</h1>
|
||||
<div>
|
||||
<pre class="prettyprint lang-html"><!-- blue theme stylesheet with additional css styles added in v2.0.17 -->
|
||||
<link rel="stylesheet" href="../css/theme.blue.css">
|
||||
<!-- tablesorter plugin -->
|
||||
<script src="../js/jquery.tablesorter.js"></script>
|
||||
|
||||
<!-- tablesorter widget file - loaded after the plugin -->
|
||||
<script src="../js/jquery.tablesorter.widgets.js"></script></pre>
|
||||
</div>
|
||||
|
||||
<h1>Javascript</h1>
|
||||
<div id="javascript">
|
||||
<pre class="prettyprint lang-javascript"></pre>
|
||||
</div>
|
||||
|
||||
<h1>HTML</h1>
|
||||
<div>
|
||||
<pre class="prettyprint lang-html"><!-- The Age column is set to not be resizable -->
|
||||
<table class="tablesorter" style="width:auto">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>First Name</th>
|
||||
<th>Last Name</th>
|
||||
<th class="resizable-false">Age</th>
|
||||
<th>Total</th>
|
||||
<th>Discount</th>
|
||||
<th>Date</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
...
|
||||
</tbody>
|
||||
</table></pre>
|
||||
</div>
|
||||
|
||||
<div class="next-up">
|
||||
<hr />
|
||||
Next up: <a href="example-widget-savesort.html">Applying the save sort widget ››</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
196
assets/vendor/tablesorter/docs/example-widget-savesort.html
vendored
Normal file
196
assets/vendor/tablesorter/docs/example-widget-savesort.html
vendored
Normal file
@@ -0,0 +1,196 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery plugin: Tablesorter 2.0 - Save Sort Widget</title>
|
||||
|
||||
<!-- jQuery -->
|
||||
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
|
||||
|
||||
<!-- Demo stuff -->
|
||||
<link rel="stylesheet" href="css/jq.css">
|
||||
<link href="css/prettify.css" rel="stylesheet">
|
||||
<script src="js/prettify.js"></script>
|
||||
<script src="js/docs.js"></script>
|
||||
|
||||
<!-- Tablesorter: required -->
|
||||
<link rel="stylesheet" href="../css/theme.blue.css">
|
||||
<script src="../js/jquery.tablesorter.js"></script>
|
||||
<script src="../js/jquery.tablesorter.widgets.js"></script>
|
||||
<script src="../js/parsers/parser-ignore-articles.js"></script>
|
||||
|
||||
<script id="js">$(function() {
|
||||
|
||||
// call the tablesorter plugin
|
||||
$("table").tablesorter({
|
||||
theme: 'blue',
|
||||
|
||||
// use save sort widget
|
||||
widgets: ["saveSort", "zebra"]
|
||||
|
||||
});
|
||||
|
||||
$('button').click(function(){
|
||||
$('table')
|
||||
.trigger('saveSortReset') // clear saved sort
|
||||
.trigger("sortReset"); // reset current table sort
|
||||
return false;
|
||||
});
|
||||
|
||||
});</script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="banner">
|
||||
<h1>table<em>sorter</em></h1>
|
||||
<h2>Save Sort Widget</h2>
|
||||
<h3>Flexible client-side table sorting</h3>
|
||||
<a href="index.html">Back to documentation</a>
|
||||
</div>
|
||||
<div id="main">
|
||||
|
||||
<p class="tip">
|
||||
<em>NOTE!</em>
|
||||
<ul>
|
||||
<li>As of tablesorter version 2.9+, this widget can no longer be applied to versions of tablesorter prior to version 2.8.</li>
|
||||
<li>Sort one or more columns, then reload the page to see that this widget remembers the last table sort.</li>
|
||||
<li>Sort saving requires the new "$.tablesorter.storage()" function included with the "jquery.tablesorter.widgets.js" file (v2.1).</li>
|
||||
<li>Because this widget uses jQuery's <code>parseJson()</code> function, it requires jQuery version 1.4.1+.</li>
|
||||
<li>Added a <code>saveSortReset</code> method which only clears the stored information (v2.7.11).</li>
|
||||
</ul>
|
||||
</p>
|
||||
|
||||
<h1>Demo</h1>
|
||||
<div id="demo"><button type="button">Reset Sort</button>
|
||||
<br>
|
||||
<table class="tablesorter">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Account #</th>
|
||||
<th>First Name</th>
|
||||
<th>Last Name</th>
|
||||
<th>Age</th>
|
||||
<th>Total</th>
|
||||
<th>Discount</th>
|
||||
<th>Diff</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>A43</td>
|
||||
<td>Peter</td>
|
||||
<td>Parker</td>
|
||||
<td>28</td>
|
||||
<td>9.99</td>
|
||||
<td>20.3%</td>
|
||||
<td>+3</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>A255</td>
|
||||
<td>John</td>
|
||||
<td>Hood</td>
|
||||
<td>33</td>
|
||||
<td>19.99</td>
|
||||
<td>25.1%</td>
|
||||
<td>-7</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>A33</td>
|
||||
<td>Clark</td>
|
||||
<td>Kent</td>
|
||||
<td>18</td>
|
||||
<td>15.89</td>
|
||||
<td>44.2%</td>
|
||||
<td>-15</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>A1</td>
|
||||
<td>Bruce</td>
|
||||
<td>Almighty</td>
|
||||
<td>45</td>
|
||||
<td>153.19</td>
|
||||
<td>44%</td>
|
||||
<td>+19</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>A102</td>
|
||||
<td>Bruce</td>
|
||||
<td>Evans</td>
|
||||
<td>56</td>
|
||||
<td>153.19</td>
|
||||
<td>23%</td>
|
||||
<td>+9</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<!-- IMDB top 5 movies (3/2012) -->
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Rank</th>
|
||||
<th>Rating</th>
|
||||
<th class="sorter-ignoreArticles">Title</th>
|
||||
<th>Votes</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>1.</td>
|
||||
<td>9.2</td>
|
||||
<td><a href="http://www.imdb.com/title/tt0111161/">The Shawshank Redemption</a> (1994)</td>
|
||||
<td>734,327</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2.</td>
|
||||
<td>9.2</td>
|
||||
<td><a href="http://www.imdb.com/title/tt0068646/">The Godfather</a> (1972)</td>
|
||||
<td>548,857</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>3.</td>
|
||||
<td>9.0</td>
|
||||
<td><a href="http://www.imdb.com/title/tt0071562/">The Godfather: Part II</a> (1974)</td>
|
||||
<td>346,072</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>4.</td>
|
||||
<td>8.9</td>
|
||||
<td><a href="http://www.imdb.com/title/tt0110912/">Pulp Fiction</a> (1994)</td>
|
||||
<td>577,426</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>5.</td>
|
||||
<td>8.9</td>
|
||||
<td><a href="http://www.imdb.com/title/tt0060196/">The Good, the Bad and the Ugly</a> (1966)</td>
|
||||
<td>229,564</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table></div>
|
||||
|
||||
<h1>Page Header</h1>
|
||||
<div>
|
||||
<pre class="prettyprint lang-html">
|
||||
<link rel="stylesheet" href="css/blue/style.css">
|
||||
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
|
||||
<script src="js/jquery.tablesorter.min.js"></script>
|
||||
<script src="js/jquery.tablesorter.widgets.min.js"></script></pre>
|
||||
</div>
|
||||
<h1>Javascript</h1>
|
||||
<div id="javascript">
|
||||
<pre class="prettyprint lang-javascript"></pre>
|
||||
</div>
|
||||
<h1>HTML</h1>
|
||||
<div id="html">
|
||||
<pre class="prettyprint lang-html"></pre>
|
||||
</div>
|
||||
|
||||
<div class="next-up">
|
||||
<hr />
|
||||
Next up: <a href="example-widget-sticky-header.html">Applying the sticky header widget ››</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
227
assets/vendor/tablesorter/docs/example-widget-scroller.html
vendored
Normal file
227
assets/vendor/tablesorter/docs/example-widget-scroller.html
vendored
Normal file
@@ -0,0 +1,227 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery plugin: Tablesorter 2.0 - Scroller Widget</title>
|
||||
|
||||
<!-- jQuery -->
|
||||
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.js"></script>
|
||||
|
||||
<!-- Demo stuff -->
|
||||
<link rel="stylesheet" href="css/jq.css">
|
||||
<link href="css/prettify.css" rel="stylesheet">
|
||||
<script src="js/prettify.js"></script>
|
||||
<script src="js/docs.js"></script>
|
||||
|
||||
<!-- Tablesorter: theme -->
|
||||
<link class="ui-theme" rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/cupertino/jquery-ui.css">
|
||||
<link class="ui-theme" rel="stylesheet" href="../css/theme.jui.css">
|
||||
<link class="theme" rel="stylesheet" href="../css/theme.default.css">
|
||||
<link class="theme" rel="stylesheet" href="../css/theme.blue.css">
|
||||
<link class="theme" rel="stylesheet" href="../css/theme.green.css">
|
||||
<link class="theme" rel="stylesheet" href="../css/theme.grey.css">
|
||||
<link class="theme" rel="stylesheet" href="../css/theme.ice.css">
|
||||
<link class="theme" rel="stylesheet" href="../css/theme.black-ice.css">
|
||||
<link class="theme" rel="stylesheet" href="../css/theme.dark.css">
|
||||
<link class="theme" rel="stylesheet" href="../css/theme.dropbox.css">
|
||||
|
||||
<!-- Tablesorter script: required -->
|
||||
<script src="../js/jquery.tablesorter.js"></script>
|
||||
<script src="../js/jquery.tablesorter.widgets.js"></script>
|
||||
<script src="../js/widgets/widget-scroller.js"></script>
|
||||
|
||||
<script id="js">$(function(){
|
||||
|
||||
$("table").tablesorter({
|
||||
widthFixed : true,
|
||||
showProcessing: true,
|
||||
headerTemplate : '{content} {icon}',
|
||||
widgets: [ 'uitheme', 'zebra', 'filter', 'scroller' ],
|
||||
widgetOptions : {
|
||||
scroller_height : 300,
|
||||
scroller_barWidth : 17,
|
||||
scroller_jumpToHeader: true,
|
||||
scroller_idPrefix : 's_'
|
||||
}
|
||||
});
|
||||
|
||||
});</script>
|
||||
<script>
|
||||
$(function() {
|
||||
$('link.theme, link.ui-theme').each(function(){ this.disabled = true; });
|
||||
|
||||
var b = true, $tbl,
|
||||
$c = $('#case'),
|
||||
themes = 'default blue green grey ice black-ice dark dropbox',
|
||||
i, o = '', t = themes.split(' ');
|
||||
for (i = 0; i < t.length; i++) {
|
||||
o += '<option>' + t[i] + '</option>';
|
||||
}
|
||||
|
||||
$('select')
|
||||
.append(o)
|
||||
.change(function(){
|
||||
var theme = $(this).val().toLowerCase(),
|
||||
name = theme === 'jui' ? 'ui' : 'theme.' + theme,
|
||||
// ui-theme is added by the themeswitcher
|
||||
files = $('link.theme, link.ui-theme').each(function(){
|
||||
this.disabled = true;
|
||||
});
|
||||
files.filter('[href$="' + name + '.css"]').each(function(){
|
||||
this.disabled = false;
|
||||
});
|
||||
$('table')
|
||||
.removeClass('tablesorter-' + t.join(' tablesorter-') + ' tablesorter-jui')
|
||||
.addClass('tablesorter-' + theme.replace(/-/,''));
|
||||
// make sure columns align
|
||||
$(window).trigger('resize');
|
||||
}).change();
|
||||
|
||||
$tbl = $('.tablesorter-scroller-table table');
|
||||
$('button').click(function(){
|
||||
b = !b;
|
||||
$tbl.each(function(){
|
||||
this.config.widgetOptions.scroller_jumpToHeader = b;
|
||||
$c.html(b + '');
|
||||
});
|
||||
return false;
|
||||
});
|
||||
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="banner">
|
||||
<h1>table<em>sorter</em></h1>
|
||||
<h2>Scroller Widget</h2>
|
||||
<h3>Flexible client-side table sorting</h3>
|
||||
<a href="index.html">Back to documentation</a>
|
||||
</div>
|
||||
|
||||
<div id="main">
|
||||
|
||||
<p class="tip">
|
||||
<em>NOTE!</em>
|
||||
<ul>
|
||||
<li>This widget can not be applied to the original plugin and requires jQuery version 1.4+ to function properly; if you need to make it work with older versions of jQuery and the plugin, please use <a href="http://tconnell.com/samples/scroller/">this version</a> of the widget.</li>
|
||||
<li>This widget was originally written by <a href="http://tconnell.com/samples/scroller/">Connell & Associates, Inc.</a> and is dual-licensed under the MIT and GPL licenses. It has been modified to work with tablesorter version 2.9+.</li>
|
||||
<li>Scroller widget options include:
|
||||
<ul>
|
||||
<li><code>scroller_height</code> - Set the height of the scroll window in pixels (default is <code>300</code>.</li>
|
||||
<li><code>scroller_barWidth</code> - Set the width (default is <code>17</code>) of the scroll bar in pixels. This will need to be changed if using a custom scroll bar plugin.</li>
|
||||
<li><code>scroller_idPrefix</code> - This option contains a prefix string which is added to a random number. This id is then assigned to the wrapping scroll element. Modification is not necessary unless the prefix interferes with ID's already on your page.</li>
|
||||
<li><code>scroller_jumpToHeader</code> - When <code>true</code>, this option makes the table header jump into view when the table body is not scolled to the top and while scrolling up the page. It's not perfect, but it works. Disable it as desired.<br>
|
||||
<span class="remark">*</span> <em>To see the difference, toggle the button in the demo below, then scroll down & up the page using a mouse wheel with the cursor at the horizontal center of the page and about 100 pixels from the top, so the cursor is within the table body.</em></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</p>
|
||||
|
||||
<h1>Javascript</h1>
|
||||
<div id="javascript">
|
||||
<pre class="prettyprint lang-javascript"></pre>
|
||||
</div>
|
||||
|
||||
<h1>Demo</h1>
|
||||
Choose Theme:
|
||||
<select>
|
||||
<option value="jui">Jquery UI</option>
|
||||
</select><br>
|
||||
<br>
|
||||
<button type="button">Toggle</button> scroller_jumpToHeader : <span id="case">true</span> (see the note above)<span class="remark">*</span>
|
||||
<br>
|
||||
|
||||
<table class="tablesorter">
|
||||
<thead>
|
||||
<tr><th>Name</th><th>Major</th><th>Sex</th><th>English</th><th>Japanese</th><th>Calculus</th><th class="filter-false sorter-false">Geometry</th></tr>
|
||||
</thead>
|
||||
<tfoot>
|
||||
<tr><th>Name</th><th>Major</th><th>Sex</th><th>English</th><th>Japanese</th><th>Calculus</th><th>Geometry</th></tr>
|
||||
</tfoot>
|
||||
<tbody>
|
||||
<tr><td>Student01</td><td>Languages</td><td>male</td><td>80</td><td>70</td><td>75</td><td>80</td></tr>
|
||||
<tr><td>Student02</td><td>Mathematics</td><td>male</td><td>90</td><td>88</td><td>100</td><td>90</td></tr>
|
||||
<tr><td>Student03</td><td>Languages</td><td>female</td><td>85</td><td>95</td><td>80</td><td>85</td></tr>
|
||||
<tr><td>Student04</td><td>Languages</td><td>male</td><td>60</td><td>55</td><td>100</td><td>100</td></tr>
|
||||
<tr><td>Student05</td><td>Languages</td><td>female</td><td>68</td><td>80</td><td>95</td><td>80</td></tr>
|
||||
<tr><td>Student06</td><td>Mathematics</td><td>male</td><td>100</td><td>99</td><td>100</td><td>90</td></tr>
|
||||
<tr><td>Student07</td><td>Mathematics</td><td>male</td><td>85</td><td>68</td><td>90</td><td>90</td></tr>
|
||||
<tr><td>Student08</td><td>Languages</td><td>male</td><td>100</td><td>90</td><td>90</td><td>85</td></tr>
|
||||
<tr><td>Student09</td><td>Mathematics</td><td>male</td><td>80</td><td>50</td><td>65</td><td>75</td></tr>
|
||||
<tr><td>Student10</td><td>Languages</td><td>male</td><td>85</td><td>100</td><td>100</td><td>90</td></tr>
|
||||
<tr><td>Student11</td><td>Languages</td><td>male</td><td>86</td><td>85</td><td>100</td><td>100</td></tr>
|
||||
<tr><td>Student12</td><td>Mathematics</td><td>female</td><td>100</td><td>75</td><td>70</td><td>85</td></tr>
|
||||
<tr><td>Student13</td><td>Languages</td><td>female</td><td>100</td><td>80</td><td>100</td><td>90</td></tr>
|
||||
<tr><td>Student14</td><td>Languages</td><td>female</td><td>50</td><td>45</td><td>55</td><td>90</td></tr>
|
||||
<tr><td>Student15</td><td>Languages</td><td>male</td><td>95</td><td>35</td><td>100</td><td>90</td></tr>
|
||||
<tr><td>Student16</td><td>Languages</td><td>female</td><td>100</td><td>50</td><td>30</td><td>70</td></tr>
|
||||
<tr><td>Student17</td><td>Languages</td><td>female</td><td>80</td><td>100</td><td>55</td><td>65</td></tr>
|
||||
<tr><td>Student18</td><td>Mathematics</td><td>male</td><td>30</td><td>49</td><td>55</td><td>75</td></tr>
|
||||
<tr><td>Student19</td><td>Languages</td><td>male</td><td>68</td><td>90</td><td>88</td><td>70</td></tr>
|
||||
<tr><td>Student20</td><td>Mathematics</td><td>male</td><td>40</td><td>45</td><td>40</td><td>80</td></tr>
|
||||
<tr><td>Student21</td><td>Languages</td><td>male</td><td>50</td><td>45</td><td>100</td><td>100</td></tr>
|
||||
<tr><td>Student22</td><td>Mathematics</td><td>male</td><td>100</td><td>99</td><td>100</td><td>90</td></tr>
|
||||
<tr><td>Student23</td><td>Languages</td><td>female</td><td>85</td><td>80</td><td>80</td><td>80</td></tr>
|
||||
<tr><td>student23</td><td>Mathematics</td><td>male</td><td>82</td><td>77</td><td>0</td><td>79</td></tr>
|
||||
<tr><td>student24</td><td>Languages</td><td>female</td><td>100</td><td>91</td><td>13</td><td>82</td></tr>
|
||||
<tr><td>student25</td><td>Mathematics</td><td>male</td><td>22</td><td>96</td><td>82</td><td>53</td></tr>
|
||||
<tr><td>student26</td><td>Languages</td><td>female</td><td>37</td><td>29</td><td>56</td><td>59</td></tr>
|
||||
<tr><td>student27</td><td>Mathematics</td><td>male</td><td>86</td><td>82</td><td>69</td><td>23</td></tr>
|
||||
<tr><td>student28</td><td>Languages</td><td>female</td><td>44</td><td>25</td><td>43</td><td>1</td></tr>
|
||||
<tr><td>student29</td><td>Mathematics</td><td>male</td><td>77</td><td>47</td><td>22</td><td>38</td></tr>
|
||||
<tr><td>student30</td><td>Languages</td><td>female</td><td>19</td><td>35</td><td>23</td><td>10</td></tr>
|
||||
<tr><td>student31</td><td>Mathematics</td><td>male</td><td>90</td><td>27</td><td>17</td><td>50</td></tr>
|
||||
<tr><td>student32</td><td>Languages</td><td>female</td><td>60</td><td>75</td><td>33</td><td>38</td></tr>
|
||||
<tr><td>student33</td><td>Mathematics</td><td>male</td><td>4</td><td>31</td><td>37</td><td>15</td></tr>
|
||||
<tr><td>student34</td><td>Languages</td><td>female</td><td>77</td><td>97</td><td>81</td><td>44</td></tr>
|
||||
<tr><td>student35</td><td>Mathematics</td><td>male</td><td>5</td><td>81</td><td>51</td><td>95</td></tr>
|
||||
<tr><td>student36</td><td>Languages</td><td>female</td><td>70</td><td>61</td><td>70</td><td>94</td></tr>
|
||||
<tr><td>student37</td><td>Mathematics</td><td>male</td><td>60</td><td>3</td><td>61</td><td>84</td></tr>
|
||||
<tr><td>student38</td><td>Languages</td><td>female</td><td>63</td><td>39</td><td>0</td><td>11</td></tr>
|
||||
<tr><td>student39</td><td>Mathematics</td><td>male</td><td>50</td><td>46</td><td>32</td><td>38</td></tr>
|
||||
<tr><td>student40</td><td>Languages</td><td>female</td><td>51</td><td>75</td><td>25</td><td>3</td></tr>
|
||||
<tr><td>student41</td><td>Mathematics</td><td>male</td><td>43</td><td>34</td><td>28</td><td>78</td></tr>
|
||||
<tr><td>student42</td><td>Languages</td><td>female</td><td>11</td><td>89</td><td>60</td><td>95</td></tr>
|
||||
<tr><td>student43</td><td>Mathematics</td><td>male</td><td>48</td><td>92</td><td>18</td><td>88</td></tr>
|
||||
<tr><td>student44</td><td>Languages</td><td>female</td><td>82</td><td>2</td><td>59</td><td>73</td></tr>
|
||||
<tr><td>student45</td><td>Mathematics</td><td>male</td><td>91</td><td>73</td><td>37</td><td>39</td></tr>
|
||||
<tr><td>student46</td><td>Languages</td><td>female</td><td>4</td><td>8</td><td>12</td><td>10</td></tr>
|
||||
<tr><td>student47</td><td>Mathematics</td><td>male</td><td>89</td><td>10</td><td>6</td><td>11</td></tr>
|
||||
<tr><td>student48</td><td>Languages</td><td>female</td><td>90</td><td>32</td><td>21</td><td>18</td></tr>
|
||||
<tr><td>student49</td><td>Mathematics</td><td>male</td><td>42</td><td>49</td><td>49</td><td>72</td></tr>
|
||||
<tr><td>student50</td><td>Languages</td><td>female</td><td>56</td><td>37</td><td>67</td><td>54</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<div class="narrow-block">
|
||||
<table class="tablesorter">
|
||||
<thead>
|
||||
<tr><th>Account #</th><th>First Name</th><th>Last Name</th><th>Age</th><th>Total</th><th>Discount</th><th>Diff</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>A43</td><td>Peter</td><td>Parker</td><td>28</td><td>9.99</td><td>20.3%</td><td>+3</td></tr>
|
||||
<tr><td>A255</td><td>John</td><td>Hood</td><td>33</td><td>19.99</td><td>25.1%</td><td>-7</td></tr>
|
||||
<tr><td>A33</td><td>Clark</td><td>Kent</td><td>18</td><td>15.49</td><td>44.2%</td><td>-13</td></tr>
|
||||
<tr><td>A11</td><td>Bruce</td><td>Almighty</td><td>45</td><td>153.19</td><td>44%</td><td>+19</td></tr>
|
||||
<tr><td>A102</td><td>Bruce</td><td>Evans</td><td>56</td><td>153.19</td><td>23%</td><td>+9</td></tr>
|
||||
<tr><td>A23</td><td>Mike</td><td>Peters</td><td>22</td><td>5.69</td><td>20.3%</td><td>+2</td></tr>
|
||||
<tr><td>A55</td><td>Leslie</td><td>Kent</td><td>33</td><td>15.99</td><td>25.1%</td><td>-3</td></tr>
|
||||
<tr><td>A3</td><td>Frank</td><td>Mint</td><td>44</td><td>12.59</td><td>44.2%</td><td>-12</td></tr>
|
||||
<tr><td>A21</td><td>Joe</td><td>Thomas</td><td>45</td><td>15.25</td><td>44%</td><td>+12</td></tr>
|
||||
<tr><td>A12</td><td>Tess</td><td>Evans</td><td>66</td><td>13.59</td><td>23%</td><td>+4</td></tr>
|
||||
<tr><td>A21</td><td>Peter</td><td>Dunn</td><td>12</td><td>2.99</td><td>21.1%</td><td>+2</td></tr>
|
||||
<tr><td>A33</td><td>Harry</td><td>Jones</td><td>13</td><td>19.49</td><td>22.2%</td><td>-6</td></tr>
|
||||
<tr><td>A13</td><td>John</td><td>James</td><td>16</td><td>13.89</td><td>42.1%</td><td>-13</td></tr>
|
||||
<tr><td>A71</td><td>Nick</td><td>Parker</td><td>45</td><td>13.89</td><td>44%</td><td>+29</td></tr>
|
||||
<tr><td>A21</td><td>Charles</td><td>Dunn</td><td>19</td><td>15.49</td><td>22%</td><td>+3</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div class="spacer"></div>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
266
assets/vendor/tablesorter/docs/example-widget-sticky-header.html
vendored
Normal file
266
assets/vendor/tablesorter/docs/example-widget-sticky-header.html
vendored
Normal file
@@ -0,0 +1,266 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery plugin: Tablesorter 2.0 - Sticky Header Widget</title>
|
||||
|
||||
<!-- jQuery -->
|
||||
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.js"></script>
|
||||
|
||||
<!-- Demo stuff -->
|
||||
<link rel="stylesheet" href="css/jq.css">
|
||||
<link href="css/prettify.css" rel="stylesheet">
|
||||
<script src="js/prettify.js"></script>
|
||||
<script src="js/docs.js"></script>
|
||||
|
||||
<!-- Tablesorter: theme -->
|
||||
<link class="ui-theme" rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/cupertino/jquery-ui.css">
|
||||
<link class="ui-theme" rel="stylesheet" href="../css/theme.jui.css">
|
||||
<link class="theme" rel="stylesheet" href="../css/theme.default.css">
|
||||
<link class="theme" rel="stylesheet" href="../css/theme.blue.css">
|
||||
<link class="theme" rel="stylesheet" href="../css/theme.green.css">
|
||||
<link class="theme" rel="stylesheet" href="../css/theme.grey.css">
|
||||
<link class="theme" rel="stylesheet" href="../css/theme.ice.css">
|
||||
<link class="theme" rel="stylesheet" href="../css/theme.black-ice.css">
|
||||
<link class="theme" rel="stylesheet" href="../css/theme.dark.css">
|
||||
<link class="theme" rel="stylesheet" href="../css/theme.dropbox.css">
|
||||
|
||||
<style id="css">/* wrapper of table 2 */
|
||||
.wrapper {
|
||||
position: relative;
|
||||
padding: 0 5px;
|
||||
height: 250px;
|
||||
overflow-y: auto;
|
||||
}</style>
|
||||
|
||||
<!-- Tablesorter script: required -->
|
||||
<script src="../js/jquery.tablesorter.js"></script>
|
||||
<script src="../js/jquery.tablesorter.widgets.js"></script>
|
||||
|
||||
<script id="js">$(function(){
|
||||
|
||||
var options = {
|
||||
widthFixed : true,
|
||||
showProcessing: true,
|
||||
headerTemplate : '{content} {icon}', // Add icon for jui theme; new in v2.7!
|
||||
|
||||
widgets: [ 'uitheme', 'zebra', 'stickyHeaders', 'filter' ],
|
||||
|
||||
widgetOptions: {
|
||||
|
||||
// extra class name added to the sticky header row
|
||||
stickyHeaders : '',
|
||||
// number or jquery selector targeting the position:fixed element
|
||||
stickyHeaders_offset : 0,
|
||||
// added to table ID, if it exists
|
||||
stickyHeaders_cloneId : '-sticky',
|
||||
// trigger "resize" event on headers
|
||||
stickyHeaders_addResizeEvent : true,
|
||||
// if false and a caption exist, it won't be included in the sticky header
|
||||
stickyHeaders_includeCaption : true,
|
||||
// The zIndex of the stickyHeaders, allows the user to adjust this to their needs
|
||||
stickyHeaders_zIndex : 2,
|
||||
// jQuery selector or object to attach sticky header to
|
||||
stickyHeaders_attachTo : null,
|
||||
|
||||
// adding zebra striping, using content and default styles - the ui css removes the background from default
|
||||
// even and odd class names included for this demo to allow switching themes
|
||||
zebra : ["ui-widget-content even", "ui-state-default odd"],
|
||||
// use uitheme widget to apply defauly jquery ui (jui) class names
|
||||
// see the uitheme demo for more details on how to change the class names
|
||||
uitheme : 'jui'
|
||||
}
|
||||
};
|
||||
|
||||
$("#table1").tablesorter(options);
|
||||
|
||||
/* make second table scroll within its wrapper */
|
||||
options.widgetOptions.stickyHeaders_attachTo = '.wrapper'; // or $('.wrapper')
|
||||
$("#table2").tablesorter(options);
|
||||
|
||||
});</script>
|
||||
<script>
|
||||
$(function() {
|
||||
$('link.theme, link.ui-theme').each(function(){ this.disabled = true; });
|
||||
|
||||
var themes = 'default blue green grey ice black-ice dark dropbox',
|
||||
i, o = '', t = themes.split(' ');
|
||||
for (i = 0; i < t.length; i++) {
|
||||
o += '<option>' + t[i] + '</option>';
|
||||
}
|
||||
|
||||
$('select:first')
|
||||
.append(o)
|
||||
.change(function(){
|
||||
var theme = $(this).val().toLowerCase(),
|
||||
name = theme === 'jui' ? 'ui' : 'theme.' + theme,
|
||||
// ui-theme is added by the themeswitcher
|
||||
files = $('link.theme, link.ui-theme').each(function(){
|
||||
this.disabled = true;
|
||||
})
|
||||
files.filter('[href$="' + name + '.css"]').each(function(){
|
||||
this.disabled = false;
|
||||
});
|
||||
$('table')
|
||||
.removeClass('tablesorter-' + t.join(' tablesorter-') + ' tablesorter-jui')
|
||||
.addClass('tablesorter-' + theme.replace(/-/,''));
|
||||
}).change();
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="banner">
|
||||
<h1>table<em>sorter</em></h1>
|
||||
<h2>Sticky Header Widget</h2>
|
||||
<h3>Flexible client-side table sorting</h3>
|
||||
<a href="index.html">Back to documentation</a>
|
||||
</div>
|
||||
|
||||
<div id="main">
|
||||
|
||||
<p class="tip">
|
||||
<em>NOTE!</em>
|
||||
<ul>
|
||||
<li>As of tablesorter version 2.9+, this widget can no longer be applied to versions of tablesorter prior to version 2.8.</li>
|
||||
<li>Added <code>cssStickyHeaders_attachTo</code> option (default set to <code>null</code>) in <span class="version">v2.14.4</span>.
|
||||
<ul>
|
||||
<li>Setting this option with either a jQuery selector string (<code>".wrapper"</code>) or jQuery object (<code>$(".wrapper")</code>).</li>
|
||||
<li>This option contains the target to which the sticky header will attach - see the <a href="#table2">second example</a> below.</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>Added a widget option named <code>stickyHeaders_cloneId</code> (<span class="version">v2.9</span>)
|
||||
<ul>
|
||||
<li>It contains a suffix to add to any table id.</li>
|
||||
<li>Its default value is <code>-sticky</code> </li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>To access the added sticky table content from your code without worrying about using the ID, you can use <code>table.config.widgetOptions.$sticky</code>.</li>
|
||||
<li>Table captions and any additional rows (filter widget row) will also be included in the sticky header (<span class="version">v2.9</span>).</li>
|
||||
<li>You will need to modify the <code>headerTemplate</code> option to include the jQuery UI icon! See the example in the code (v2.7).</li>
|
||||
<li>Scroll down the page to see the headers stick. Then sort the columns using the sticky headers!</li>
|
||||
<li>Added a widget option named <code>stickyHeaders</code> option which contains the css class name applied to the actual sticky header (v2.1). Modified in <span class="version">v2.11</span> so that "tablesorter-stickyHeader" class is always added and this option only adds additional classes.</li>
|
||||
<li>Multiple rows in the header will become sticky (v2.1.17).</li>
|
||||
<li>The filter widget adds a row to the table header, but that row will not be included in the sticky header.</li>
|
||||
<li>Add the class name <code>sticky-false</code> to any header rows you don't want to become sticky (v2.1.18).</li>
|
||||
<li>Because of the limitations of Internet Explorer version 7 and older, this widget will not work.</li>
|
||||
</ul>
|
||||
</p>
|
||||
|
||||
<h1>CSS</h1>
|
||||
<div id="css">
|
||||
<pre class="prettyprint lang-css"></pre>
|
||||
</div>
|
||||
|
||||
<h1>Javascript</h1>
|
||||
<div id="javascript">
|
||||
<pre class="prettyprint lang-javascript"></pre>
|
||||
</div>
|
||||
|
||||
<h1>Demo</h1>
|
||||
Choose Theme:
|
||||
<select>
|
||||
<option value="jui">Jquery UI</option>
|
||||
</select>
|
||||
<br><br>
|
||||
|
||||
<table id="table1" class="tablesorter">
|
||||
<caption>Student Grades</caption>
|
||||
<thead>
|
||||
<tr><th>Name</th><th>Major</th><th>Sex</th><th>English</th><th>Japanese</th><th>Calculus</th><th class="filter-false sorter-false">Geometry</th></tr>
|
||||
</thead>
|
||||
<tfoot>
|
||||
<tr><th>Name</th><th>Major</th><th>Sex</th><th>English</th><th>Japanese</th><th>Calculus</th><th>Geometry</th></tr>
|
||||
</tfoot>
|
||||
<tbody>
|
||||
<tr><td>Student01</td><td>Languages</td><td>male</td><td>80</td><td>70</td><td>75</td><td>80</td></tr>
|
||||
<tr><td>Student02</td><td>Mathematics</td><td>male</td><td>90</td><td>88</td><td>100</td><td>90</td></tr>
|
||||
<tr><td>Student03</td><td>Languages</td><td>female</td><td>85</td><td>95</td><td>80</td><td>85</td></tr>
|
||||
<tr><td>Student04</td><td>Languages</td><td>male</td><td>60</td><td>55</td><td>100</td><td>100</td></tr>
|
||||
<tr><td>Student05</td><td>Languages</td><td>female</td><td>68</td><td>80</td><td>95</td><td>80</td></tr>
|
||||
<tr><td>Student06</td><td>Mathematics</td><td>male</td><td>100</td><td>99</td><td>100</td><td>90</td></tr>
|
||||
<tr><td>Student07</td><td>Mathematics</td><td>male</td><td>85</td><td>68</td><td>90</td><td>90</td></tr>
|
||||
<tr><td>Student08</td><td>Languages</td><td>male</td><td>100</td><td>90</td><td>90</td><td>85</td></tr>
|
||||
<tr><td>Student09</td><td>Mathematics</td><td>male</td><td>80</td><td>50</td><td>65</td><td>75</td></tr>
|
||||
<tr><td>Student10</td><td>Languages</td><td>male</td><td>85</td><td>100</td><td>100</td><td>90</td></tr>
|
||||
<tr><td>Student11</td><td>Languages</td><td>male</td><td>86</td><td>85</td><td>100</td><td>100</td></tr>
|
||||
<tr><td>Student12</td><td>Mathematics</td><td>female</td><td>100</td><td>75</td><td>70</td><td>85</td></tr>
|
||||
<tr><td>Student13</td><td>Languages</td><td>female</td><td>100</td><td>80</td><td>100</td><td>90</td></tr>
|
||||
<tr><td>Student14</td><td>Languages</td><td>female</td><td>50</td><td>45</td><td>55</td><td>90</td></tr>
|
||||
<tr><td>Student15</td><td>Languages</td><td>male</td><td>95</td><td>35</td><td>100</td><td>90</td></tr>
|
||||
<tr><td>Student16</td><td>Languages</td><td>female</td><td>100</td><td>50</td><td>30</td><td>70</td></tr>
|
||||
<tr><td>Student17</td><td>Languages</td><td>female</td><td>80</td><td>100</td><td>55</td><td>65</td></tr>
|
||||
<tr><td>Student18</td><td>Mathematics</td><td>male</td><td>30</td><td>49</td><td>55</td><td>75</td></tr>
|
||||
<tr><td>Student19</td><td>Languages</td><td>male</td><td>68</td><td>90</td><td>88</td><td>70</td></tr>
|
||||
<tr><td>Student20</td><td>Mathematics</td><td>male</td><td>40</td><td>45</td><td>40</td><td>80</td></tr>
|
||||
<tr><td>Student21</td><td>Languages</td><td>male</td><td>50</td><td>45</td><td>100</td><td>100</td></tr>
|
||||
<tr><td>Student22</td><td>Mathematics</td><td>male</td><td>100</td><td>99</td><td>100</td><td>90</td></tr>
|
||||
<tr><td>Student23</td><td>Languages</td><td>female</td><td>85</td><td>80</td><td>80</td><td>80</td></tr>
|
||||
<tr><td>student23</td><td>Mathematics</td><td>male</td><td>82</td><td>77</td><td>0</td><td>79</td></tr>
|
||||
<tr><td>student24</td><td>Languages</td><td>female</td><td>100</td><td>91</td><td>13</td><td>82</td></tr>
|
||||
<tr><td>student25</td><td>Mathematics</td><td>male</td><td>22</td><td>96</td><td>82</td><td>53</td></tr>
|
||||
<tr><td>student26</td><td>Languages</td><td>female</td><td>37</td><td>29</td><td>56</td><td>59</td></tr>
|
||||
<tr><td>student27</td><td>Mathematics</td><td>male</td><td>86</td><td>82</td><td>69</td><td>23</td></tr>
|
||||
<tr><td>student28</td><td>Languages</td><td>female</td><td>44</td><td>25</td><td>43</td><td>1</td></tr>
|
||||
<tr><td>student29</td><td>Mathematics</td><td>male</td><td>77</td><td>47</td><td>22</td><td>38</td></tr>
|
||||
<tr><td>student30</td><td>Languages</td><td>female</td><td>19</td><td>35</td><td>23</td><td>10</td></tr>
|
||||
<tr><td>student31</td><td>Mathematics</td><td>male</td><td>90</td><td>27</td><td>17</td><td>50</td></tr>
|
||||
<tr><td>student32</td><td>Languages</td><td>female</td><td>60</td><td>75</td><td>33</td><td>38</td></tr>
|
||||
<tr><td>student33</td><td>Mathematics</td><td>male</td><td>4</td><td>31</td><td>37</td><td>15</td></tr>
|
||||
<tr><td>student34</td><td>Languages</td><td>female</td><td>77</td><td>97</td><td>81</td><td>44</td></tr>
|
||||
<tr><td>student35</td><td>Mathematics</td><td>male</td><td>5</td><td>81</td><td>51</td><td>95</td></tr>
|
||||
<tr><td>student36</td><td>Languages</td><td>female</td><td>70</td><td>61</td><td>70</td><td>94</td></tr>
|
||||
<tr><td>student37</td><td>Mathematics</td><td>male</td><td>60</td><td>3</td><td>61</td><td>84</td></tr>
|
||||
<tr><td>student38</td><td>Languages</td><td>female</td><td>63</td><td>39</td><td>0</td><td>11</td></tr>
|
||||
<tr><td>student39</td><td>Mathematics</td><td>male</td><td>50</td><td>46</td><td>32</td><td>38</td></tr>
|
||||
<tr><td>student40</td><td>Languages</td><td>female</td><td>51</td><td>75</td><td>25</td><td>3</td></tr>
|
||||
<tr><td>student41</td><td>Mathematics</td><td>male</td><td>43</td><td>34</td><td>28</td><td>78</td></tr>
|
||||
<tr><td>student42</td><td>Languages</td><td>female</td><td>11</td><td>89</td><td>60</td><td>95</td></tr>
|
||||
<tr><td>student43</td><td>Mathematics</td><td>male</td><td>48</td><td>92</td><td>18</td><td>88</td></tr>
|
||||
<tr><td>student44</td><td>Languages</td><td>female</td><td>82</td><td>2</td><td>59</td><td>73</td></tr>
|
||||
<tr><td>student45</td><td>Mathematics</td><td>male</td><td>91</td><td>73</td><td>37</td><td>39</td></tr>
|
||||
<tr><td>student46</td><td>Languages</td><td>female</td><td>4</td><td>8</td><td>12</td><td>10</td></tr>
|
||||
<tr><td>student47</td><td>Mathematics</td><td>male</td><td>89</td><td>10</td><td>6</td><td>11</td></tr>
|
||||
<tr><td>student48</td><td>Languages</td><td>female</td><td>90</td><td>32</td><td>21</td><td>18</td></tr>
|
||||
<tr><td>student49</td><td>Mathematics</td><td>male</td><td>42</td><td>49</td><td>49</td><td>72</td></tr>
|
||||
<tr><td>student50</td><td>Languages</td><td>female</td><td>56</td><td>37</td><td>67</td><td>54</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<div class="narrow-block wrapper">
|
||||
<table id="table2" class="tablesorter">
|
||||
<caption>Student Grades</caption>
|
||||
<thead>
|
||||
<tr><th>Account #</th><th>First Name</th><th>Last Name</th><th>Age</th><th>Total</th><th>Discount</th><th>Diff</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>A43</td><td>Peter</td><td>Parker</td><td>28</td><td>9.99</td><td>20.3%</td><td>+3</td></tr>
|
||||
<tr><td>A255</td><td>John</td><td>Hood</td><td>33</td><td>19.99</td><td>25.1%</td><td>-7</td></tr>
|
||||
<tr><td>A33</td><td>Clark</td><td>Kent</td><td>18</td><td>15.49</td><td>44.2%</td><td>-13</td></tr>
|
||||
<tr><td>A11</td><td>Bruce</td><td>Almighty</td><td>45</td><td>153.19</td><td>44%</td><td>+19</td></tr>
|
||||
<tr><td>A102</td><td>Bruce</td><td>Evans</td><td>56</td><td>153.19</td><td>23%</td><td>+9</td></tr>
|
||||
<tr><td>A23</td><td>Mike</td><td>Peters</td><td>22</td><td>5.69</td><td>20.3%</td><td>+2</td></tr>
|
||||
<tr><td>A55</td><td>Leslie</td><td>Kent</td><td>33</td><td>15.99</td><td>25.1%</td><td>-3</td></tr>
|
||||
<tr><td>A3</td><td>Frank</td><td>Mint</td><td>44</td><td>12.59</td><td>44.2%</td><td>-12</td></tr>
|
||||
<tr><td>A21</td><td>Joe</td><td>Thomas</td><td>45</td><td>15.25</td><td>44%</td><td>+12</td></tr>
|
||||
<tr><td>A12</td><td>Tess</td><td>Evans</td><td>66</td><td>13.59</td><td>23%</td><td>+4</td></tr>
|
||||
<tr><td>A21</td><td>Peter</td><td>Dunn</td><td>12</td><td>2.99</td><td>21.1%</td><td>+2</td></tr>
|
||||
<tr><td>A33</td><td>Harry</td><td>Jones</td><td>13</td><td>19.49</td><td>22.2%</td><td>-6</td></tr>
|
||||
<tr><td>A13</td><td>John</td><td>James</td><td>16</td><td>13.89</td><td>42.1%</td><td>-13</td></tr>
|
||||
<tr><td>A71</td><td>Nick</td><td>Parker</td><td>45</td><td>13.89</td><td>44%</td><td>+29</td></tr>
|
||||
<tr><td>A21</td><td>Charles</td><td>Dunn</td><td>19</td><td>15.49</td><td>22%</td><td>+3</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div class="spacer"></div>
|
||||
<div class="next-up">
|
||||
<hr />
|
||||
Next up: <a href="example-widget-zebra.html">Zebra stripe widget ››</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
223
assets/vendor/tablesorter/docs/example-widget-ui-theme.html
vendored
Normal file
223
assets/vendor/tablesorter/docs/example-widget-ui-theme.html
vendored
Normal file
@@ -0,0 +1,223 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery plugin: Tablesorter 2.0 - jQuery UITheme Widget (jQuery UI)</title>
|
||||
|
||||
<!-- jQuery -->
|
||||
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
|
||||
|
||||
<!-- Demo stuff -->
|
||||
<link rel="stylesheet" href="css/jq.css">
|
||||
<link href="css/prettify.css" rel="stylesheet">
|
||||
<script src="js/prettify.js"></script>
|
||||
<script src="js/docs.js"></script>
|
||||
|
||||
<!-- jQuery UI theme switcher: https://github.com/pontikis/jui_theme_switch/ -->
|
||||
<style>
|
||||
.switcher_container { padding: 5px; }
|
||||
.switcher_list { padding: 2px; }
|
||||
.switcher_label { margin-right: 5px; }
|
||||
</style>
|
||||
<script src="js/jquery.jui_theme_switch.min.js"></script>
|
||||
|
||||
<!-- Tablesorter: required; also include any of the jQuery UI themes -->
|
||||
<link id="ui-theme" rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/cupertino/jquery-ui.css">
|
||||
<link href="../css/theme.jui.css" rel="stylesheet">
|
||||
|
||||
<script src="../js/jquery.tablesorter.js"></script>
|
||||
<script src="../js/jquery.tablesorter.widgets.js"></script>
|
||||
|
||||
<!-- Tablesorter: optional -->
|
||||
<!-- <script src="../addons/pager/jquery.tablesorter.pager.js"></script> -->
|
||||
|
||||
<script id="js">$(function() {
|
||||
|
||||
// Extend the themes to change any of the default class names ** NEW **
|
||||
$.extend($.tablesorter.themes.jui, {
|
||||
// change default jQuery uitheme icons - find the full list of icons here: http://jqueryui.com/themeroller/ (hover over them for their name)
|
||||
table : 'ui-widget ui-widget-content ui-corner-all', // table classes
|
||||
caption : 'ui-widget-content ui-corner-all',
|
||||
header : 'ui-widget-header ui-corner-all ui-state-default', // header classes
|
||||
footerRow : '',
|
||||
footerCells: '',
|
||||
icons : 'ui-icon', // icon class added to the <i> in the header
|
||||
sortNone : 'ui-icon-carat-2-n-s',
|
||||
sortAsc : 'ui-icon-carat-1-n',
|
||||
sortDesc : 'ui-icon-carat-1-s',
|
||||
active : 'ui-state-active', // applied when column is sorted
|
||||
hover : 'ui-state-hover', // hover class
|
||||
filterRow : '',
|
||||
even : 'ui-widget-content', // odd row zebra striping
|
||||
odd : 'ui-state-default' // even row zebra striping
|
||||
});
|
||||
|
||||
// call the tablesorter plugin and apply the ui theme widget
|
||||
$("table").tablesorter({
|
||||
|
||||
theme : 'jui', // theme "jui" and "bootstrap" override the uitheme widget option in v2.7+
|
||||
|
||||
headerTemplate : '{content} {icon}', // needed to add icon for jui theme
|
||||
|
||||
// widget code now contained in the jquery.tablesorter.widgets.js file
|
||||
widgets : ['uitheme', 'zebra'],
|
||||
|
||||
widgetOptions : {
|
||||
// zebra striping class names - the uitheme widget adds the class names defined in
|
||||
// $.tablesorter.themes to the zebra widget class names
|
||||
zebra : ["even", "odd"],
|
||||
|
||||
// set the uitheme widget to use the jQuery UI theme class names
|
||||
// ** this is now optional, and will be overridden if the theme name exists in $.tablesorter.themes **
|
||||
// uitheme : 'jui'
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
});</script>
|
||||
|
||||
<script>
|
||||
$(function(){
|
||||
$('#switcher').jui_theme_switch({
|
||||
stylesheet_link_id : 'ui-theme',
|
||||
datasource_url : 'assets/theme_switcher.json'
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="banner">
|
||||
<h1>table<em>sorter</em></h1>
|
||||
<h2>jQuery UITheme Widget (jQuery UI)</h2>
|
||||
<h3>Flexible client-side table sorting</h3>
|
||||
<a href="index.html">Back to documentation</a>
|
||||
</div>
|
||||
|
||||
<div id="main">
|
||||
|
||||
<p class="tip">
|
||||
<em>NOTE!</em>
|
||||
<ul>
|
||||
<li>As of tablesorter version 2.9+, this widget can no longer be applied to versions of tablesorter prior to version 2.8.</li>
|
||||
<li>You will need to modify the <code>headerTemplate</code> option to include the bootstrap icon! See the example in the code (v2.7).</li>
|
||||
<li>The original "widgetUitheme" option has been replaced by "widgetOptions.uitheme". See the javascript block below for more details (v2.1).</li>
|
||||
<li>In tablesorter v2.4, the <code>uitheme</code> option has changed to indicate the theme instead of an array of icons to use:
|
||||
<ul>
|
||||
<li>All theme class names are now contained within <code>$.tablesorter.themes</code> with the jQuery UI theme saved to <code>$.tablesorter.themes.jui</code></li>
|
||||
<li>The themes variable allows you to modify the class names for the table, header, sort icons, active state, hover state, filter inputs and zebra striping. See the code below on how to extend these variables.</li>
|
||||
<li>Set the <code>uitheme</code> widget option to <code>"jui"</code> to set the widget to use the jQuery UI theme. See the <a href="example-widget-bootstrap-theme.html">bootstrap demo</a> for another example.</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>Earlier widget versions required jQuery 1.4+. The UITheme widget for tablesorter 2.4+ requires jQuery 1.2.6+.</li>
|
||||
</ul>
|
||||
</p>
|
||||
|
||||
<h1>Demo</h1>
|
||||
<br>
|
||||
jQuery UI Theme:
|
||||
<div id="switcher"></div>
|
||||
<br>
|
||||
|
||||
<div id="demo"><table class="tablesorter">
|
||||
<caption>Some interesting caption</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>First Name</th>
|
||||
<th>Last Name</th>
|
||||
<th>Age</th>
|
||||
<th>Total</th>
|
||||
<th>Discount</th>
|
||||
<th>Date</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<th>First Name</th>
|
||||
<th>Last Name</th>
|
||||
<th>Age</th>
|
||||
<th>Total</th>
|
||||
<th>Discount</th>
|
||||
<th>Date</th>
|
||||
</tr>
|
||||
</tfoot>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Peter</td>
|
||||
<td>Parker</td>
|
||||
<td>28</td>
|
||||
<td>$9.99</td>
|
||||
<td>20%</td>
|
||||
<td>Jul 6, 2006 8:14 AM</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>John</td>
|
||||
<td>Hood</td>
|
||||
<td>33</td>
|
||||
<td>$19.99</td>
|
||||
<td>25%</td>
|
||||
<td>Dec 10, 2002 5:14 AM</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Clark</td>
|
||||
<td>Kent</td>
|
||||
<td>18</td>
|
||||
<td>$15.89</td>
|
||||
<td>44%</td>
|
||||
<td>Jan 12, 2003 11:14 AM</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Bruce</td>
|
||||
<td>Almighty</td>
|
||||
<td>45</td>
|
||||
<td>$153.19</td>
|
||||
<td>44%</td>
|
||||
<td>Jan 18, 2001 9:12 AM</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Bruce</td>
|
||||
<td>Evans</td>
|
||||
<td>22</td>
|
||||
<td>$13.19</td>
|
||||
<td>11%</td>
|
||||
<td>Jan 18, 2007 9:12 AM</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table></div>
|
||||
|
||||
|
||||
<h1>Page Header</h1>
|
||||
<div>
|
||||
<pre class="prettyprint lang-html"><!-- ui theme stylesheet - contents shown below -->
|
||||
<link rel="stylesheet" href="../css/theme.jui.css">
|
||||
<!-- jQuery UI theme (cupertino example here) -->
|
||||
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/cupertino/jquery-ui.css">
|
||||
|
||||
<!-- tablesorter plugin -->
|
||||
<script src="../js/jquery.tablesorter.js"></script>
|
||||
<!-- tablesorter widget file - loaded after the plugin -->
|
||||
<script src="../js/jquery.tablesorter.widgets.js"></script></pre>
|
||||
</div>
|
||||
|
||||
<h1>Javascript</h1>
|
||||
<div id="javascript">
|
||||
<pre class="prettyprint lang-javascript"></pre>
|
||||
</div>
|
||||
|
||||
<h1>HTML</h1>
|
||||
<div id="html">
|
||||
<pre class="prettyprint lang-html"></pre>
|
||||
</div>
|
||||
|
||||
<div class="next-up">
|
||||
<hr />
|
||||
Next up: <a href="example-widget-bootstrap-theme.html">UITheme widget - Bootstrap theme ››</a><br>
|
||||
Second time around: <a href="example-option-render-header.html">Modifying the Header during rendering ››</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
146
assets/vendor/tablesorter/docs/example-widget-zebra.html
vendored
Normal file
146
assets/vendor/tablesorter/docs/example-widget-zebra.html
vendored
Normal file
@@ -0,0 +1,146 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery plugin: Tablesorter 2.0 - Zebra Stripe Widget</title>
|
||||
|
||||
<!-- jQuery -->
|
||||
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
|
||||
|
||||
<!-- Demo stuff -->
|
||||
<link rel="stylesheet" href="css/jq.css">
|
||||
<link href="css/prettify.css" rel="stylesheet">
|
||||
<script src="js/prettify.js"></script>
|
||||
<script src="js/docs.js"></script>
|
||||
|
||||
<!-- Tablesorter: required -->
|
||||
<link rel="stylesheet" href="../css/theme.blue.css">
|
||||
<script src="../js/jquery.tablesorter.js"></script>
|
||||
|
||||
<!-- Tablesorter: optional -->
|
||||
<!-- <script src="../addons/pager/jquery.tablesorter.pager.js"></script> -->
|
||||
|
||||
<style id="css">/* Extra selectors needed to override the default styling */
|
||||
table.tablesorter tbody tr.normal-row td {
|
||||
background: #888;
|
||||
color: #fff;
|
||||
}
|
||||
table.tablesorter tbody tr.alt-row td {
|
||||
background: #555;
|
||||
color: #fff;
|
||||
}</style>
|
||||
|
||||
<script id="js">$(function() {
|
||||
|
||||
// call the tablesorter plugin
|
||||
$("table").tablesorter({
|
||||
theme: 'blue',
|
||||
// initialize zebra striping of the table
|
||||
widgets: ["zebra"],
|
||||
// change the default striping class names
|
||||
// updated in v2.1 to use widgetOptions.zebra = ["even", "odd"]
|
||||
// widgetZebra: { css: [ "normal-row", "alt-row" ] } still works
|
||||
widgetOptions : {
|
||||
zebra : [ "normal-row", "alt-row" ]
|
||||
}
|
||||
});
|
||||
|
||||
});</script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="banner">
|
||||
<h1>table<em>sorter</em></h1>
|
||||
<h2>Zebra Stripe Widget</h2>
|
||||
<h3>Flexible client-side table sorting</h3>
|
||||
<a href="index.html">Back to documentation</a>
|
||||
</div>
|
||||
<div id="main">
|
||||
|
||||
<p class="tip">
|
||||
<em>NOTE!</em>
|
||||
<ul>
|
||||
<li>This widget is part of the plugin, but has been modified from the original.</li>
|
||||
<li>The original "widgetZebra" option has been replaced by "widgetOptions.zebra". See the javascript block below for more details (v2.1).</li>
|
||||
<li>If the "widgetZebra" option exists, it will over-ride this newer "widgetOptions.zebra" option in order to maintain backwards compatibility.</li>
|
||||
</ul>
|
||||
</p>
|
||||
|
||||
<h1>Demo</h1>
|
||||
<div id="demo"><table class="tablesorter">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>First Name</th>
|
||||
<th>Last Name</th>
|
||||
<th>Age</th>
|
||||
<th>Total</th>
|
||||
<th>Discount</th>
|
||||
<th>Date</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Peter</td>
|
||||
<td>Parker</td>
|
||||
<td>28</td>
|
||||
<td>$9.99</td>
|
||||
<td>20%</td>
|
||||
<td>Jul 6, 2006 8:14 AM</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>John</td>
|
||||
<td>Hood</td>
|
||||
<td>33</td>
|
||||
<td>$19.99</td>
|
||||
<td>25%</td>
|
||||
<td>Dec 10, 2002 5:14 AM</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Clark</td>
|
||||
<td>Kent</td>
|
||||
<td>18</td>
|
||||
<td>$15.89</td>
|
||||
<td>44%</td>
|
||||
<td>Jan 12, 2003 11:14 AM</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Bruce</td>
|
||||
<td>Almighty</td>
|
||||
<td>45</td>
|
||||
<td>$153.19</td>
|
||||
<td>44%</td>
|
||||
<td>Jan 18, 2001 9:12 AM</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Bruce</td>
|
||||
<td>Evans</td>
|
||||
<td>22</td>
|
||||
<td>$13.19</td>
|
||||
<td>11%</td>
|
||||
<td>Jan 18, 2007 9:12 AM</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table></div>
|
||||
|
||||
<h1>Javascript</h1>
|
||||
<div id="javascript">
|
||||
<pre class="prettyprint lang-javascript"></pre>
|
||||
</div>
|
||||
<h1>CSS</h1>
|
||||
<div id="css">
|
||||
<pre class="prettyprint lang-css"></pre>
|
||||
</div>
|
||||
<h1>HTML</h1>
|
||||
<div id="html">
|
||||
<pre class="prettyprint lang-html"></pre>
|
||||
</div>
|
||||
|
||||
<div class="next-up">
|
||||
<hr />
|
||||
Next up: <a href="example-widgets.html">Widgets, writing your own ››</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
241
assets/vendor/tablesorter/docs/example-widgets.html
vendored
Normal file
241
assets/vendor/tablesorter/docs/example-widgets.html
vendored
Normal file
@@ -0,0 +1,241 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery plugin: Tablesorter 2.0 - Writing custom widgets</title>
|
||||
|
||||
<!-- jQuery -->
|
||||
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
|
||||
|
||||
<!-- Demo stuff -->
|
||||
<link rel="stylesheet" href="css/jq.css">
|
||||
<link href="css/prettify.css" rel="stylesheet">
|
||||
<script src="js/prettify.js"></script>
|
||||
<script src="js/docs.js"></script>
|
||||
|
||||
<!-- Tablesorter: required -->
|
||||
<link rel="stylesheet" href="../css/theme.blue.css">
|
||||
<script src="../js/jquery.tablesorter.js"></script>
|
||||
|
||||
<!-- Tablesorter: optional -->
|
||||
<script src="../addons/pager/jquery.tablesorter.pager.js"></script>
|
||||
|
||||
<script id="js">$(function() {
|
||||
|
||||
// add new widget called repeatHeaders
|
||||
// ************************************
|
||||
$.tablesorter.addWidget({
|
||||
|
||||
id: "repeatHeaders",
|
||||
priority: 10,
|
||||
options: {
|
||||
rowsToSkip : 4
|
||||
},
|
||||
// format is called on init and when a sorting has finished
|
||||
format: function(table, c, wo) {
|
||||
var h = '', i, $tr, l, skip;
|
||||
// cache and collect all TH headers
|
||||
if (!wo.repeatHeaders) {
|
||||
// "remove-me" class was added in case the table needs to be updated, the "remove-me" rows will be
|
||||
// removed prior to the update to prevent including the rows in the update - see "selectorRemove" option
|
||||
h = '<tr class="repeated-header remove-me">';
|
||||
$.each(c.headerContent, function(i,t) {
|
||||
// table.config.headerContent stores the original table HTML (as text), but it is the HTML before
|
||||
// the headerTemplate option is applied to each header cell; and before the `onRender` callbacks are
|
||||
// executed
|
||||
h += '<th>' + t + '</th>';
|
||||
});
|
||||
wo.repeatHeaders = h + '</tr>';
|
||||
}
|
||||
|
||||
// number of rows to skip
|
||||
skip = wo && wo.rowsToSkip || 4;
|
||||
|
||||
// remove appended headers by classname
|
||||
c.$table.find("tr.repeated-header").remove();
|
||||
$tr = c.$tbodies.find('tr');
|
||||
l = $tr.length;
|
||||
// loop all tr elements and insert a copy of the "headers"
|
||||
for (i = skip; i < l; i += skip) {
|
||||
// insert a copy of the table head every X rows
|
||||
$tr.eq(i).before(wo.repeatHeaders);
|
||||
}
|
||||
},
|
||||
// this remove function is called when using the refreshWidgets method or when destroying the tablesorter plugin
|
||||
// this function only applies to tablesorter v2.4+
|
||||
remove: function(table, c){
|
||||
c.$table.find("tr.repeated-header").remove();
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
// call the tablesorter plugin and assign widgets with id "zebra" (Default widget in the core) and the newly created "repeatHeaders"
|
||||
$("table").tablesorter({
|
||||
theme: 'blue',
|
||||
|
||||
// apply both widgets
|
||||
widgets: ['zebra', 'repeatHeaders'],
|
||||
widgetOptions : {
|
||||
rowsToSkip : 4
|
||||
}
|
||||
});
|
||||
|
||||
});</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="banner">
|
||||
<h1>table<em>sorter</em></h1>
|
||||
<h2>Writing custom widgets</h2>
|
||||
<h3>Flexible client-side table sorting</h3>
|
||||
<a href="index.html">Back to documentation</a>
|
||||
</div>
|
||||
|
||||
<div id="main">
|
||||
|
||||
<div class="tip">
|
||||
Notes about the <code>addWidget</code> template:
|
||||
<ul>
|
||||
<li>The <code>id</code> block:
|
||||
<ul>
|
||||
<li>The widget id, or name, must be unique!</li>
|
||||
<li>The id, or name, can contain special characters and/or spaces.</li>
|
||||
<li>This setting is required.</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>The <code>priority</code> block (added <span class="version">v2.9</span>):
|
||||
<ul>
|
||||
<li>Set the widget priority using any number; think of it like setting the css z-index.</li>
|
||||
<li>This tells the plugin the order in which to run the widgets, lowest number priority first.</li>
|
||||
<li>The default widgets have priorities set in intervals of 10 (see the <a href="index.html#Widget-options"> widget priority table</a>), so to run your custom widget before a specific widget, set your widget priority to less than that number.</li>
|
||||
<li>This block is <strong>not supported in older versions</strong>!</li>
|
||||
<li>This setting is optional, but if no priority is specified, it defaults to <code>10</code>.</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>The <code>options</code> block (added <span class="version">v2.8</span>):
|
||||
<ul>
|
||||
<li>Include any widget options to be automatically be extended with any set widgetOptions (from <code>table.config.widgetOptions</code>).</li>
|
||||
<li>As of v2.8, no included widgets will be using this to maintain backwards compatibility with older versions. This changed when v2.9 was released.</li>
|
||||
<li>This block is <strong>not supported in older versions</strong>!</li>
|
||||
<li>This block is optional.</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>The <code>init</code> block (added v2.0.28):
|
||||
<ul>
|
||||
<li>This code is called only after tablesorter has initialized, but before initial sort and before <strong>any</strong> of the widgets are applied (via the <code>format</code> block); it is only run once.</li>
|
||||
<li>Since, v2.0.28, only the saveSort widget uses this block to ensure that the stored sort is applied before; but some of the newer widgets (post v2.9) are using this code block.</li>
|
||||
<li>This block is <strong>not supported in older versions</strong>.</li>
|
||||
<li>This block is optional.</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>The <code>format</code> block (modified v2.0.23):
|
||||
<ul>
|
||||
<li>This block is part of the original <code>addWidget</code> template and is required.</li>
|
||||
<li>In the original template, only the <code>table</code> parameter is provided. After v2.0.28, <code>config</code> and <code>widgetOptions</code> were provided as additional parameters (sorry the previous docs were incorrect).</li>
|
||||
<li>The <code>initFlag</code> is correctly set in v2.8+.</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>The <code>remove</code> block (added v2.4):
|
||||
<ul>
|
||||
<li>This code is called when either the <a href="index.html#refreshwidgets"><code>refreshWidgets</code></a> or <a href="index.html#destroy"><code>destroy</code></a> methods are called.</li>
|
||||
<li>The code contained within this block must remove all additional content/elements added by the widget. Also, any rows or content that is hidden must be restored.</li>
|
||||
<li>If additional rows are added to the table, make sure to include the class name within the <a href="index.html#selectorremove"><code>selectorRemove</code></a> option.</li>
|
||||
<li>This block was added in v2.4, and <strong>not supported in older versions</strong>.</li>
|
||||
<li>This block is optional.</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<h3>addWidget Template</h3>
|
||||
<div>
|
||||
<pre class="prettyprint lang-javascript">// addWidget Template
|
||||
// *******************
|
||||
// parameters:
|
||||
// table = table object (DOM)
|
||||
// config = config object (from table.config)
|
||||
// widgetOptions = all widget options (from table.config.widgetOptions)
|
||||
$.tablesorter.addWidget({
|
||||
id: 'myWidget',
|
||||
// set the priority of the widget (optional)
|
||||
priority: 10,
|
||||
// widget options (added v2.8) - added to table.config.widgetOptions
|
||||
options: {
|
||||
myWidget_option1 : 'setting1',
|
||||
myWidget_option2 : 'setting2'
|
||||
},
|
||||
// The init function (added v2.0.28) is called only after tablesorter has
|
||||
// initialized, but before initial sort & before any of the widgets are applied.
|
||||
init: function(table, thisWidget, config, widgetOptions){
|
||||
// widget initialization code - this is only *RUN ONCE*
|
||||
// but in this example, only the format function is called to from here
|
||||
// to keep the widget backwards compatible with the original tablesorter
|
||||
thisWidget.format(table, config, widgetOptions, true);
|
||||
},
|
||||
format: function(table, config, widgetOptions, initFlag) {
|
||||
// widget code to apply to the table *AFTER EACH SORT*
|
||||
// set the initFlag to true when this format is called from the init
|
||||
// function above otherwise initFlag is undefined
|
||||
// * see the saveSort widget for a full example *
|
||||
},
|
||||
remove: function(table, config, widgetOptions){
|
||||
// do what ever needs to be done to remove stuff added by your widget
|
||||
// unbind events, restore hidden content, etc.
|
||||
}
|
||||
});</pre>
|
||||
</div>
|
||||
|
||||
<h1>Demo</h1>
|
||||
|
||||
<table class="tablesorter">
|
||||
<thead>
|
||||
<tr><th>Name</th><th>Major</th><th>Sex</th><th>English</th><th>Japanese</th><th>Calculus</th><th>Geometry</th></tr>
|
||||
</thead>
|
||||
<tfoot>
|
||||
<tr><th>Name</th><th>Major</th><th>Sex</th><th>English</th><th>Japanese</th><th>Calculus</th><th>Geometry</th></tr>
|
||||
</tfoot>
|
||||
<tbody>
|
||||
<tr><td>Student12</td><td>Mathematics</td><td>female</td><td>100</td><td>75</td><td>70</td><td>85</td></tr>
|
||||
<tr><td>Student13</td><td>Languages</td><td>female</td><td>100</td><td>80</td><td>100</td><td>90</td></tr>
|
||||
<tr><td>Student14</td><td>Languages</td><td>female</td><td>50</td><td>45</td><td>55</td><td>90</td></tr>
|
||||
<tr><td>Student15</td><td>Languages</td><td>male</td><td>95</td><td>35</td><td>100</td><td>90</td></tr>
|
||||
<tr><td>Student16</td><td>Languages</td><td>female</td><td>100</td><td>50</td><td>30</td><td>70</td></tr>
|
||||
<tr><td>Student17</td><td>Languages</td><td>female</td><td>80</td><td>100</td><td>55</td><td>65</td></tr>
|
||||
<tr><td>Student18</td><td>Mathematics</td><td>male</td><td>30</td><td>49</td><td>55</td><td>75</td></tr>
|
||||
<tr><td>Student19</td><td>Languages</td><td>male</td><td>68</td><td>90</td><td>88</td><td>70</td></tr>
|
||||
<tr><td>Student20</td><td>Mathematics</td><td>male</td><td>40</td><td>45</td><td>40</td><td>80</td></tr>
|
||||
<tr><td>Student21</td><td>Languages</td><td>male</td><td>50</td><td>45</td><td>100</td><td>100</td></tr>
|
||||
<tr><td>Student22</td><td>Mathematics</td><td>male</td><td>100</td><td>99</td><td>100</td><td>90</td></tr>
|
||||
<tr><td>Student23</td><td>Languages</td><td>female</td><td>85</td><td>80</td><td>80</td><td>80</td></tr>
|
||||
<tr><td>Student01</td><td>Languages</td><td>male</td><td>80</td><td>70</td><td>75</td><td>80</td></tr>
|
||||
<tr><td>Student02</td><td>Mathematics</td><td>male</td><td>90</td><td>88</td><td>100</td><td>90</td></tr>
|
||||
<tr><td>Student03</td><td>Languages</td><td>female</td><td>85</td><td>95</td><td>80</td><td>85</td></tr>
|
||||
<tr><td>Student04</td><td>Languages</td><td>male</td><td>60</td><td>55</td><td>100</td><td>100</td></tr>
|
||||
<tr><td>Student05</td><td>Languages</td><td>female</td><td>68</td><td>80</td><td>95</td><td>80</td></tr>
|
||||
<tr><td>Student06</td><td>Mathematics</td><td>male</td><td>100</td><td>99</td><td>100</td><td>90</td></tr>
|
||||
<tr><td>Student07</td><td>Mathematics</td><td>male</td><td>85</td><td>68</td><td>90</td><td>90</td></tr>
|
||||
<tr><td>Student08</td><td>Languages</td><td>male</td><td>100</td><td>90</td><td>90</td><td>85</td></tr>
|
||||
<tr><td>Student09</td><td>Mathematics</td><td>male</td><td>80</td><td>50</td><td>65</td><td>75</td></tr>
|
||||
<tr><td>Student10</td><td>Languages</td><td>male</td><td>85</td><td>100</td><td>100</td><td>90</td></tr>
|
||||
<tr><td>Student11</td><td>Languages</td><td>male</td><td>86</td><td>85</td><td>100</td><td>100</td></tr>
|
||||
<tr><td>Student24</td><td>Languages</td><td>female</td><td>100</td><td>91</td><td>13</td><td>82</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<h1>Javascript</h1>
|
||||
<h3>Repeat Headers Widget</h3>
|
||||
|
||||
<div id="javascript">
|
||||
<pre class="prettyprint lang-javascript"></pre>
|
||||
</div>
|
||||
|
||||
<div class="next-up">
|
||||
<hr />
|
||||
Next up: <a href="example-pager.html">Pager plugin ››</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
BIN
assets/vendor/tablesorter/docs/img/external.png
vendored
Normal file
BIN
assets/vendor/tablesorter/docs/img/external.png
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 165 B |
BIN
assets/vendor/tablesorter/docs/img/glyphicons-halflings-white.png
vendored
Normal file
BIN
assets/vendor/tablesorter/docs/img/glyphicons-halflings-white.png
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 8.6 KiB |
BIN
assets/vendor/tablesorter/docs/img/glyphicons-halflings.png
vendored
Normal file
BIN
assets/vendor/tablesorter/docs/img/glyphicons-halflings.png
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
BIN
assets/vendor/tablesorter/docs/img/link.png
vendored
Normal file
BIN
assets/vendor/tablesorter/docs/img/link.png
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 704 B |
5155
assets/vendor/tablesorter/docs/index.html
vendored
Normal file
5155
assets/vendor/tablesorter/docs/index.html
vendored
Normal file
File diff suppressed because it is too large
Load Diff
704
assets/vendor/tablesorter/docs/js/chili/jquery.chili-2.2.js
vendored
Normal file
704
assets/vendor/tablesorter/docs/js/chili/jquery.chili-2.2.js
vendored
Normal file
@@ -0,0 +1,704 @@
|
||||
/*
|
||||
===============================================================================
|
||||
Chili is the jQuery code highlighter plugin
|
||||
...............................................................................
|
||||
LICENSE: http://www.opensource.org/licenses/mit-license.php
|
||||
WEBSITE: http://noteslog.com/chili/
|
||||
|
||||
Copyright 2008 / Andrea Ercolino
|
||||
===============================================================================
|
||||
*/
|
||||
|
||||
|
||||
( function($) {
|
||||
|
||||
ChiliBook = { //implied global
|
||||
|
||||
version: "2.2" // 2008-07-06
|
||||
|
||||
// options --------------------------------------------------------------------
|
||||
|
||||
, automatic: true
|
||||
, automaticSelector: "code"
|
||||
|
||||
, lineNumbers: !true
|
||||
|
||||
, codeLanguage: function( el ) {
|
||||
var recipeName = $( el ).attr( "class" );
|
||||
return recipeName ? recipeName : '';
|
||||
}
|
||||
|
||||
, recipeLoading: true
|
||||
, recipeFolder: "" // used like: recipeFolder + recipeName + '.js'
|
||||
|
||||
// IE and FF convert   to " ", Safari and Opera do not
|
||||
, replaceSpace: " "
|
||||
, replaceTab: "    "
|
||||
, replaceNewLine: " <br/>"
|
||||
|
||||
, selectionStyle: [ "position:absolute; z-index:3000; overflow:scroll;"
|
||||
, "width:16em;"
|
||||
, "height:9em;"
|
||||
, "border:1px solid gray;"
|
||||
, "padding:15px;"
|
||||
, "background-color:yellow;"
|
||||
].join( ' ' )
|
||||
|
||||
// ------------------------------------------------------------- end of options
|
||||
|
||||
, defaultReplacement: '<span class="$0">$$</span>' // TODO: make this an option again
|
||||
, recipes: {} //repository
|
||||
, queue: {} //registry
|
||||
|
||||
, unique: function() {
|
||||
return (new Date()).valueOf();
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
|
||||
$.fn.chili = function( options ) {
|
||||
var book = $.extend( {}, ChiliBook, options || {} );
|
||||
|
||||
function cook( ingredients, recipe, blockName ) {
|
||||
|
||||
function prepareBlock( recipe, blockName ) {
|
||||
var steps = [];
|
||||
for( var stepName in recipe[ blockName ] ) {
|
||||
steps.push( prepareStep( recipe, blockName, stepName ) );
|
||||
}
|
||||
return steps;
|
||||
} // prepareBlock
|
||||
|
||||
function prepareStep( recipe, blockName, stepName ) {
|
||||
var step = recipe[ blockName ][ stepName ];
|
||||
var exp = ( typeof step._match == "string" ) ? step._match : step._match.source;
|
||||
return {
|
||||
recipe: recipe
|
||||
, blockName: blockName
|
||||
, stepName: stepName
|
||||
, exp: "(" + exp + ")"
|
||||
, length: 1 // add 1 to account for the newly added parentheses
|
||||
+ (exp // count number of submatches in here
|
||||
.replace( /\\./g, "%" ) // disable any escaped character
|
||||
.replace( /\[.*?\]/g, "%" ) // disable any character class
|
||||
.match( /\((?!\?)/g ) // match any open parenthesis, not followed by a ?
|
||||
|| [] // make sure it is an empty array if there are no matches
|
||||
).length // get the number of matches
|
||||
, replacement: step._replace ? step._replace : book.defaultReplacement
|
||||
};
|
||||
} // prepareStep
|
||||
|
||||
function knowHow( steps ) {
|
||||
var prevLength = 1;
|
||||
var exps = [];
|
||||
for (var i = 0; i < steps.length; i++) {
|
||||
var exp = steps[ i ].exp;
|
||||
// adjust backreferences
|
||||
exp = exp.replace( /\\\\|\\(\d+)/g, function( m, aNum ) {
|
||||
return !aNum ? m : "\\" + ( prevLength + 1 + parseInt( aNum, 10 ) );
|
||||
} );
|
||||
exps.push( exp );
|
||||
prevLength += steps[ i ].length;
|
||||
}
|
||||
var prolog = '((?:\\s|\\S)*?)';
|
||||
var epilog = '((?:\\s|\\S)+)';
|
||||
var source = '(?:' + exps.join( "|" ) + ')';
|
||||
source = prolog + source + '|' + epilog;
|
||||
return new RegExp( source, recipe._case ? "g" : "gi" );
|
||||
} // knowHow
|
||||
|
||||
function escapeHTML( str ) {
|
||||
return str.replace( /&/g, "&" ).replace( /</g, "<" );
|
||||
} // escapeHTML
|
||||
|
||||
function replaceSpaces( str ) {
|
||||
return str.replace( / +/g, function( spaces ) {
|
||||
return spaces.replace( / /g, replaceSpace );
|
||||
} );
|
||||
} // replaceSpaces
|
||||
|
||||
function filter( str ) {
|
||||
str = escapeHTML( str );
|
||||
if( replaceSpace ) {
|
||||
str = replaceSpaces( str );
|
||||
}
|
||||
return str;
|
||||
} // filter
|
||||
|
||||
function applyRecipe( subject, recipe ) {
|
||||
return cook( subject, recipe );
|
||||
} // applyRecipe
|
||||
|
||||
function applyBlock( subject, recipe, blockName ) {
|
||||
return cook( subject, recipe, blockName );
|
||||
} // applyBlock
|
||||
|
||||
function applyStep( subject, recipe, blockName, stepName ) {
|
||||
var replaceSpace = book.replaceSpace;
|
||||
|
||||
var step = prepareStep( recipe, blockName, stepName );
|
||||
var steps = [step];
|
||||
|
||||
var perfect = subject.replace( knowHow( steps ), function() {
|
||||
return chef.apply( { steps: steps }, arguments );
|
||||
} );
|
||||
return perfect;
|
||||
} // applyStep
|
||||
|
||||
function applyModule( subject, module, context ) {
|
||||
if( ! module ) {
|
||||
return filter( subject );
|
||||
}
|
||||
|
||||
var sub = module.split( '/' );
|
||||
var recipeName = '';
|
||||
var blockName = '';
|
||||
var stepName = '';
|
||||
switch( sub.length ) {
|
||||
case 1:
|
||||
recipeName = sub[0];
|
||||
break;
|
||||
case 2:
|
||||
recipeName = sub[0]; blockName = sub[1];
|
||||
break;
|
||||
case 3:
|
||||
recipeName = sub[0]; blockName = sub[1]; stepName = sub[2];
|
||||
break;
|
||||
default:
|
||||
return filter( subject );
|
||||
}
|
||||
|
||||
function getRecipe( recipeName ) {
|
||||
var path = getPath( recipeName );
|
||||
var recipe = book.recipes[ path ];
|
||||
if( ! recipe ) {
|
||||
throw {msg:"recipe not available"};
|
||||
}
|
||||
return recipe;
|
||||
}
|
||||
|
||||
try {
|
||||
var recipe;
|
||||
if ( '' == stepName ) {
|
||||
if ( '' == blockName ) {
|
||||
if ( '' == recipeName ) {
|
||||
//nothing to do
|
||||
}
|
||||
else { // ( '' != recipeName )
|
||||
recipe = getRecipe( recipeName );
|
||||
return applyRecipe( subject, recipe );
|
||||
}
|
||||
}
|
||||
else { // ( '' != blockName )
|
||||
if( '' == recipeName ) {
|
||||
recipe = context.recipe;
|
||||
}
|
||||
else {
|
||||
recipe = getRecipe( recipeName );
|
||||
}
|
||||
if( ! (blockName in recipe) ) {
|
||||
return filter( subject );
|
||||
}
|
||||
return applyBlock( subject, recipe, blockName );
|
||||
}
|
||||
}
|
||||
else { // ( '' != stepName )
|
||||
if( '' == recipeName ) {
|
||||
recipe = context.recipe;
|
||||
}
|
||||
else {
|
||||
recipe = getRecipe( recipeName );
|
||||
}
|
||||
if( '' == blockName ) {
|
||||
blockName = context.blockName;
|
||||
}
|
||||
if( ! (blockName in recipe) ) {
|
||||
return filter( subject );
|
||||
}
|
||||
if( ! (stepName in recipe[blockName]) ) {
|
||||
return filter( subject );
|
||||
}
|
||||
return applyStep( subject, recipe, blockName, stepName );
|
||||
}
|
||||
}
|
||||
catch( e ) {
|
||||
if (e.msg && e.msg == "recipe not available") {
|
||||
var cue = 'chili_' + book.unique();
|
||||
if( book.recipeLoading ) {
|
||||
var path = getPath( recipeName );
|
||||
if( ! book.queue[ path ] ) {
|
||||
/* this is a new recipe to download */
|
||||
try {
|
||||
book.queue[ path ] = [ {cue: cue, subject: subject, module: module, context: context} ];
|
||||
$.getJSON( path, function( recipeLoaded ) {
|
||||
book.recipes[ path ] = recipeLoaded;
|
||||
var q = book.queue[ path ];
|
||||
for( var i = 0, iTop = q.length; i < iTop; i++ ) {
|
||||
var replacement = applyModule( q[ i ].subject, q[ i ].module, q[ i ].context );
|
||||
if( book.replaceTab ) {
|
||||
replacement = replacement.replace( /\t/g, book.replaceTab );
|
||||
}
|
||||
if( book.replaceNewLine ) {
|
||||
replacement = replacement.replace( /\n/g, book.replaceNewLine );
|
||||
}
|
||||
$( '#' + q[ i ].cue ).replaceWith( replacement );
|
||||
}
|
||||
} );
|
||||
}
|
||||
catch( recipeNotAvailable ) {
|
||||
alert( "the recipe for '" + recipeName + "' was not found in '" + path + "'" );
|
||||
}
|
||||
}
|
||||
else {
|
||||
/* not a new recipe, so just enqueue this element */
|
||||
book.queue[ path ].push( {cue: cue, subject: subject, module: module, context: context} );
|
||||
}
|
||||
return '<span id="' + cue + '">' + filter( subject ) + '</span>';
|
||||
}
|
||||
return filter( subject );
|
||||
}
|
||||
else {
|
||||
return filter( subject );
|
||||
}
|
||||
}
|
||||
} // applyModule
|
||||
|
||||
function addPrefix( prefix, replacement ) {
|
||||
var aux = replacement.replace( /(<span\s+class\s*=\s*(["']))((?:(?!__)\w)+\2\s*>)/ig, "$1" + prefix + "__$3" );
|
||||
return aux;
|
||||
} // addPrefix
|
||||
|
||||
function chef() {
|
||||
if (! arguments[ 0 ]) {
|
||||
return '';
|
||||
}
|
||||
var steps = this.steps;
|
||||
var i = 0; // iterate steps
|
||||
var j = 2; // iterate chef's arguments
|
||||
var prolog = arguments[ 1 ];
|
||||
var epilog = arguments[ arguments.length - 3 ];
|
||||
if (! epilog) {
|
||||
var step;
|
||||
while( step = steps[ i++ ] ) {
|
||||
var aux = arguments; // this unmasks chef's arguments inside the next function
|
||||
if( aux[ j ] ) {
|
||||
var replacement = '';
|
||||
if( $.isFunction( step.replacement ) ) {
|
||||
var matches = []; //Array.slice.call( aux, j, step.length );
|
||||
for (var k = 0, kTop = step.length; k < kTop; k++) {
|
||||
matches.push( aux[ j + k ] );
|
||||
}
|
||||
matches.push( aux[ aux.length - 2 ] );
|
||||
matches.push( aux[ aux.length - 1 ] );
|
||||
replacement = step.replacement
|
||||
.apply( {
|
||||
x: function() {
|
||||
var subject = arguments[0];
|
||||
var module = arguments[1];
|
||||
var context = {
|
||||
recipe: step.recipe
|
||||
, blockName: step.blockName
|
||||
};
|
||||
return applyModule( subject, module, context );
|
||||
}
|
||||
}, matches );
|
||||
}
|
||||
else { //we expect step.replacement to be a string
|
||||
replacement = step.replacement
|
||||
.replace( /(\\\$)|(?:\$\$)|(?:\$(\d+))/g, function( m, escaped, K ) {
|
||||
if( escaped ) { /* \$ */
|
||||
return "$";
|
||||
}
|
||||
else if( !K ) { /* $$ */
|
||||
return filter( aux[ j ] );
|
||||
}
|
||||
else if( K == "0" ) { /* $0 */
|
||||
return step.stepName;
|
||||
}
|
||||
else { /* $K */
|
||||
return filter( aux[ j + parseInt( K, 10 ) ] );
|
||||
}
|
||||
} );
|
||||
}
|
||||
replacement = addPrefix( step.recipe._name, replacement );
|
||||
return filter( prolog ) + replacement;
|
||||
}
|
||||
else {
|
||||
j+= step.length;
|
||||
}
|
||||
}
|
||||
}
|
||||
else {
|
||||
return filter( epilog );
|
||||
}
|
||||
} // chef
|
||||
|
||||
if( ! blockName ) {
|
||||
blockName = '_main';
|
||||
checkSpices( recipe );
|
||||
}
|
||||
if( ! (blockName in recipe) ) {
|
||||
return filter( ingredients );
|
||||
}
|
||||
var replaceSpace = book.replaceSpace;
|
||||
var steps = prepareBlock( recipe, blockName );
|
||||
var kh = knowHow( steps );
|
||||
var perfect = ingredients.replace( kh, function() {
|
||||
return chef.apply( { steps: steps }, arguments );
|
||||
} );
|
||||
return perfect;
|
||||
|
||||
} // cook
|
||||
|
||||
function loadStylesheetInline( sourceCode ) {
|
||||
if( document.createElement ) {
|
||||
var e = document.createElement( "style" );
|
||||
e.type = "text/css";
|
||||
if( e.styleSheet ) { // IE
|
||||
e.styleSheet.cssText = sourceCode;
|
||||
}
|
||||
else {
|
||||
var t = document.createTextNode( sourceCode );
|
||||
e.appendChild( t );
|
||||
}
|
||||
document.getElementsByTagName( "head" )[0].appendChild( e );
|
||||
}
|
||||
} // loadStylesheetInline
|
||||
|
||||
function checkSpices( recipe ) {
|
||||
var name = recipe._name;
|
||||
if( ! book.queue[ name ] ) {
|
||||
|
||||
var content = ['/* Chili -- ' + name + ' */'];
|
||||
for (var blockName in recipe) {
|
||||
if( blockName.search( /^_(?!main\b)/ ) < 0 ) {
|
||||
for (var stepName in recipe[ blockName ]) {
|
||||
var step = recipe[ blockName ][ stepName ];
|
||||
if( '_style' in step ) {
|
||||
if( step[ '_style' ].constructor == String ) {
|
||||
content.push( '.' + name + '__' + stepName + ' { ' + step[ '_style' ] + ' }' );
|
||||
}
|
||||
else {
|
||||
for (var className in step[ '_style' ]) {
|
||||
content.push( '.' + name + '__' + className + ' { ' + step[ '_style' ][ className ] + ' }' );
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
content = content.join('\n');
|
||||
|
||||
loadStylesheetInline( content );
|
||||
|
||||
book.queue[ name ] = true;
|
||||
}
|
||||
} // checkSpices
|
||||
|
||||
function askDish( el ) {
|
||||
var recipeName = book.codeLanguage( el );
|
||||
if( '' != recipeName ) {
|
||||
var path = getPath( recipeName );
|
||||
if( book.recipeLoading ) {
|
||||
/* dynamic setups come here */
|
||||
if( ! book.queue[ path ] ) {
|
||||
/* this is a new recipe to download */
|
||||
try {
|
||||
book.queue[ path ] = [ el ];
|
||||
$.getJSON( path, function( recipeLoaded ) {
|
||||
book.recipes[ path ] = recipeLoaded;
|
||||
var q = book.queue[ path ];
|
||||
for( var i = 0, iTop = q.length; i < iTop; i++ ) {
|
||||
makeDish( q[ i ], path );
|
||||
}
|
||||
} );
|
||||
}
|
||||
catch( recipeNotAvailable ) {
|
||||
alert( "the recipe for '" + recipeName + "' was not found in '" + path + "'" );
|
||||
}
|
||||
}
|
||||
else {
|
||||
/* not a new recipe, so just enqueue this element */
|
||||
book.queue[ path ].push( el );
|
||||
}
|
||||
/* a recipe could have been already downloaded */
|
||||
makeDish( el, path );
|
||||
}
|
||||
else {
|
||||
/* static setups come here */
|
||||
makeDish( el, path );
|
||||
}
|
||||
}
|
||||
} // askDish
|
||||
|
||||
function makeDish( el, recipePath ) {
|
||||
var recipe = book.recipes[ recipePath ];
|
||||
if( ! recipe ) {
|
||||
return;
|
||||
}
|
||||
var $el = $( el );
|
||||
var ingredients = $el.text();
|
||||
if( ! ingredients ) {
|
||||
return;
|
||||
}
|
||||
|
||||
//fix for msie: \r (13) is used instead of \n (10)
|
||||
//fix for opera: \r\n is used instead of \n
|
||||
ingredients = ingredients.replace(/\r\n?/g, "\n");
|
||||
|
||||
//reverse fix for safari: msie, mozilla and opera render the initial \n
|
||||
if( $el.parent().is('pre') ) {
|
||||
if( ! $.browser.safari ) {
|
||||
ingredients = ingredients.replace(/^\n/g, "");
|
||||
}
|
||||
}
|
||||
|
||||
var dish = cook( ingredients, recipe ); // all happens here
|
||||
|
||||
if( book.replaceTab ) {
|
||||
dish = dish.replace( /\t/g, book.replaceTab );
|
||||
}
|
||||
if( book.replaceNewLine ) {
|
||||
dish = dish.replace( /\n/g, book.replaceNewLine );
|
||||
}
|
||||
|
||||
el.innerHTML = dish; //much faster than $el.html( dish );
|
||||
//tried also the function replaceHtml from http://blog.stevenlevithan.com/archives/faster-than-innerhtml
|
||||
//but it was not faster nor without sideffects (it was not possible to count spans into el)
|
||||
|
||||
//opera and safari select PRE text correctly
|
||||
if( $.browser.msie || $.browser.mozilla ) {
|
||||
enableSelectionHelper( el );
|
||||
}
|
||||
|
||||
var $that = $el.parent();
|
||||
var classes = $that.attr( 'class' );
|
||||
var ln = /ln-(\d+)-([\w][\w\-]*)|ln-(\d+)|ln-/.exec( classes );
|
||||
if( ln ) {
|
||||
addLineNumbers( el );
|
||||
var start = 0;
|
||||
if( ln[1] ) {
|
||||
start = parseInt( ln[1], 10 );
|
||||
var $pieces = $( '.ln-' + ln[1] + '-' + ln[2] );
|
||||
var pos = $pieces.index( $that[0] );
|
||||
$pieces.slice( 0, pos ).each( function() {
|
||||
start += $( this ).find( 'li' ).length;
|
||||
} );
|
||||
}
|
||||
else if( ln[3] ) {
|
||||
start = parseInt( ln[3], 10 );
|
||||
}
|
||||
else {
|
||||
start = 1;
|
||||
}
|
||||
$el.find( 'ol' )[0].start = start;
|
||||
$('body').width( $('body').width() - 1 ).width( $('body').width() + 1 );
|
||||
}
|
||||
else if( book.lineNumbers ) {
|
||||
addLineNumbers( el );
|
||||
}
|
||||
|
||||
} // makeDish
|
||||
|
||||
function enableSelectionHelper( el ) {
|
||||
var element = null;
|
||||
$( el )
|
||||
.parents()
|
||||
.filter( "pre" )
|
||||
.bind( "mousedown", function() {
|
||||
element = this;
|
||||
if( $.browser.msie ) {
|
||||
document.selection.empty();
|
||||
}
|
||||
else {
|
||||
window.getSelection().removeAllRanges();
|
||||
}
|
||||
} )
|
||||
.bind( "mouseup", function( event ) {
|
||||
if( element && (element == this) ) {
|
||||
element = null;
|
||||
var selected = '';
|
||||
if( $.browser.msie ) {
|
||||
selected = document.selection.createRange().htmlText;
|
||||
if( '' == selected ) {
|
||||
return;
|
||||
}
|
||||
selected = preserveNewLines( selected );
|
||||
var container_tag = '<textarea style="STYLE">';
|
||||
}
|
||||
else {
|
||||
selected = window.getSelection().toString(); //opera doesn't select new lines
|
||||
if( '' == selected ) {
|
||||
return;
|
||||
}
|
||||
selected = selected
|
||||
.replace( /\r/g, '' )
|
||||
.replace( /^# ?/g, '' )
|
||||
.replace( /\n# ?/g, '\n' )
|
||||
;
|
||||
var container_tag = '<pre style="STYLE">';
|
||||
}
|
||||
var $container = $( container_tag.replace( /\bSTYLE\b/, ChiliBook.selectionStyle ) )
|
||||
.appendTo( 'body' )
|
||||
.text( selected )
|
||||
.attr( 'id', 'chili_selection' )
|
||||
.click( function() { $(this).remove(); } )
|
||||
;
|
||||
var top = event.pageY - Math.round( $container.height() / 2 ) + "px";
|
||||
var left = event.pageX - Math.round( $container.width() / 2 ) + "px";
|
||||
$container.css( { top: top, left: left } );
|
||||
if( $.browser.msie ) {
|
||||
// window.clipboardData.setData( 'Text', selected ); //I couldn't find anything similar for Mozilla
|
||||
$container[0].focus();
|
||||
$container[0].select();
|
||||
}
|
||||
else {
|
||||
var s = window.getSelection();
|
||||
s.removeAllRanges();
|
||||
var r = document.createRange();
|
||||
r.selectNodeContents( $container[0] );
|
||||
s.addRange( r );
|
||||
}
|
||||
}
|
||||
} )
|
||||
;
|
||||
} // enableSelectionHelper
|
||||
|
||||
function getPath( recipeName ) {
|
||||
return book.recipeFolder + recipeName + ".js";
|
||||
} // getPath
|
||||
|
||||
function getSelectedText() {
|
||||
var text = '';
|
||||
if( $.browser.msie ) {
|
||||
text = document.selection.createRange().htmlText;
|
||||
}
|
||||
else {
|
||||
text = window.getSelection().toString();
|
||||
}
|
||||
return text;
|
||||
} // getSelectedText
|
||||
|
||||
function preserveNewLines( html ) {
|
||||
do {
|
||||
var newline_flag = ChiliBook.unique();
|
||||
}
|
||||
while( html.indexOf( newline_flag ) > -1 );
|
||||
var text = '';
|
||||
if (/<br/i.test(html) || /<li/i.test(html)) {
|
||||
if (/<br/i.test(html)) {
|
||||
html = html.replace( /\<br[^>]*?\>/ig, newline_flag );
|
||||
}
|
||||
else if (/<li/i.test(html)) {
|
||||
html = html.replace( /<ol[^>]*?>|<\/ol>|<li[^>]*?>/ig, '' ).replace( /<\/li>/ig, newline_flag );
|
||||
}
|
||||
var el = $( '<pre>' ).appendTo( 'body' ).hide()[0];
|
||||
el.innerHTML = html;
|
||||
text = $( el ).text().replace( new RegExp( newline_flag, "g" ), '\r\n' );
|
||||
$( el ).remove();
|
||||
}
|
||||
return text;
|
||||
} // preserveNewLines
|
||||
|
||||
function addLineNumbers( el ) {
|
||||
|
||||
function makeListItem1( not_last_line, not_last, last, open ) {
|
||||
var close = open ? '</span>' : '';
|
||||
var aux = '';
|
||||
if( not_last_line ) {
|
||||
aux = '<li>' + open + not_last + close + '</li>';
|
||||
}
|
||||
else if( last ) {
|
||||
aux = '<li>' + open + last + close + '</li>';
|
||||
}
|
||||
return aux;
|
||||
} // makeListItem1
|
||||
|
||||
function makeListItem2( not_last_line, not_last, last, prev_li ) {
|
||||
var aux = '';
|
||||
if( prev_li ) {
|
||||
aux = prev_li;
|
||||
}
|
||||
else {
|
||||
aux = makeListItem1( not_last_line, not_last, last, '' )
|
||||
}
|
||||
return aux;
|
||||
} // makeListItem2
|
||||
|
||||
var html = $( el ).html();
|
||||
var br = /<br>/.test(html) ? '<br>' : '<BR>';
|
||||
var empty_line = '<li>' + book.replaceSpace + '</li>';
|
||||
var list_items = html
|
||||
//extract newlines at the beginning of a span
|
||||
.replace( /(<span [^>]+>)((?:(?: |\xA0)<br>)+)(.*?)(<\/span>)/ig, '$2$1$3$4' ) // I don't know why <span .*?> does not work here
|
||||
//transform newlines inside of a span
|
||||
.replace( /(.*?)(<span .*?>)(.*?)(?:<\/span>(?: |\xA0)<br>|<\/span>)/ig, // but here it does
|
||||
function( all, before, open, content ) {
|
||||
if (/<br>/i.test(content)) {
|
||||
var pieces = before.split( br );
|
||||
var lastPiece = pieces.pop();
|
||||
before = pieces.join( br );
|
||||
var aux = (before ? before + br : '') //+ replace1( lastPiece + content, open );
|
||||
+ (lastPiece + content).replace( /((.*?)(?: |\xA0)<br>)|(.*)/ig,
|
||||
function( tmp, not_last_line, not_last, last ) {
|
||||
var aux2 = makeListItem1( not_last_line, not_last, last, open );
|
||||
return aux2;
|
||||
}
|
||||
);
|
||||
return aux;
|
||||
}
|
||||
else {
|
||||
return all;
|
||||
}
|
||||
}
|
||||
)
|
||||
//transform newlines outside of a span
|
||||
.replace( /(<li>.*?<\/li>)|((.*?)(?: |\xA0)<br>)|(.+)/ig,
|
||||
function( tmp, prev_li, not_last_line, not_last, last ) {
|
||||
var aux2 = makeListItem2( not_last_line, not_last, last, prev_li );
|
||||
return aux2;
|
||||
}
|
||||
)
|
||||
//fix empty lines for Opera
|
||||
.replace( /<li><\/li>/ig, empty_line )
|
||||
;
|
||||
|
||||
el.innerHTML = '<ol>' + list_items + '</ol>';
|
||||
} // addLineNumbers
|
||||
|
||||
function revealChars( tmp ) {
|
||||
return $
|
||||
.map( tmp.split(''),
|
||||
function(n, i) {
|
||||
return ' ' + n + ' ' + n.charCodeAt( 0 ) + ' ';
|
||||
} )
|
||||
.join(' ');
|
||||
} // revealChars
|
||||
|
||||
//-----------------------------------------------------------------------------
|
||||
// the coloring starts here
|
||||
this
|
||||
.each( function() {
|
||||
var $this = $( this );
|
||||
$this.trigger( 'chili.before_coloring' );
|
||||
askDish( this );
|
||||
$this.trigger( 'chili.after_coloring' );
|
||||
} );
|
||||
|
||||
return this;
|
||||
//-----------------------------------------------------------------------------
|
||||
};
|
||||
|
||||
|
||||
|
||||
//main
|
||||
$( function() {
|
||||
|
||||
if( ChiliBook.automatic ) {
|
||||
$( ChiliBook.automaticSelector ).chili();
|
||||
}
|
||||
|
||||
} );
|
||||
|
||||
} ) ( jQuery );
|
||||
229
assets/vendor/tablesorter/docs/js/chili/recipes.js
vendored
Normal file
229
assets/vendor/tablesorter/docs/js/chili/recipes.js
vendored
Normal file
@@ -0,0 +1,229 @@
|
||||
/*
|
||||
===============================================================================
|
||||
Chili is the jQuery code highlighter plugin
|
||||
...............................................................................
|
||||
LICENSE: http://www.opensource.org/licenses/mit-license.php
|
||||
WEBSITE: http://noteslog.com/chili/
|
||||
|
||||
Copyright 2008 / Andrea Ercolino
|
||||
===============================================================================
|
||||
*/
|
||||
|
||||
ChiliBook.recipeLoading = false;
|
||||
|
||||
ChiliBook.recipes[ "html.js" ] =
|
||||
{
|
||||
_name: 'html'
|
||||
, _case: false
|
||||
, _main: {
|
||||
doctype: {
|
||||
_match: /<!DOCTYPE\b[\w\W]*?>/
|
||||
, _style: "color: #CC6600;"
|
||||
}
|
||||
, ie_style: {
|
||||
_match: /(<!--\[[^\]]*\]>)([\w\W]*?)(<!\[[^\]]*\]-->)/
|
||||
, _replace: function( all, open, content, close ) {
|
||||
return "<span class='ie_style'>" + this.x( open ) + "</span>"
|
||||
+ this.x( content, '//style' )
|
||||
+ "<span class='ie_style'>" + this.x( close ) + "</span>";
|
||||
}
|
||||
, _style: "color: DarkSlateGray; font-weight: bold;"
|
||||
}
|
||||
, comment: {
|
||||
_match: /<!--[\w\W]*?-->/
|
||||
, _style: "color: gray;"
|
||||
}
|
||||
, script: {
|
||||
_match: /(<script\s+[^>]*>)([\w\W]*?)(<\/script\s*>)/
|
||||
, _replace: function( all, open, content, close ) {
|
||||
return this.x( open, '//tag_start' )
|
||||
+ this.x( content, 'js' )
|
||||
+ this.x( close, '//tag_end' );
|
||||
}
|
||||
}
|
||||
, style: {
|
||||
_match: /(<style\s+[^>]*>)([\w\W]*?)(<\/style\s*>)/
|
||||
, _replace: function( all, open, content, close ) {
|
||||
return this.x( open, '//tag_start' )
|
||||
+ this.x( content, 'css' )
|
||||
+ this.x( close, '//tag_end' );
|
||||
}
|
||||
}
|
||||
// matches a starting tag of an element (with attrs)
|
||||
// like "<div ... >" or "<img ... />"
|
||||
, tag_start: {
|
||||
_match: /(<\w+)((?:[?%]>|[\w\W])*?)(\/>|>)/
|
||||
, _replace: function( all, open, content, close ) {
|
||||
return "<span class='tag_start'>" + this.x( open ) + "</span>"
|
||||
+ this.x( content, '/tag_attrs' )
|
||||
+ "<span class='tag_start'>" + this.x( close ) + "</span>";
|
||||
}
|
||||
, _style: "color: navy;"
|
||||
}
|
||||
// matches an ending tag
|
||||
// like "</div>"
|
||||
, tag_end: {
|
||||
_match: /<\/\w+\s*>|\/>/
|
||||
, _style: "color: navy;"
|
||||
}
|
||||
, entity: {
|
||||
_match: /&\w+?;/
|
||||
, _style: "color: blue;"
|
||||
}
|
||||
}
|
||||
, tag_attrs: {
|
||||
// matches a name/value pair
|
||||
attr: {
|
||||
// before in $1, name in $2, between in $3, value in $4
|
||||
_match: /(\W*?)([\w-]+)(\s*=\s*)((?:\'[^\']*(?:\\.[^\']*)*\')|(?:\"[^\"]*(?:\\.[^\"]*)*\"))/
|
||||
, _replace: "$1<span class='attr_name'>$2</span>$3<span class='attr_value'>$4</span>"
|
||||
, _style: { attr_name: "color: royalBlue;", attr_value: "color: maroon;" }
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
ChiliBook.recipes[ "js.js" ] =
|
||||
{
|
||||
_name: 'js'
|
||||
, _case: true
|
||||
, _main: {
|
||||
ml_comment: {
|
||||
_match: /\/\*[^*]*\*+(?:[^\/][^*]*\*+)*\//
|
||||
, _style: 'color: gray;'
|
||||
}
|
||||
, sl_comment: {
|
||||
_match: /\/\/.*/
|
||||
, _style: 'color: gray;'
|
||||
}
|
||||
, string: {
|
||||
_match: /(?:\'[^\'\\\n]*(?:\\.[^\'\\\n]*)*\')|(?:\"[^\"\\\n]*(?:\\.[^\"\\\n]*)*\")/
|
||||
, _style: 'color: teal;'
|
||||
}
|
||||
, num: {
|
||||
_match: /\b[+-]?(?:\d*\.?\d+|\d+\.?\d*)(?:[eE][+-]?\d+)?\b/
|
||||
, _style: 'color: #a00;'
|
||||
}
|
||||
, boolean: {
|
||||
_match: /\b(true|false|null)\b/
|
||||
, _style: 'color: #c00;'
|
||||
}
|
||||
, reg_not: { //this prevents "a / b / c" to be interpreted as a reg_exp
|
||||
_match: /(?:\w+\s*)\/[^\/\\\n]*(?:\\.[^\/\\\n]*)*\/[gim]*(?:\s*\w+)/
|
||||
, _replace: function( all ) {
|
||||
return this.x( all, '//num' );
|
||||
}
|
||||
}
|
||||
, reg_exp: {
|
||||
_match: /\/[^\/\\\n]*(?:\\.[^\/\\\n]*)*\/[gim]*/
|
||||
, _style: 'color: maroon;'
|
||||
}
|
||||
, brace: {
|
||||
_match: /[\{\}]/
|
||||
, _style: 'color: #c00; font-weight: bold;'
|
||||
}
|
||||
, statement: {
|
||||
_match: /\b(with|while|var|try|throw|switch|return|if|for|finally|else|do|default|continue|const|catch|case|break)\b/
|
||||
, _style: 'color: navy; font-weight: bold;'
|
||||
}
|
||||
, error: {
|
||||
_match: /\b(URIError|TypeError|SyntaxError|ReferenceError|RangeError|EvalError|Error)\b/
|
||||
, _style: 'color: Coral;'
|
||||
}
|
||||
, object: {
|
||||
_match: /\b(String|RegExp|Object|Number|Math|Function|Date|Boolean|Array)\b/
|
||||
, _style: 'color: DeepPink;'
|
||||
}
|
||||
, property: {
|
||||
_match: /\b(undefined|arguments|NaN|Infinity)\b/
|
||||
, _style: 'color: Purple; font-weight: bold;'
|
||||
}
|
||||
, 'function': {
|
||||
_match: /\b(parseInt|parseFloat|isNaN|isFinite|eval|encodeURIComponent|encodeURI|decodeURIComponent|decodeURI)\b/
|
||||
, _style: 'color: olive;'
|
||||
}
|
||||
, operator: {
|
||||
_match: /\b(void|typeof|this|new|instanceof|in|function|delete)\b/
|
||||
, _style: 'color: RoyalBlue; font-weight: bold;'
|
||||
}
|
||||
, liveconnect: {
|
||||
_match: /\b(sun|netscape|java|Packages|JavaPackage|JavaObject|JavaClass|JavaArray|JSObject|JSException)\b/
|
||||
, _style: 'text-decoration: overline;'
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
ChiliBook.recipes[ "css.js" ] =
|
||||
{
|
||||
_name: 'css'
|
||||
, _case: true
|
||||
, _main: {
|
||||
comment: {
|
||||
_match: /\/\*[^*]*\*+(?:[^\/][^*]*\*+)*\//
|
||||
, _style: "color: gray;"
|
||||
}
|
||||
, directive: {
|
||||
_match: /@\w+/
|
||||
, _style: "color: fuchsia;"
|
||||
}
|
||||
, url: {
|
||||
_match: /\b(url\s*\()([^)]+)(\))/
|
||||
, _replace: "<span class='url'>$1</span><span class='number'>$2</span><span class='url'>$3</span>"
|
||||
, _style: "color: #490093;"
|
||||
}
|
||||
, block: {
|
||||
_match: /\{([\w\W]*?)\}/
|
||||
, _replace: function( all, pairs ) {
|
||||
return '{' + this.x( pairs, '/definition' ) + '}';
|
||||
}
|
||||
}
|
||||
, 'class': {
|
||||
_match: /\.\S+/
|
||||
, _style: "color: #0069d2; font-weight: bold;"
|
||||
}
|
||||
, id: {
|
||||
_match: /#\S+/
|
||||
, _style: "color: #75029B; font-weight: bold;"
|
||||
}
|
||||
, pseudo: {
|
||||
_match: /:\w+/
|
||||
, _style: "color: #CC9900;"
|
||||
}
|
||||
, element: {
|
||||
_match: /\w+/
|
||||
, _style: "color: #004080; font-weight: bold;"
|
||||
}
|
||||
}
|
||||
, definition: {
|
||||
comment: {
|
||||
_match: /\/\*[^*]*\*+(?:[^\/][^*]*\*+)*\//
|
||||
}
|
||||
, property: {
|
||||
_match: /\b(?:zoom|z-index|writing-mode|word-wrap|word-spacing|word-break|width|widows|white-space|volume|voice-family|visibility|vertical-align|unicode-bidi|top|text-underline-position|text-transform|text-shadow|text-overflow|text-kashida-space|text-justify|text-indent|text-decoration|text-autospace|text-align-last|text-align|table-layout|stress|speech-rate|speak-punctuation|speak-numeral|speak-header|speak|size|scrollbar-track-color|scrollbar-shadow-color|scrollbar-highlight-color|scrollbar-face-color|scrollbar-dark-shadow-color|scrollbar-base-color|scrollbar-arrow-color|scrollbar-3d-light-color|ruby-position|ruby-overhang|ruby-align|right|richness|quotes|position|play-during|pitch-range|pitch|pause-before|pause-after|pause|page-break-inside|page-break-before|page-break-after|page|padding-top|padding-right|padding-left|padding-bottom|padding|overflow-Y|overflow-X|overflow|outline-width|outline-style|outline-color|outline|orphans|min-width|min-height|max-width|max-height|marks|marker-offset|margin-top|margin-right|margin-left|margin-bottom|margin|list-style-type|list-style-position|list-style-image|list-style|line-height|line-break|letter-spacing|left|layout-grid-type|layout-grid-mode|layout-grid-line|layout-grid-char-spacing|layout-grid-char|layout-grid|layout-flow|layer-background-image|layer-background-color|include-source|ime-mode|height|font-weight|font-variant|font-style|font-stretch|font-size-adjust|font-size|font-family|font|float|filter|empty-cells|elevation|display|direction|cursor|cue-before|cue-after|cue|counter-reset|counter-increment|content|color|clip|clear|caption-side|bottom|border-width|border-top-width|border-top-style|border-top-color|border-top|border-style|border-spacing|border-right-width|border-right-style|border-right-color|border-right|border-left-width|border-left-style|border-left-color|border-left|border-color|border-collapse|border-bottom-width|border-bottom-style|border-bottom-color|border-bottom|border|behavior|background-repeat|background-position-y|background-position-x|background-position|background-image|background-color|background-attachment|background|azimuth|accelerator|opacity)\s*:/
|
||||
, _style: "color: #330066;"
|
||||
}
|
||||
, special: {
|
||||
_match: /\b(?:-use-link-source|-set-link-source|-replace|-moz-user-select|-moz-user-modify|-moz-user-input|-moz-user-focus|-moz-outline-width|-moz-outline-style|-moz-outline-color|-moz-outline|-moz-opacity|-moz-border-top-colors|-moz-border-right-colors|-moz-border-radius-topright|-moz-border-radius-topleft|-moz-border-radius-bottomright|-moz-border-radius-bottomleft|-moz-border-radius|-moz-border-left-colors|-moz-border-bottom-colors|-moz-binding|-webkit-transition|-moz-transition|-o-transition|transition|-webkit-box-sizing|-moz-box-sizing|box-sizing)\s*:/
|
||||
, _style: "color: #330066;"
|
||||
}
|
||||
, url: {
|
||||
_match: /\b(url\s*\()([^)]+)(\))/
|
||||
, _replace: "<span class='url'>$1</span><span class='number'>$2</span><span class='url'>$3</span>"
|
||||
}
|
||||
, value: {
|
||||
_match: /\b(?:xx-small|xx-large|x-soft|x-small|x-slow|x-low|x-loud|x-large|x-high|x-fast|wider|wait|w-resize|visible|url|uppercase|upper-roman|upper-latin|upper-alpha|underline|ultra-expanded|ultra-condensed|tv|tty|transparent|top|thin|thick|text-top|text-bottom|table-row-group|table-row|table-header-group|table-footer-group|table-column-group|table-column|table-cell|table-caption|sw-resize|super|sub|status-bar|static|square|spell-out|speech|solid|soft|smaller|small-caption|small-caps|small|slower|slow|silent|show|separate|semi-expanded|semi-condensed|se-resize|scroll|screen|s-resize|run-in|rtl|rightwards|right-side|right|ridge|rgb|repeat-y|repeat-x|repeat|relative|projection|print|pre|portrait|pointer|overline|outside|outset|open-quote|once|oblique|nw-resize|nowrap|normal|none|no-repeat|no-open-quote|no-close-quote|ne-resize|narrower|n-resize|move|mix|middle|message-box|medium|marker|ltr|lowercase|lower-roman|lower-latin|lower-greek|lower-alpha|lower|low|loud|local|list-item|line-through|lighter|level|leftwards|left-side|left|larger|large|landscape|justify|italic|invert|inside|inset|inline-table|inline|icon|higher|high|hide|hidden|help|hebrew|handheld|groove|format|fixed|faster|fast|far-right|far-left|fantasy|extra-expanded|extra-condensed|expanded|embossed|embed|e-resize|double|dotted|disc|digits|default|decimal-leading-zero|decimal|dashed|cursive|crosshair|cross|crop|counters|counter|continuous|condensed|compact|collapse|code|close-quote|circle|center-right|center-left|center|caption|capitalize|braille|bottom|both|bolder|bold|block|blink|bidi-override|below|behind|baseline|avoid|auto|aural|attr|armenian|always|all|absolute|above|not-allowed|inherit)\b/
|
||||
, _style: "color: #3366FF;"
|
||||
}
|
||||
, string: {
|
||||
_match: /(?:\'[^\'\\\n]*(?:\\.[^\'\\\n]*)*\')|(?:\"[^\"\\\n]*(?:\\.[^\"\\\n]*)*\")/
|
||||
, _style: "color: teal;"
|
||||
}
|
||||
, number: {
|
||||
_match: /(?:\b[+-]?(?:\d*\.?\d+|\d+\.?\d*))(?:%|(?:(?:px|pt}rem|em|s|)\b))/
|
||||
, _style: "color: maroon;"
|
||||
}
|
||||
, color : {
|
||||
_match: /(?:\#[a-fA-F0-9]{3,6})|\b(?:yellow|white|teal|silver|red|purple|olive|navy|maroon|lime|green|gray|fuchsia|blue|black|aqua|YellowGreen|Yellow|WhiteSmoke|White|Wheat|Violet|Turquoise|Tomato|Thistle|Teal|Tan|SteelBlue|SpringGreen|Snow|SlateGrey|SlateGray|SlateBlue|SkyBlue|Silver|Sienna|SeaShell|SeaGreen|SandyBrown|Salmon|SaddleBrown|RoyalBlue|RosyBrown|Red|Purple|PowderBlue|Plum|Pink|Peru|PeachPuff|PapayaWhip|PaleVioletRed|PaleTurquoise|PaleGreen|PaleGoldenRod|Orchid|OrangeRed|Orange|OliveDrab|Olive|OldLace|Navy|NavajoWhite|Moccasin|MistyRose|MintCream|MidnightBlue|MediumVioletRed|MediumTurquoise|MediumSpringGreen|MediumSlateBlue|MediumSeaGreen|MediumPurple|MediumOrchid|MediumBlue|MediumAquaMarine|Maroon|Magenta|Linen|LimeGreen|Lime|LightYellow|LightSteelBlue|LightSlateGrey|LightSlateGray|LightSkyBlue|LightSeaGreen|LightSalmon|LightPink|LightGrey|LightGreen|LightGray|LightGoldenRodYellow|LightCyan|LightCoral|LightBlue|LemonChiffon|LawnGreen|LavenderBlush|Lavender|Khaki|Ivory|Indigo|IndianRed|HotPink|HoneyDew|Grey|GreenYellow|Green|Gray|GoldenRod|Gold|GhostWhite|Gainsboro|Fuchsia|ForestGreen|FloralWhite|FireBrick|DodgerBlue|DimGrey|DimGray|DeepSkyBlue|DeepPink|Darkorange|DarkViolet|DarkTurquoise|DarkSlateGrey|DarkSlateGray|DarkSlateBlue|DarkSeaGreen|DarkSalmon|DarkRed|DarkOrchid|DarkOliveGreen|DarkMagenta|DarkKhaki|DarkGrey|DarkGreen|DarkGray|DarkGoldenRod|DarkCyan|DarkBlue|Cyan|Crimson|Cornsilk|CornflowerBlue|Coral|Chocolate|Chartreuse|CadetBlue|BurlyWood|Brown|BlueViolet|Blue|BlanchedAlmond|Black|Bisque|Beige|Azure|Aquamarine|Aqua|AntiqueWhite|AliceBlue)\b/
|
||||
, _style: "color: green;"
|
||||
}
|
||||
}
|
||||
};
|
||||
169
assets/vendor/tablesorter/docs/js/demo-build-table.js
vendored
Normal file
169
assets/vendor/tablesorter/docs/js/demo-build-table.js
vendored
Normal file
@@ -0,0 +1,169 @@
|
||||
$(function(){
|
||||
|
||||
// ***************************
|
||||
// ARRAY
|
||||
// ***************************
|
||||
var arry = [
|
||||
[ 'ID', 'Name', 'Age', 'Date' ], // header
|
||||
[ 'A42b', 'Parker', 28, 'Jul 6, 2006 8:14 AM' ], // row 1
|
||||
[ 'A255', 'Hood', 33, 'Dec 10, 2002 5:14 AM' ], // row 2
|
||||
[ 'A33', 'Kent', 18, 'Jan 12, 2003 11:14 AM' ], // row 3
|
||||
[ 'A1', 'Franklin', 45, 'Jan 18, 2001 9:12 AM' ], // row 4
|
||||
[ 'A102', 'Evans', 22, 'Jan 18, 2007 9:12 AM' ], // row 5
|
||||
[ 'A42a', 'Everet', 22, 'Jan 18, 2007 9:12 AM' ], // row 6
|
||||
[ 'ID', 'Name', 'Age', 'Date' ] // footer
|
||||
];
|
||||
|
||||
$('#array2Table').tablesorter({
|
||||
theme: 'blue',
|
||||
data : arry,
|
||||
widgetOptions : {
|
||||
// build_type : 'array', // can be detected if undefined
|
||||
// build_source : arry, // overrides the data setting above
|
||||
build_headers : {
|
||||
widths : ['15%', '30%', '15%', '40%'] // set header cell widths
|
||||
},
|
||||
build_footers : {
|
||||
text : [ 'ID (a###)', 'Last Name', 'Age (joined)', 'Date (joined)' ]
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// ***************************
|
||||
// ARRAY (from string)
|
||||
// ***************************
|
||||
$('#string2Table').tablesorter({
|
||||
theme: 'blue',
|
||||
widgetOptions: {
|
||||
build_type : 'array',
|
||||
build_source : 'header 1,header 2,header 3;r1c1,r1c2,r1c3;r2c1,r2c2,r2c3;r3c1,r3c2,r3c3;"footer, 1","footer, 2","footer, 3"',
|
||||
build_processing : function(data, wo) {
|
||||
var rows = data.split(';');
|
||||
return $.each(rows, function(i,cells) {
|
||||
// similar to using rows[i] = cells.split(',') but the splitCSV script
|
||||
// doesn't split the cell if the separator (comma) is within quotes
|
||||
rows[i] = $.tablesorter.buildTable.splitCSV(cells, ',');
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// ***************************
|
||||
// CSV (DOM)
|
||||
// ***************************
|
||||
$('#csv2Table').tablesorter({
|
||||
theme: 'blue',
|
||||
widgetOptions: {
|
||||
// *** build widget core ***
|
||||
build_type : 'csv', // array, object, csv, ajax
|
||||
build_source : $('.csv'), // url, dom
|
||||
build_complete : 'tablesorter-build-complete', // triggered event when build completes
|
||||
|
||||
// *** CSV & array ***
|
||||
build_headers : {
|
||||
rows : 1, // Number of header rows from the csv
|
||||
classes : [], // Header classes to apply to cells
|
||||
text : [], // Header cell text
|
||||
widths : ['3%', '27%', '50%', '20%'] // set header cell widths
|
||||
},
|
||||
build_footers : {
|
||||
rows : 1, // Number of header rows from the csv
|
||||
classes : [], // Footer classes to apply to cells
|
||||
text : [] // Footer cell text
|
||||
},
|
||||
build_numbers : {
|
||||
addColumn : '#', // include row numbering column?
|
||||
sortable : true // make column sortable?
|
||||
},
|
||||
|
||||
// *** CSV options ***
|
||||
build_csvStartLine : 0, // line within the csv to start adding to table
|
||||
build_csvSeparator : ",", // csv separator
|
||||
}
|
||||
});
|
||||
|
||||
// ***************************
|
||||
// CSV (Ajax)
|
||||
// ***************************
|
||||
$('#csv2Table2').tablesorter({
|
||||
theme: 'blue',
|
||||
widgetOptions: {
|
||||
// *** build widget core ***
|
||||
build_type : 'csv',
|
||||
build_source : { url: 'assets/build.txt', dataType: 'html' },
|
||||
build_headers : {
|
||||
widths : ['30%', '50%', '20%'] // set header cell widths
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// ***************************
|
||||
// OBJECT (Variable)
|
||||
// ***************************
|
||||
var dataObject = {
|
||||
headers : [
|
||||
[
|
||||
// each object/string is a cell
|
||||
{ text: 'First Name', class: 'fname', width: '10%' }, // row 0 cell 1
|
||||
'Last Name',
|
||||
{ text: 'Age', class: 'age', 'data-sorter' : false }, // row 0 cell 3
|
||||
'Total',
|
||||
{ text: 'Discount', class : 'sorter-false' }, // row 0 cell 5
|
||||
{ text: 'Date', class : 'date' } // row 0 cell 6
|
||||
]
|
||||
],
|
||||
footers : 'clone', // clone headers or assign array like headers
|
||||
rows : [
|
||||
// TBODY 1
|
||||
[ 'Peter', 'Parker', 28, '$9.99', '20%', 'Jul 6, 2006 8:14 AM' ], // row 1
|
||||
[ 'John', 'Hood', 33, '$19.99', '25%', 'Dec 10, 2002 5:14 AM' ], // row 2
|
||||
[ 'Clark', 'Kent', 18, '$15.89', '44%', 'Jan 12, 2003 11:14 AM' ], // row 3
|
||||
|
||||
// TBODY 2
|
||||
{ newTbody: true, class: 'tablesorter-infoOnly' },
|
||||
{ cells : [ { html: '<strong>Info Row</strong>', colSpan: 6 } ] }, // row 4
|
||||
|
||||
// TBODY 3
|
||||
{ newTbody: true },
|
||||
[ 'Bruce', 'Evans', 22, '$13.19', '11%', 'Jan 18, 2007 9:12 AM' ], // row 5
|
||||
[ 'Brice', 'Almighty', 45, '$153.19', '44%', 'Jan 18, 2001 9:12 AM' ], // row 6
|
||||
|
||||
{ class: 'specialRow', // row 7
|
||||
cells: [
|
||||
// each object/string is a cell
|
||||
{ text: 'Fred', class: 'fname' },
|
||||
{ text: 'Smith', class: 'lname' },
|
||||
{ text: 18, class: 'age', 'data-info': 'fake ID!, he is really 16' },
|
||||
{ text: '$22.44', class: 'total' },
|
||||
'8%',
|
||||
{ text: 'Aug 20, 2012 10:15 AM', class: 'date' }
|
||||
],
|
||||
'data-info' : 'This row likes turtles'
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
$('#object2Table').tablesorter({
|
||||
theme: 'blue',
|
||||
data : dataObject,
|
||||
widgetOptions : {
|
||||
// *** build object options ***
|
||||
build_objectRowKey : 'rows', // object key containing table rows
|
||||
build_objectCellKey : 'cells', // object key containing table cells (within the rows object)
|
||||
build_objectHeaderKey : 'headers', // object key containing table headers
|
||||
build_objectFooterKey : 'footers' // object key containing table footers
|
||||
}
|
||||
});
|
||||
|
||||
// ***************************
|
||||
// OBJECT (JSON via Ajax)
|
||||
// ***************************
|
||||
$('#object2Table2').tablesorter({
|
||||
theme: 'blue',
|
||||
widgetOptions: {
|
||||
build_type : 'json',
|
||||
build_source : { url: 'assets/build.json', dataType: 'json' }
|
||||
}
|
||||
});
|
||||
|
||||
});
|
||||
179
assets/vendor/tablesorter/docs/js/docs.js
vendored
Normal file
179
assets/vendor/tablesorter/docs/js/docs.js
vendored
Normal file
@@ -0,0 +1,179 @@
|
||||
/*jshint browser:true, jquery:true, unused:false */
|
||||
/*global prettyPrint:false */
|
||||
(function($){
|
||||
$(function(){
|
||||
var $t, t, v, animating, clicked,
|
||||
|
||||
cleanupCode = function(code){
|
||||
return code.replace(/[<>\"\'\t\n]/g, function(m) { return {
|
||||
'<' : '<',
|
||||
'>' : '>',
|
||||
"'" : ''',
|
||||
'"' : '"',
|
||||
'\t': ' ',
|
||||
'\n': '<br/>' // needed for IE
|
||||
}[m];});
|
||||
};
|
||||
|
||||
$("a.external").each(function(){this.target = '_new';});
|
||||
|
||||
// get javascript source
|
||||
if ($("#js").length) {
|
||||
$("#javascript pre").addClass('mod').html( cleanupCode( $("#js").html() ) );
|
||||
}
|
||||
if ($("#css").length) {
|
||||
$("pre.lang-css").addClass('mod').html( cleanupCode( $("#css").html() ) );
|
||||
}
|
||||
if ($("#demo").length && $("#html pre").length) {
|
||||
$("#html pre").addClass('mod').html( cleanupCode( $("#demo").html() ) );
|
||||
}
|
||||
|
||||
// apply to already pre-formatted blocks to add <br> for IE
|
||||
$('pre:not(.mod)').each(function(){
|
||||
$t = $(this);
|
||||
$t.html( cleanupCode( $t.html() ) );
|
||||
});
|
||||
|
||||
if (typeof prettyPrint !== 'undefined') { prettyPrint(); }
|
||||
|
||||
// hide child rows
|
||||
$('#root .tablesorter-childRow').hide();
|
||||
// toggle child row content, not hiding the row since we are using rowspan
|
||||
$('#root .toggle').click(function(){
|
||||
$(this).closest('tr').nextUntil('tr:not(.tablesorter-childRow)').toggle();
|
||||
return false;
|
||||
});
|
||||
|
||||
animating = false;
|
||||
clicked = false;
|
||||
$('.collapsible').hide();
|
||||
|
||||
$('a.permalink').click(function(){
|
||||
var $el = $(this);
|
||||
setTimeout(function(){
|
||||
if (!animating && !clicked) {
|
||||
animating = true;
|
||||
$el.closest('tr').find('.collapsible').slideToggle();
|
||||
setTimeout(function(){ animating = false; }, 200);
|
||||
}
|
||||
}, 200);
|
||||
return false;
|
||||
});
|
||||
$('#root .permalink').dblclick(function(){
|
||||
clicked = true;
|
||||
window.location.hash = '#' + $(this).closest('tr')[0].id;
|
||||
showProperty();
|
||||
setTimeout(function(){ clicked = false; }, 500);
|
||||
return false;
|
||||
});
|
||||
|
||||
$('.toggleAll, .showAll, .hideAll').click(function(){
|
||||
t = $.trim($(this).text());
|
||||
$(this).parent().next('table').find('.collapsible')[t]();
|
||||
return false;
|
||||
});
|
||||
|
||||
// update version number
|
||||
$t = $('.current-version');
|
||||
if ($t.length) {
|
||||
$t.html($.tablesorter.version);
|
||||
}
|
||||
|
||||
// add high visibility tags for newest versions (just grab the major revision number 2.10.0 -> 10
|
||||
t = $.tablesorter.version.replace(/(v|version|\+)/g, '').split('.');
|
||||
v = [ parseInt(t[0], 10) || 1, parseInt(t[1], 10) || 0 ];
|
||||
$('.version').each(function(){
|
||||
var i;
|
||||
$t = $(this);
|
||||
i = $t.text().replace(/(v|version|\+)/g, '').split('.');
|
||||
t = [ parseInt(i[0], 10) || 1, parseInt(i[1], 10) || 0 ];
|
||||
if (t[0] === v[0] && t[1] >= v[1] - 1 ) {
|
||||
$t.prepend('<span class="label ' + ( t[0] === v[0] && t[1] < v[1] ? ' label-default' : ' label-success' ) +
|
||||
'">'+ ($t.hasClass('updated') ? 'Updated' : 'New') + '</span> ');
|
||||
}
|
||||
});
|
||||
|
||||
$t = $('.accordion');
|
||||
if ($t.length) {
|
||||
var hashId = 0;
|
||||
if (window.location.hash) {
|
||||
$t.children('h3').each(function(i){
|
||||
var txt = $(this).find('a').text().toLowerCase().replace(/[()\"]/g,'').replace(/[\s+\/]/g,'_');
|
||||
this.id = txt;
|
||||
if (txt === window.location.hash.slice(1)) {
|
||||
hashId = i;
|
||||
}
|
||||
});
|
||||
}
|
||||
$t.each(function(){
|
||||
var $this = $(this);
|
||||
$this.accordion({
|
||||
active: hashId,
|
||||
animate: false,
|
||||
heightStyle: 'content',
|
||||
collapsible: true,
|
||||
create: function() {
|
||||
$this.children('h3').each(function(i){
|
||||
this.id = $(this).find('a').text().toLowerCase().replace(/[-()\"]/g,'').replace(/[\s+\/]/g,'_');
|
||||
$(this).before('<a class="accordion-link link" data-index="' + i + '" href="#' + this.id + '"></a>');
|
||||
});
|
||||
$this.find('.accordion-link').click(function(){
|
||||
$this.accordion( "option", "active", $(this).data('index') );
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
function showProperty(){
|
||||
var prop, $t, h = window.location.hash;
|
||||
if (h) {
|
||||
prop = $(h);
|
||||
if (prop.length && !/a|table/i.test(prop[0].tagName)) {
|
||||
prop.find('.collapsible').show();
|
||||
if (h === '#csschildrow') {
|
||||
$('#root .tablesorter-childRow').show();
|
||||
}
|
||||
// move below sticky header; added delay as there could be some lag
|
||||
setTimeout(function(){
|
||||
$t = prop.closest('table');
|
||||
h = $t[0].config.widgetOptions.$sticky.height() || 27;
|
||||
if ($t.hasClass('options') || $t.hasClass('api')) {
|
||||
$('body').scrollTop( prop.position().top - h );
|
||||
}
|
||||
}, 200);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
$(window).load(function(){
|
||||
if ($('#root').length) {
|
||||
$(window).bind('hashchange', function(){
|
||||
showProperty();
|
||||
});
|
||||
showProperty();
|
||||
}
|
||||
});
|
||||
|
||||
// append hidden parsed value to cell
|
||||
// used by feet-inch-fraction & metric parser demos
|
||||
var addParsedValues = function($t, cols, format){
|
||||
var r,
|
||||
$r = $t.find('tbody tr'),
|
||||
c = $t[0].config.cache[0].normalized;
|
||||
$r.each(function(i){
|
||||
r = this;
|
||||
$.each(cols, function(v,j){
|
||||
r.cells[j].innerHTML += ' <span class="val hidden removeme">(<span class="results">' + (format ? format(c[i][j]) : c[i][j]) + '</span>)</span>';
|
||||
});
|
||||
});
|
||||
|
||||
$('.toggleparsedvalue').on('click', function(){
|
||||
$('.val').toggleClass('hidden');
|
||||
return false;
|
||||
});
|
||||
};
|
||||
|
||||
})(jQuery);
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user