forked from wootapa/watable
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
executable file
·260 lines (246 loc) · 21.5 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
<!DOCTYPE html>
<html>
<head>
<title>WATable</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.js" type="text/javascript"></script>
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js" type="text/javascript"></script>
<script src="jquery.watable.js" type="text/javascript" charset="utf-8"></script>
<link rel='stylesheet' href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css"/>
<link rel='stylesheet' href='watable.css'/>
<style type="text/css">
body { padding: 30px; font-size: 12px }
</style>
</head>
<body>
<h2>WATable</h2>
<p><a href="http://wootapa-watable.appspot.com/">http://wootapa-watable.appspot.com/</a></p>
<div id="div1" style="width:auto"></div>
<script type="text/javascript">
$(document).ready( function() {
//An example with all options.
var waTable = $('#div1').WATable({
debug:true, //Prints some debug info to console
pageSize: 8, //Initial pagesize
//transition: 'slide', //Type of transition when paging (bounce, fade, flip, rotate, scroll, slide).Requires https://github.com/daneden/animate.css.
//transitionDuration: 0.2, //Duration of transition in seconds.
filter: true, //Show filter fields
sorting: true, //Enable sorting
sortEmptyLast:true, //Empty values will be shown last
columnPicker: true, //Show the columnPicker button
pageSizes: [1,5,8,12,200], //Set custom pageSizes. Leave empty array to hide button.
hidePagerOnEmpty: true, //Removes the pager if data is empty.
checkboxes: true, //Make rows checkable. (Note. You need a column with the 'unique' property)
checkAllToggle:true, //Show the check-all toggle
preFill: true, //Initially fills the table with empty rows (as many as the pagesize).
//url: '/someWebservice' //Url to a webservice if not setting data manually as we do in this example
//urlData: { report:1 } //Any data you need to pass to the webservice
//urlPost: true //Use POST httpmethod to webservice. Default is GET.
types: { //Following are some specific properties related to the data types
string: {
//filterTooltip: "Giggedi..." //What to say in tooltip when hoovering filter fields. Set false to remove.
//placeHolder: "Type here..." //What to say in placeholder filter fields. Set false for empty.
},
number: {
decimals: 1 //Sets decimal precision for float types
},
bool: {
//filterTooltip: false
},
date: {
utc: true, //Show time as universal time, ie without timezones.
//format: 'yy/dd/MM', //The format. See all possible formats here http://arshaw.com/xdate/#Formatting.
datePicker: true //Requires "Datepicker for Bootstrap" plugin (http://www.eyecon.ro/bootstrap-datepicker).
}
},
actions: { //This generates a button where you can add elements.
filter: true, //If true, the filter fields can be toggled visible and hidden.
columnPicker: true, //if true, the columnPicker can be toggled visible and hidden.
custom: [ //Add any other elements here. Here is a refresh and export example.
$('<a href="#" class="refresh"><i class="icon-refresh"></i> Refresh</a>'),
$('<a href="#" class="export_all"><i class="icon-share"></i> Export all rows</a>'),
$('<a href="#" class="export_checked"><i class="icon-share"></i> Export checked rows</a>'),
$('<a href="#" class="export_filtered"><i class="icon-share"></i> Export filtered rows</a>')
]
},
tableCreated: function(data) { //Fires when the table is created / recreated. Use it if you want to manipulate the table in any way.
console.log('table created'); //data.table holds the html table element.
console.log(data); //'this' keyword also holds the html table element.
},
rowClicked: function(data) { //Fires when a row is clicked (Note. You need a column with the 'unique' property).
console.log('row clicked'); //data.event holds the original jQuery event.
console.log(data); //data.row holds the underlying row you supplied.
//data.column holds the underlying column you supplied.
//data.checked is true if row is checked.
//'this' keyword holds the clicked element.
if ( $(this).hasClass('userId') ) {
data.event.preventDefault();
alert('You clicked userId: ' + data.row.userId);
}
},
columnClicked: function(data) { //Fires when a column is clicked
console.log('column clicked'); //data.event holds the original jQuery event
console.log(data); //data.column holds the underlying column you supplied
//data.descending is true when sorted descending (duh)
},
pageChanged: function(data) { //Fires when manually changing page
console.log('page changed'); //data.event holds the original jQuery event
console.log(data); //data.page holds the new page index
},
pageSizeChanged: function(data) { //Fires when manually changing pagesize
console.log('pagesize changed');//data.event holds teh original event
console.log(data); //data.pageSize holds the new pagesize
}
}).data('WATable'); //This step reaches into the html data property to get the actual WATable object. Important if you want a reference to it as we want here.
//Generate some data
var data = getData();
waTable.setData(data); //Sets the data.
//waTable.setData(data, true); //Sets the data but prevents any previously set columns from being overwritten
//waTable.setData(data, false, false); //Sets the data and prevents any previously checked rows from being reset
var allRows = waTable.getData(false); //Gets the data you previously set.
var checkedRows = waTable.getData(true); //Gets the data you previously set, but with checked rows only.
var filteredRows = waTable.getData(false, true); //Gets the data you previously set, but with filtered rows only.
var pageSize = waTable.option("pageSize"); //Get option
//waTable.option("pageSize", pageSize); //Set option
//Example event handler triggered by the custom refresh link above.
$('body').on('click', '.refresh', function(e) {
e.preventDefault();
var data = getData();
waTable.setData(data, true);
});
//Example event handler triggered by the custom export links above.
$('body').on('click', '.export_checked, .export_filtered, .export_all', function(e) {
e.preventDefault();
var elem = $(e.target);
var data;
if (elem.hasClass('export_all')) data = waTable.getData(false);
else if (elem.hasClass('export_checked')) data = waTable.getData(true);
else if (elem.hasClass('export_filtered')) data = waTable.getData(false, true);
console.log(data.rows.length + ' rows returned');
console.log(data);
alert(data.rows.length + ' rows returned.\nSee console for details.');
});
});
//Generates some data. This step is of course normally done by your web server.
function getData() {
//First define the columns
var cols = {
userId: {
index: 1, //The order this column should appear in the table
type: "number", //The type. Possible are string, number, bool, date(in milliseconds).
friendly: "<i class='icon-user'></i>", //Name that will be used in header. Can also be any html as shown here.
format: "<a href='#' class='userId' target='_blank'>{0}</a>", //Used to format the data anything you want. Use {0} as placeholder for the actual data.
unique: true, //This is required if you want checkable rows, or to use the rowClicked callback. Be certain the values are really unique or weird things will happen.
sortOrder: "asc", //Data will initially be sorted by this column. Possible are "asc" or "desc"
tooltip: "This column has an initial filter", //Show some additional info about column
filter: "1..400" //Set initial filter.
},
name: {
index: 2,
type: "string",
friendly: "Name",
tooltip: "This column has a custom placeholder", //Show some additional info about column
placeHolder: "abc123" //Overrides default placeholder and placeholder specified in data types(row 34).
},
age: {
index: 3,
type: "number",
friendly: "Age",
sorting: false, //dont allow sorting
tooltip: "This column has filtering and sorting turned off", //Show some additional info about column
filter: false //Removes filter field for this column
},
weight: {
index: 4,
type: "number",
decimals: 2, //Force decimal precision
friendly: "Weight",
placeHolder: "50..90",
tooltip: "This column has no tooltip for the filter", //Show some additional info about column
filterTooltip: false //Turn off tooltip for this column
},
height: {
index: 5,
type: "number",
friendly: "Height(cm)",
hidden:true //Hides the column. Useful if you want this value later on but no visible to user. It's available to be visible if columnPicker is enabled.
},
important: {
index: 6,
type: "bool",
friendly: "Important"
},
someDate: {
index: 7,
type: "date", //Don't forget dates are expressed in milliseconds
friendly: "SomeDate"
}
};
/*
Create the actual data.
Whats worth mentioning is that you can use a 'format' property just as in the column definition,
but on a row level. See below on how we create a weightFormat property. This will be used when rendering the weight column.
Also, you can pre-check rows with the 'checked' property and prevent rows from being checkable with the 'checkable' property.
*/
var rows = [];
var i = 1;
while(i <= 1000)
{
var weight = (Math.floor(Math.random()*40)+50) + (Math.floor(Math.random()*100)/100);
var weightClass = weight <70 ? 'green' : weight <80 && weight >=70 ? 'yellow' : 'red';
//We leave some fields intentionally undefined, so you can see how sorting/filtering works with these.
var doc = {
userId: i,
name: i%100 == 0 ? undefined : elfName(),
age: Math.floor(Math.random()*50)+20,
weight: weight > 50 && weight < 60 ? undefined:weight,
weightFormat: "<div class='" + weightClass + "'>{0}</div>",
height: Math.floor(Math.random()*50)+150,
important: i%3 == 0 ? undefined : i%4 == 0,
someDate: i%4 == 0
? undefined
: Date.now() + (i*Math.floor(Math.random()*(60*60*24*100))),
checkable: i % 4 != 0,
checked: i % 3 == 0
};
rows.push(doc);
i++;
}
//Create the returning object. Besides cols and rows, you can also pass any other object you would need later on.
var data = {
cols: cols,
rows: rows,
otherStuff: {
thatIMight: 1,
needLater: true
}
};
return data;
}
//Helper function to generate names
function elfName() {
var elf_male = new Array("Abardon", "Acaman", "Achard", "Ackmard", "Agon", "Agnar", "Abdun", "Aidan", "Airis", "Aldaren", "Alderman", "Alkirk", "Amerdan", "Anfarc", "Aslan", "Actar", "Atgur", "Atlin", "Aldan", "Badek", "Baduk", "Bedic", "Beeron", "Bein", "Bithon", "Bohl", "Boldel", "Bolrock", "Bredin", "Bredock", "Breen", "tristan", "Bydern", "Cainon", "Calden", "Camon", "Cardon", "Casdon", "Celthric", "Cevelt", "Chamon", "Chidak", "Cibrock", "Cipyar", "Colthan", "Connell", "Cordale", "Cos", "Cyton", "Daburn", "Dawood", "Dak", "Dakamon", "Darkboon", "Dark", "Darg", "Darmor", "Darpick", "Dask", "Deathmar", "Derik", "Dismer", "Dokohan", "Doran", "Dorn", "Dosman", "Draghone", "Drit", "Driz", "Drophar", "Durmark", "Dusaro", "Eckard", "Efar", "Egmardern", "Elvar", "Elmut", "Eli", "Elik", "Elson", "Elthin", "Elbane", "Eldor", "Elidin", "Eloon", "Enro", "Erik", "Erim", "Eritai", "Escariet", "Espardo", "Etar", "Eldar", "Elthen", "Elfdorn", "Etran", "Eythil", "Fearlock", "Fenrirr", "Fildon", "Firdorn", "Florian", "Folmer", "Fronar", "Fydar", "Gai", "Galin", "Galiron", "Gametris", "Gauthus", "Gehardt", "Gemedes", "Gefirr", "Gibolt", "Geth", "Gom", "Gosform", "Gothar", "Gothor", "Greste", "Grim", "Gryni", "Gundir", "Gustov", "Halmar", "Haston", "Hectar", "Hecton", "Helmon", "Hermedes", "Hezaq", "Hildar", "Idon", "Ieli", "Ipdorn", "Ibfist", "Iroldak", "Ixen", "Ixil", "Izic", "Jamik", "Jethol", "Jihb", "Jibar", "Jhin", "Julthor", "Justahl", "Kafar", "Kaldar", "Kelar", "Keran", "Kib", "Kilden", "Kilbas", "Kildar", "Kimdar", "Kilder", "Koldof", "Kylrad", "Lackus", "Lacspor", "Lahorn", "Laracal", "Ledal", "Leith", "Lalfar", "Lerin", "Letor", "Lidorn", "Lich", "Loban", "Lox", "Ludok", "Ladok", "Lupin", "Lurd", "Mardin", "Markard", "Merklin", "Mathar", "Meldin", "Merdon", "Meridan", "Mezo", "Migorn", "Milen", "Mitar", "Modric", "Modum", "Madon", "Mafur", "Mujardin", "Mylo", "Mythik", "Nalfar", "Nadorn", "Naphazw", "Neowald", "Nildale", "Nizel", "Nilex", "Niktohal", "Niro", "Nothar", "Nathon", "Nadale", "Nythil", "Ozhar", "Oceloth", "Odeir", "Ohmar", "Orin", "Oxpar", "Othelen", "Padan", "Palid", "Palpur", "Peitar", "Pendus", "Penduhl", "Pildoor", "Puthor", "Phar", "Phalloz", "Qidan", "Quid", "Qupar", "Randar", "Raydan", "Reaper", "Relboron", "Riandur", "Rikar", "Rismak", "Riss", "Ritic", "Ryodan", "Rysdan", "Rythen", "Rythorn", "Sabalz", "Sadaron", "Safize", "Samon", "Samot", "Secor", "Sedar", "Senic", "Santhil", "Sermak", "Seryth", "Seth", "Shane", "Shard", "Shardo", "Shillen", "Silco", "Sildo", "Silpal", "Sithik", "Soderman", "Sothale", "Staph", "Suktar", "zuth", "Sutlin", "Syr", "Syth", "Sythril", "Talberon", "Telpur", "Temil", "Tamilfist", "Tempist", "Teslanar", "Tespan", "Tesio", "Thiltran", "Tholan", "Tibers", "Tibolt", "Thol", "Tildor", "Tilthan", "Tobaz", "Todal", "Tothale", "Touck", "Tok", "Tuscan", "Tusdar", "Tyden", "Uerthe", "Uhmar", "Uhrd", "Updar", "Uther", "Vacon", "Valker", "Valyn", "Vectomon", "Veldar", "Velpar", "Vethelot", "Vildher", "Vigoth", "Vilan", "Vildar", "Vi", "Vinkol", "Virdo", "Voltain", "Wanar", "Wekmar", "Weshin", "Witfar", "Wrathran", "Waytel", "Wathmon", "Wider", "Wyeth", "Xandar", "Xavor", "Xenil", "Xelx", "Xithyl", "Yerpal", "Yesirn", "Ylzik", "Zak", "Zek", "Zerin", "Zestor", "Zidar", "Zigmal", "Zilex", "Zilz", "Zio", "Zotar", "Zutar", "Zytan");
var elf_female = new Array("Acele Acholate", "Ada", "Adiannon", "Adorra", "Ahanna", "Akara", "Akassa", "Akia", "Amara", "Amarisa", "Amarizi", "Ana", "Andonna", "Ariannona", "Arina", "Arryn", "Asada", "Awnia", "Ayne", "Basete", "Bathelie", "Bethel", "Brana", "Brynhilde", "Calene", "Calina", "Celestine", "Corda", "Enaldie", "Enoka", "Enoona", "Errinaya", "Fayne", "Frederika", "Frida", "Gvene", "Gwethana", "Helenia", "Hildandi", "Helvetica", "Idona", "Irina", "Irene", "Illia", "Irona", "Justalyne", "Kassina", "Kilia", "Kressara", "Laela", "Laenaya", "Lelani", "Luna", "Linyah", "Lyna", "Lynessa", "Mehande", "Melisande", "Midiga", "Mirayam", "Mylene", "Naria", "Narisa", "Nelena", "Nimaya", "Nymia", "Ochala", "Olivia", "Onathe", "Parthinia", "Philadona", "Prisane", "Rhyna", "Rivatha", "Ryiah", "Sanata", "Sathe", "Senira", "Sennetta", "Serane", "Sevestra", "Sidara", "Sidathe", "Sina", "Sunete", "Synestra", "Sythini", "zena", "Tabithi", "Tomara", "Teressa", "Tonica", "Thea", "Teressa", "Urda", "Usara", "Useli", "Unessa", "ursula", "Venessa", "Wanera", "Wellisa", "yeta", "Ysane", "Yve", "Yviene", "Zana", "Zathe", "Zecele", "Zenobe", "Zema", "Zestia", "Zilka", "Zoucka", "Zona", "Zyneste", "Zynoa");
var elf_surname = new Array("Abardon", "Acaman", "Achard", "Ackmard", "Agon", "Agnar", "Aldan", "Abdun", "Aidan", "Airis", "Aldaren", "Alderman", "Alkirk", "Amerdan", "Anfarc", "Aslan", "Actar", "Atgur", "Atlin", "Badek", "Baduk", "Bedic", "Beeron", "Bein", "Bithon", "Bohl", "Boldel", "Bolrock", "Bredin", "Bredock", "Breen", "tristan", "Bydern", "Cainon", "Calden", "Camon", "Cardon", "Casdon", "Celthric", "Cevelt", "Chamon", "Chidak", "Cibrock", "Cipyar", "Colthan", "Connell", "Cordale", "Cos", "Cyton", "Daburn", "Dawood", "Dak", "Dakamon", "Darkboon", "Dark", "Dark", "Darmor", "Darpick", "Dask", "Deathmar", "Derik", "Dismer", "Dokohan", "Doran", "Dorn", "Dosman", "Draghone", "Drit", "Driz", "Drophar", "Durmark", "Dusaro", "Eckard", "Efar", "Egmardern", "Elvar", "Elmut", "Eli", "Elik", "Elson", "Elthin", "Elbane", "Eldor", "Elidin", "Eloon", "Enro", "Erik", "Erim", "Eritai", "Escariet", "Espardo", "Etar", "Eldar", "Elthen", "Etran", "Eythil", "Fearlock", "Fenrirr", "Fildon", "Firdorn", "Florian", "Folmer", "Fronar", "Fydar", "Gai", "Galin", "Galiron", "Gametris", "Gauthus", "Gehardt", "Gemedes", "Gefirr", "Gibolt", "Geth", "Gom", "Gosform", "Gothar", "Gothor", "Greste", "Grim", "Gryni", "Gundir", "Gustov", "Halmar", "Haston", "Hectar", "Hecton", "Helmon", "Hermedes", "Hezaq", "Hildar", "Idon", "Ieli", "Ipdorn", "Ibfist", "Iroldak", "Ixen", "Ixil", "Izic", "Jamik", "Jethol", "Jihb", "Jibar", "Jhin", "Julthor", "Justahl", "Kafar", "Kaldar", "Kelar", "Keran", "Kib", "Kilden", "Kilbas", "Kildar", "Kimdar", "Kilder", "Koldof", "Kylrad", "Lackus", "Lacspor", "Lahorn", "Laracal", "Ledal", "Leith", "Lalfar", "Lerin", "Letor", "Lidorn", "Lich", "Loban", "Lox", "Ludok", "Ladok", "Lupin", "Lurd", "Mardin", "Markard", "Merklin", "Mathar", "Meldin", "Merdon", "Meridan", "Mezo", "Migorn", "Milen", "Mitar", "Modric", "Modum", "Madon", "Mafur", "Mujardin", "Mylo", "Mythik", "Nalfar", "Nadorn", "Naphazw", "Neowald", "Nildale", "Nizel", "Nilex", "Niktohal", "Niro", "Nothar", "Nathon", "Nadale", "Nythil", "Ozhar", "Oceloth", "Odeir", "Ohmar", "Orin", "Oxpar", "Othelen", "Padan", "Palid", "Palpur", "Peitar", "Pendus", "Penduhl", "Pildoor", "Puthor", "Phar", "Phalloz", "Qidan", "Quid", "Qupar", "Randar", "Raydan", "Reaper", "Relboron", "Riandur", "Rikar", "Rismak", "Riss", "Ritic", "Ryodan", "Rysdan", "Rythen", "Rythorn", "Sabalz", "Sadaron", "Safize", "Samon", "Samot", "Secor", "Sedar", "Senic", "Santhil", "Sermak", "Seryth", "Seth", "Shane", "Shard", "Shardo", "Shillen", "Silco", "Sildo", "Silpal", "Sithik", "Soderman", "Sothale", "Staph", "Suktar", "zuth", "Sutlin", "Syr", "Syth", "Sythril", "Talberon", "Telpur", "Temil", "Tamilfist", "Tempist", "Teslanar", "Tespan", "Tesio", "Thiltran", "Tholan", "Tibers", "Tibolt", "Thol", "Tildor", "Tilthan", "Tobaz", "Todal", "Tothale", "Touck", "Tok", "Tuscan", "Tusdar", "Tyden", "Uerthe", "Uhmar", "Uhrd", "Updar", "Uther", "Vacon", "Valker", "Valyn", "Vectomon", "Veldar", "Velpar", "Vethelot", "Vildher", "Vigoth", "Vilan", "Vildar", "Vi", "Vinkol", "Virdo", "Voltain", "Wanar", "Wekmar", "Weshin", "Witfar", "Wrathran", "Waytel", "Wathmon", "Wider", "Wyeth", "Xandar", "Xavor", "Xenil", "Xelx", "Xithyl", "Yerpal", "Yesirn", "Ylzik", "Zak", "Zek", "Zerin", "Zestor", "Zidar", "Zigmal", "Zilex", "Zilz", "Zio", "Zotar", "Zutar", "Zytan");
var prefix_male = elf_male;
var prefix_female = elf_female;
var suffix = elf_surname;
var n1m = parseInt(Math.random() * prefix_male.length);
var n1f = parseInt(Math.random() * prefix_female.length);
var n2 = parseInt(Math.random() * suffix.length);
var n2ekstra = parseInt(Math.random() * suffix.length);
var extraname = "extranahme";
var prename_male = prefix_male[n1m].slice(0, 1).toUpperCase() + prefix_male[n1m].slice(1);
var prename_female = prefix_female[n1f].slice(0, 1).toUpperCase() + prefix_female[n1f].slice(1);
var sufname = suffix[n2].slice(0, 1).toUpperCase() + suffix[n2].slice(1);
var extraname = suffix[n2ekstra].slice(0, 1).toUpperCase() + suffix[n2ekstra].slice(1);
var n3 = parseInt(Math.random() * 100);
if (n3 <= 40) {
name = prename_male + " " + sufname
} else if (n3 > 40 && n3 <= 70) {
name = prename_female + " " + sufname
}
return name;
}
</script>
</body>
</html>