1 | <!DOCTYPE html>
|
2 | <html lang="en">
|
3 | <head>
|
4 | <title>{NAME} v{VERSION} - Filter and Sort Images Demo</title>
|
5 |
|
6 | </head>
|
7 | <body>
|
8 | <h1>{NAME} v{VERSION}</h1>
|
9 | <h2>Filter and sort images demo</h2>
|
10 | <p>
|
11 | This demo shows how to filter and sort a column containing images by using
|
12 | the <code>custom_cell_data</code> delegate and the
|
13 | <code>data-tf-sortKey</code> attribute.
|
14 | </p>
|
15 |
|
16 |
|
17 |
|
18 |
|
19 |
|
20 | <script data-config>
|
21 | var tfConfig = {
|
22 | base_path: '../dist/tablefilter/',
|
23 | filters_row_index: 2,
|
24 | headers_row_index: 1,
|
25 | col_types: [
|
26 | 'string', 'string', 'string',
|
27 | 'number', 'string', 'string', 'date'
|
28 | ],
|
29 | rows_counter: {
|
30 | text: 'Books: '
|
31 | },
|
32 | alternate_rows: true,
|
33 | btn_reset: true,
|
34 |
|
35 |
|
36 | col_0: 'select',
|
37 | col_4: 'select',
|
38 | col_5: 'select',
|
39 |
|
40 |
|
41 | cell_parser: {
|
42 | cols: [0, 4],
|
43 | parse: function(o, cell, colIndex){
|
44 | if(colIndex === 0){
|
45 | var img = cell.getElementsByTagName('img')[0];
|
46 | if(!img){
|
47 | return '';
|
48 | }
|
49 | return img.alt;
|
50 | } else if(colIndex === 4){
|
51 | var chk = cell.getElementsByTagName('input')[0];
|
52 | if(chk.checked){
|
53 | return 'yes';
|
54 | } else {
|
55 | return 'no';
|
56 | }
|
57 | }
|
58 | }
|
59 | },
|
60 |
|
61 |
|
62 | custom_options: {
|
63 | cols: [5],
|
64 | texts: [
|
65 | [
|
66 | '1 Hour', '12 Hours', '24 Hours',
|
67 | '2 Days', 'na'
|
68 | ]
|
69 | ],
|
70 | values: [
|
71 | [
|
72 | '1 Hour', '12 Hours', '24 Hours',
|
73 | '2 Days', 'na'
|
74 | ]
|
75 | ],
|
76 | sorts: [false]
|
77 | },
|
78 |
|
79 |
|
80 | themes: [{ name: 'skyblue'}],
|
81 |
|
82 |
|
83 | extensions: [{ name: 'sort' }]
|
84 | };
|
85 |
|
86 | var tf = new TableFilter('demo', 2, tfConfig);
|
87 | tf.init();
|
88 | </script>
|
89 |
|
90 | </body>
|
91 | </html>
|