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
|
//-----------------------IMPORTANT----------------------------
// parameters' specs
// options:
// JSon with structure
// EXAMPLE
// [0] [
// data_table: 'store_deliveries',
// title: 'Πεδία'
// ]
// [1] [
// checked: "true" --> required
// class: "js-filter_checkbox checkbox_top" --> required
// data_column: "dt-order_quantity"
// value: "Προϊόντα"
// ]
// --------------------------------------------------------
// container id optional
// when given the drop down menu will be generated inside
// else the default 'filter' value will take place
function generate_drop_down_fields(options, container_id) {
$('#'+(typeof container_id == 'undefined' ? 'filter' : container_id)).append(generate_drop_down_menu_fields(options));
generate_drop_down_functionality_fields(options[0].data_table);
$('.dropdown-toggle').dropdown();
// Calculate dropdown height.
var dropdown_height = parseInt($('#' + (typeof container_id == 'undefined' ? 'filter' : container_id) + ' .dropdown-menu').css('height'));
// Adjust table wrapper height to fit, dropdown menu.
$('#'+(typeof container_id == 'undefined' ? 'filter' : container_id)).closest('.table-responsive').css('min-height' , `${dropdown_height + 192}px`);
}
//Given the drop down options "draw" the drop down menu FIELDS
function generate_drop_down_menu_fields(options) {
var result ='<div class="dropdown drop-menu">'+
'<button class="btn dropdown-toggle btn-default" type="button" data-toggle="dropdown"> <i class="fa fa-list"></i> <span class="filter-title">'+ options[0].title +
'</span><span class="caret"></span></button>'+
'<ul class="dropdown-menu">';
options[1].forEach(option => {
result += `<li><label class="container_checkbox">
<input class="` + option.class +
'" type="checkbox" ' + ( option.checked ? 'data-default="' + option.checked + '"' : '' ) +
' data-column= "'+ option.data_column +'"/>'+
'<span>'+ option.value +'</span></label></li>'
});
result += ' </ul>'+
'</div>'+
'</div>';
return result;
}
$(document).on('click', '.container_checkbox', function (e) {
e.stopPropagation();
});
//Given the datatable_id(!required) generate the functionality (checked or not) for dropdown
function generate_drop_down_functionality_fields(data_table_id) {
var table = $('#'+data_table_id);
$(".js-filter_checkbox[data-default='true']").prop("checked", true);
$(".js-filter_checkbox").each(function () {
table.DataTable().columns('.' + $(this).attr('data-column')).visible($(this).is(':checked'));
});
$(".js-filter_checkbox").change(function () {
table.DataTable().columns('.' + $(this).attr('data-column')).visible($(this).is(':checked'));
});
}
//Given the drop down options "draw" the drop down menu FILTERS
function generate_drop_down_menu_filters (options) {
var result ='<div class="dropdown drop-menu">'+
'<button class="btn dropdown-toggle btn-default" type="button" data-toggle="dropdown"> <i class="fa fa-filter"></i> <span class="filter-title">'+ options[0].title +
'</span><span class="caret"></span></button>'+
'<ul class="dropdown-menu">';
options[1].forEach(option => {
result += `<li><label class="container_generated_checkbox">
<input class="` + option.class +
'" type="checkbox" ' + option.checked + ' ' + ( option.data_column ? 'data-column="' + option.checked + '"/>' : '/>' ) +
'<span>'+ option.value +'</span></label></li>'
});
result += ' </ul>'+
'</div>'+
'</div>';
//activate the dropdown
$('.dropdown-toggle').dropdown();
return result;
}
$(document).on('click', '.container_generated_checkbox', function (e) {
e.stopPropagation();
});
function build_fuctionality(types, table) {
$('.js-filter_row_checkbox').change(function () {
var terms = [];
types.forEach(element => {
if ($('.js-' + element + '-checkbox').is(':checked')) {
terms.push(element);
}
})
var search_terms = terms.join('|');
table.columns('.dt-type').search(search_terms, true, false).draw();
})
};
|
