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: true,
|
30 | rows_counter_text: 'Books: ',
|
31 | alternate_rows: true,
|
32 | btn_reset: true,
|
33 |
|
34 |
|
35 | col_0: 'select',
|
36 | col_4: 'select',
|
37 | col_5: 'select',
|
38 |
|
39 | /* custom_cell_data delegate used for filtering
|
40 | images in a column */
|
41 | custom_cell_data_cols: [0, 4],
|
42 | custom_cell_data: function(o, cell, colIndex){
|
43 | if(colIndex === 0){
|
44 | var img = cell.getElementsByTagName('img')[0];
|
45 | if(!img){
|
46 | return '';
|
47 | }
|
48 | return img.alt;
|
49 | } else if(colIndex === 4){
|
50 | var chk = cell.getElementsByTagName('input')[0];
|
51 | if(chk.checked){
|
52 | return 'yes';
|
53 | } else {
|
54 | return 'no';
|
55 | }
|
56 | }
|
57 | },
|
58 |
|
59 |
|
60 | custom_options: {
|
61 | cols: [5],
|
62 | texts: [
|
63 | [
|
64 | '1 Hour', '12 Hours', '24 Hours',
|
65 | '2 Days', 'na'
|
66 | ]
|
67 | ],
|
68 | values: [
|
69 | [
|
70 | '1 Hour', '12 Hours', '24 Hours',
|
71 | '2 Days', 'na'
|
72 | ]
|
73 | ],
|
74 | sorts: [false]
|
75 | },
|
76 |
|
77 |
|
78 | themes: [{ name: 'skyblue'}],
|
79 |
|
80 |
|
81 | extensions: [{ name: 'sort' }]
|
82 | };
|
83 |
|
84 | var tf = new TableFilter('demo', 2, tfConfig);
|
85 | tf.init();
|
86 | </script>
|
87 |
|
88 | </body>
|
89 | </html>
|