UNPKG

2.31 kBHTMLView Raw
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <title>{NAME} v{VERSION} - Filter and Sort Images Demo</title>
5 <!-- @import partials/style.html -->
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<!-- @import partials/pre.html -->
17<!-- @import partials/books-table-with-images.html -->
18
19<!-- @import partials/tablefilter-script.html -->
20<script data-config>
21var 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 /* filter types*/
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 /* Custom options for 'Shipping' column */
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 /* SkyBlue theme */
78 themes: [{ name: 'skyblue'}],
79
80 /* Sorting feature */
81 extensions: [{ name: 'sort' }]
82};
83
84var tf = new TableFilter('demo', 2, tfConfig);
85tf.init();
86</script>
87<!-- @import partials/pre-inline-script.html -->
88</body>
89</html>