UNPKG

2.34 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: {
30 text: 'Books: '
31 },
32 alternate_rows: true,
33 btn_reset: true,
34
35 /* filter types*/
36 col_0: 'select',
37 col_4: 'select',
38 col_5: 'select',
39
40 /* cell parser for filtering images in a column */
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 /* Custom options for 'Shipping' column */
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 /* SkyBlue theme */
80 themes: [{ name: 'skyblue'}],
81
82 /* Sorting feature */
83 extensions: [{ name: 'sort' }]
84};
85
86var tf = new TableFilter('demo', 2, tfConfig);
87tf.init();
88</script>
89<!-- @import partials/pre-inline-script.html -->
90</body>
91</html>