Skip to content
This repository was archived by the owner on Feb 2, 2025. It is now read-only.

Commit 61ef25b

Browse files
l-linl-lin
committed
Update light-column-filter doc #600 
1 parent 49d4274 commit 61ef25b

File tree

8 files changed

+238
-24
lines changed

8 files changed

+238
-24
lines changed

‎demo/withPlugins/withLightColumnFilter.html‎

Lines changed: 20 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -12,9 +12,6 @@ <h1><i class="fa fa-play"></i>&nbsp;With the <a href="https://github.com/thansen
1212
<p class="alert alert-warning">
1313
<i class="fa fa-warning"></i> The Light Column Filter only works with serverside processing! <br>
1414
</p>
15-
<p class="alert alert-warning">
16-
<i class="fa fa-warning"></i> The Light Column Filter does not work with <code>Responsive</code>. Do not use with normal <code>Column Filter</code>
17-
</p>
1815
<p>
1916
You also need to add the dependency <code>datatables.light-columnfilter</code> to your Angular app.
2017
</p>
@@ -67,9 +64,26 @@ <h1><i class="fa fa-play"></i>&nbsp;With the <a href="https://github.com/thansen
6764
vm.dtOptions = DTOptionsBuilder.fromSource('data.json')
6865
.withPaginationType('full_numbers')
6966
.withLightColumnFilter({
70-
0 : { "type" : "text"},
71-
1 : { "type" : "text"},
72-
2 : { "type" : "text"}
67+
'0' : {
68+
type : 'text'
69+
},
70+
'1' : {
71+
type : 'text'
72+
},
73+
'2' : {
74+
type : 'select',
75+
values: [{
76+
value: 'Yoda', label: 'Yoda foobar'
77+
}, {
78+
value: 'Titi', label: 'Titi foobar'
79+
}, {
80+
value: 'Kyle', label: 'Kyle foobar'
81+
}, {
82+
value: 'Bar', label: 'Bar foobar'
83+
}, {
84+
value: 'Whateveryournameis', label: 'Whateveryournameis foobar'
85+
}]
86+
}
7387
});
7488
vm.dtColumns = [
7589
DTColumnBuilder.newColumn('id').withTitle('ID'),

‎demo/withPlugins/withLightColumnFilter.js‎

Lines changed: 20 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,9 +7,26 @@ function WithLightColumnFilterCtrl(DTOptionsBuilder, DTColumnBuilder) {
77
vm.dtOptions = DTOptionsBuilder.fromSource('data.json')
88
.withPaginationType('full_numbers')
99
.withLightColumnFilter({
10-
0 : { "type" : "text"},
11-
1 : { "type" : "text"},
12-
2 : { "type" : "text"}
10+
'0' : {
11+
type : 'text'
12+
},
13+
'1' : {
14+
type : 'text'
15+
},
16+
'2' : {
17+
type : 'select',
18+
values: [{
19+
value: 'Yoda', label: 'Yoda foobar'
20+
}, {
21+
value: 'Titi', label: 'Titi foobar'
22+
}, {
23+
value: 'Kyle', label: 'Kyle foobar'
24+
}, {
25+
value: 'Bar', label: 'Bar foobar'
26+
}, {
27+
value: 'Whateveryournameis', label: 'Whateveryournameis foobar'
28+
}]
29+
}
1330
});
1431
vm.dtColumns = [
1532
DTColumnBuilder.newColumn('id').withTitle('ID'),

‎vendor/datatables-light-columnfilter/.bower.json‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -14,15 +14,15 @@
1414
"datatables": "1.10.*"
1515
},
1616
"homepage": "https://github.com/thansen-solire/datatables-light-columnfilter",
17-
"version": "0.0.7",
18-
"_release": "0.0.7",
17+
"version": "0.0.14",
18+
"_release": "0.0.14",
1919
"_resolution": {
2020
"type": "version",
21-
"tag": "0.0.7",
22-
"commit": "7d35bbd17979a5018be01fb3b6f26e00d887e9db"
21+
"tag": "0.0.14",
22+
"commit": "d9a595ae10b9c5cc5fb481792876636503aa420b"
2323
},
2424
"_source": "git://github.com/thansen-solire/datatables-light-columnfilter.git",
25-
"_target": "~0.0.7",
25+
"_target": "~0.0.14",
2626
"_originalSource": "datatables-light-columnfilter",
2727
"_direct": true
2828
}

‎vendor/datatables-light-columnfilter/dist/dataTables.lcf.bootstrap3.js‎

Lines changed: 107 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,107 @@
1+
/*!
2+
* @author Thomas <thansen@solire.fr>
3+
* @licence CC BY-NC 4.0 http://creativecommons.org/licenses/by-nc/4.0/
4+
*
5+
* Wrapper module for bootstrap datepicker
6+
*
7+
* https://github.com/eternicode/bootstrap-datepicker
8+
* to install : bower install bootstrap-datepicker#1.3.*
9+
* or add : "bootstrap-datepicker": "1.3.*" in your bower.json
10+
*/
11+
(function (window, document) {
12+
var factory = function ($, ColumnFilter) {
13+
'use strict';
14+
15+
// dans bootstrap
16+
ColumnFilter.filter.selectBase = $.extend(true, {}, ColumnFilter.filter.select);
17+
ColumnFilter.filter.select = {};
18+
$.extend(
19+
ColumnFilter.filter.select,
20+
ColumnFilter.filter.selectBase,
21+
{
22+
dom: function (th) {
23+
ColumnFilter.filter.selectBase.dom.call(this, th);
24+
25+
this.elements.addClass('form-control input-sm');
26+
27+
return this.elements;
28+
}
29+
}
30+
);
31+
32+
ColumnFilter.filter.textBase = $.extend(true, {}, ColumnFilter.filter.text);
33+
ColumnFilter.filter.text = {};
34+
$.extend(
35+
ColumnFilter.filter.text,
36+
ColumnFilter.filter.textBase,
37+
{
38+
dom: function (th) {
39+
ColumnFilter.filter.textBase.dom.call(this, th);
40+
41+
this.elements.addClass('form-control input-sm');
42+
43+
return this.elements;
44+
}
45+
}
46+
);
47+
48+
ColumnFilter.filter.dateRangeBase = $.extend(true, {}, ColumnFilter.filter.dateRange);
49+
ColumnFilter.filter.dateRange = {};
50+
$.extend(ColumnFilter.filter.dateRange, ColumnFilter.filter.dateRangeBase, {
51+
separator: '~',
52+
dom: function(th) {
53+
var self = this, input1, input2;
54+
55+
this.div = $('<div>').addClass('input-group input-daterange');
56+
input1 = $('<input>', {
57+
type: 'text'
58+
}).addClass('form-control input-sm').attr('name', 'start').appendTo(this.div);
59+
60+
input2 = $('<input>', {
61+
type: 'text'
62+
}).addClass('form-control input-sm').attr('name', 'end').appendTo(this.div);
63+
64+
this.elements = input1.add(input2);
65+
66+
this.div.appendTo(th);
67+
68+
return this.elements;
69+
},
70+
bindEvents: function () {
71+
var self = this;
72+
73+
this.div.datepicker('clearDates').on('changeDate', function () {
74+
self.search();
75+
});
76+
},
77+
format: function (value) {
78+
return value.split('/').reverse().join('-');
79+
},
80+
request: function () {
81+
var
82+
self = this,
83+
search = []
84+
;
85+
86+
self.elements.each(function () {
87+
var value = $(this).val();
88+
value = self.options.format(value);
89+
search.push(value);
90+
});
91+
92+
return search.join(self.options.separator);
93+
}
94+
});
95+
};
96+
97+
// Define as an AMD module if possible
98+
if (typeof define === 'function' && define.amd) {
99+
define(['jquery', 'datatables-light-columnfilter'], factory);
100+
} else if (typeof exports === 'object') {
101+
// Node/CommonJS
102+
factory(require('jquery'), require('datatables-light-columnfilter'));
103+
} else if (jQuery) {
104+
// Otherwise simply initialise as normal, stopping multiple evaluation
105+
factory(jQuery, jQuery.fn.dataTable.ColumnFilter);
106+
}
107+
})(window, document);

‎vendor/datatables-light-columnfilter/dist/dataTables.lcf.bootstrap3.min.js‎

Lines changed: 11 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎vendor/datatables-light-columnfilter/dist/dataTables.lcf.datepicker.fr.min.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,4 +8,4 @@
88
* to install : bower install bootstrap-datepicker#1.3.*
99
* or add : "bootstrap-datepicker": "1.3.*" in your bower.json
1010
*/
11-
!function(){var a=function(a,b){"use strict";a.fn.datepicker.defaults.format="dd/mm/yyyy",a.extend(b.filter.dateRange,{separator:"~",bindEvents:function(){var a=this;a.elements.datepicker().on("changeDate",function(){a.search()})},format:function(a){return a.split("/").reverse().join("-")},request:function(){var b=this,c=[];return b.elements.each(function(){var d=a(this).val();d=b.options.format(d),c.push(d)}),c.join(b.options.separator)}})};"function"==typeof define&&define.amd?define(["jquery","datatables-light-columnfilter","datepicker"],a):"object"==typeof exports?a(require("jquery"),require("datatables-light-columnfilter"),require("datepicker")):jQuery&&a(jQuery,jQuery.fn.dataTable.ColumnFilter)}(window,document);
11+
!function(a,b){var c=function(a,b){"use strict";a.fn.datepicker.defaults.format="dd/mm/yyyy",a.extend(b.filter.dateRange,{separator:"~",bindEvents:function(){var a=this;a.elements.datepicker().on("changeDate",function(){a.search()})},format:function(a){return a.split("/").reverse().join("-")},request:function(){var b=this,c=[];return b.elements.each(function(){var d=a(this).val();d=b.options.format(d),c.push(d)}),c.join(b.options.separator)}})};"function"==typeof define&&define.amd?define(["jquery","datatables-light-columnfilter","datepicker"],c):"object"==typeof exports?c(require("jquery"),require("datatables-light-columnfilter"),require("datepicker")):jQuery&&c(jQuery,jQuery.fn.dataTable.ColumnFilter)}(window,document);

‎vendor/datatables-light-columnfilter/dist/dataTables.lightColumnFilter.js‎

Lines changed: 73 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -122,20 +122,39 @@
122122

123123
self.dataTable.columns().eq(0).each(function(index){
124124
var
125-
columnOptions = index in options ? options[index] : {},
126-
column = new Column(
127-
self.dataTable,
128-
index,
129-
self.dataTable.column(index),
130-
columnOptions
131-
),
132-
th = $('<th>').appendTo(tr)
125+
className = self.dataTable.column(index).header().className,
126+
never = className.match(/\bnever\b/),
127+
columnOptions,
128+
column,
129+
th
133130
;
131+
132+
if (never && ('responsive' in self.dataTable)) {
133+
return;
134+
}
135+
136+
columnOptions = index in options ? options[index] : {};
137+
column = new Column(
138+
self.dataTable,
139+
index,
140+
self.dataTable.column(index),
141+
columnOptions
142+
);
143+
th = $('<th>').appendTo(tr);
134144
self.columns.push(column);
135145

136146
column.dom(th);
137147
column.bindEvents();
138148
});
149+
150+
// Hide and Show column filter th according to datatable build-in columns visibility
151+
$(self.dataTable.table().node()).on('column-visibility.dt', function (e, settings, column, state) {
152+
if (state) {
153+
$('th', tr).eq(column - 1).show()
154+
} else {
155+
$('th', tr).eq(column - 1).hide()
156+
}
157+
});
139158
},
140159
/**
141160
* Add a custom filter
@@ -173,6 +192,11 @@
173192
type: 'text'
174193
}).appendTo(th);
175194

195+
if (typeof self.options.width !== 'undefined') {
196+
self.elements.css('width', self.options.width);
197+
} else {
198+
self.elements.css('width', '100%');
199+
}
176200

177201
return self.elements;
178202
},
@@ -210,6 +234,41 @@
210234
return self.elements.val();
211235
}
212236
},
237+
select: {
238+
dom: function(th){
239+
var self = this, select;
240+
241+
select = $('<select>').append('<option></option>');
242+
243+
select.addClass(self.options.cssClass);
244+
245+
$.each(self.options.values, function(ii, value){
246+
$('<option>').val(value.value).text(value.label).appendTo(select);
247+
});
248+
249+
self.elements = select.appendTo(th);
250+
251+
if (typeof self.options.width !== 'undefined') {
252+
self.elements.css('width', self.options.width);
253+
} else {
254+
self.elements.css('width', '100%');
255+
}
256+
257+
return self.elements;
258+
},
259+
bindEvents: function(){
260+
var self = this;
261+
262+
self.elements.on('change', function(){
263+
self.search();
264+
});
265+
},
266+
request: function(){
267+
var self = this;
268+
269+
return self.elements.val();
270+
}
271+
},
213272
dateRange: {
214273
separator: '~',
215274
/**
@@ -228,6 +287,12 @@
228287
type: 'text'
229288
})).appendTo(th);
230289

290+
if (typeof self.options.width !== 'undefined') {
291+
self.elements.css('width', self.options.width);
292+
} else {
293+
self.elements.css('width', '50%');
294+
}
295+
231296
return self.elements;
232297
},
233298
/**

‎vendor/datatables-light-columnfilter/dist/dataTables.lightColumnFilter.min.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)