diff --git a/features/searchPane/dataTables.searchPane.css b/features/searchPane/dataTables.searchPane.css
index d980ea1..d005947 100644
--- a/features/searchPane/dataTables.searchPane.css
+++ b/features/searchPane/dataTables.searchPane.css
@@ -12,8 +12,7 @@ div.dt-searchPanes div.pane {
flex: 1;
margin: 1em 0.5%;
border: 1px solid #ccc;
- /*width: 15.5%;
- margin: 0 0.583333333%;*/
+ border-radius: 3px;
}
div.dt-searchPanes div.pane button[type=button] {
display: none;
@@ -25,7 +24,7 @@ div.dt-searchPanes div.pane.filtering button[type=button] {
top: 6px;
border: 1px solid #999;
background: rgba(0, 0, 0, 0.1);
- border-radius: 3px;
+ border-radius: 16px;
cursor: pointer;
}
div.dt-searchPanes div.pane.filtering button[type=button]:hover {
@@ -33,15 +32,15 @@ div.dt-searchPanes div.pane.filtering button[type=button]:hover {
}
div.dt-searchPanes div.pane div.title {
box-sizing: border-box;
- height: 30px;
- padding: 0.35em;
+ height: 36px;
+ padding: 9px 0.35em;
font-size: 1.1em;
- background-color: rgba(0, 0, 0, 0.075);
- border-bottom: 1px solid #ddd;
+ background-color: #e8e9eb;
+ border-bottom: 1px solid rgba(0, 0, 0, 0.15);
}
div.dt-searchPanes div.pane div.scroller {
position: absolute;
- top: 30px;
+ top: 36px;
bottom: 0;
left: 0;
right: 0;
@@ -80,8 +79,7 @@ div.dt-searchPanes div.pane div.scroller ul li span.count {
width: 14%;
margin-right: 1%;
font-size: 0.8em;
- color: white;
text-align: center;
- background-color: #3276b1;
+ background-color: rgba(50, 118, 177, 0.5);
border-radius: 3px;
}
diff --git a/features/searchPane/dataTables.searchPane.js b/features/searchPane/dataTables.searchPane.js
index 8301e46..42d5d73 100644
--- a/features/searchPane/dataTables.searchPane.js
+++ b/features/searchPane/dataTables.searchPane.js
@@ -1,8 +1,23 @@
-// TODO
-// - Styling for selected
-// - Styling for container / header
-// - Styling for clear option
-
+/*! SearchPane 0.0.1
+ * 2017 SpryMedia Ltd - datatables.net/license
+ */
+
+/**
+ * @summary SearchPane
+ * @description Search Panes for DataTables columns
+ * @version 0.0.1
+ * @author SpryMedia Ltd (www.sprymedia.co.uk)
+ * @copyright Copyright 2017 SpryMedia Ltd.
+ *
+ * This source file is free software, available under the following license:
+ * MIT license - http://datatables.net/license/mit
+ *
+ * This source file is distributed in the hope that it will be useful, but
+ * WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY
+ * or FITNESS FOR A PARTICULAR PURPOSE. See the license files for details.
+ *
+ * For details please refer to: http://www.datatables.net
+ */
(function(factory) {
if (typeof define === 'function' && define.amd) {
// AMD
@@ -40,7 +55,7 @@
container: $('').addClass(this.classes.container)
};
- this.c = $.extend( true, {}, SearchPanes.defaults, opts );
+ this.c = $.extend(true, {}, SearchPanes.defaults, opts);
this.s = {
dt: table
@@ -67,7 +82,7 @@
}
$.extend(SearchPanes.prototype, {
- rebuild: function () {
+ rebuild: function() {
var that = this;
this.s.dt
@@ -78,17 +93,15 @@
});
},
- _attach: function () {
+ _attach: function() {
var container = this.c.container;
- var host = typeof container === 'function' ?
- container( this.s.dt ) :
- container;
-
- if ( this.c.insert === 'prepend' ) {
- $(this.dom.container).prependTo( host );
- }
- else {
- $(this.dom.container).appendTo( host );
+ var host =
+ typeof container === 'function' ? container(this.s.dt) : container;
+
+ if (this.c.insert === 'prepend') {
+ $(this.dom.container).prependTo(host);
+ } else {
+ $(this.dom.container).appendTo(host);
}
},
@@ -133,16 +146,14 @@
var bins = this._binData(column.data().flatten());
// Don't show the pane if there isn't enough variance in the data
- if ( this._variance(bins) < this.c.threshold ) {
+ if (this._variance(bins) < this.c.threshold) {
return;
}
// On initialisation, do we need to set a filtering value from a
// saved state or init option?
var search = column.search();
- search = search
- ? search.substr(1, search.length - 2).split('|')
- : [];
+ search = search ? search.substr(1, search.length - 2).split('|') : [];
var data = column
.data()
@@ -163,10 +174,10 @@
.html(bins[data[i]])
);
- if ( search.length ) {
- var escaped = data[i].replace ?
- $.fn.dataTable.util.escapeRegex( data[i] ) :
- data[i];
+ if (search.length) {
+ var escaped = data[i].replace
+ ? $.fn.dataTable.util.escapeRegex(data[i])
+ : data[i];
if ($.inArray(escaped, search) !== -1) {
li.addClass(itemClasses.selected);
@@ -198,19 +209,16 @@
);
var container = this.dom.container;
- var replace = container.children().map( function () {
- if ( $(this).data('column') == idx ) {
+ var replace = container.children().map(function() {
+ if ($(this).data('column') == idx) {
return this;
}
- } );
-
- console.log( replace );
+ });
- if ( replace.length ) {
- replace.replaceWith( pane );
- }
- else {
- $(container).append( pane );
+ if (replace.length) {
+ replace.replaceWith(pane);
+ } else {
+ $(container).append(pane);
}
},
@@ -236,36 +244,40 @@
table
.column(pane.data('column'))
.search(
- '^'+$.map(filters, function(filter) {
- var d = $(filter).data('filter').toString();
- return $.fn.dataTable.util.escapeRegex( d );
- }).join('|')+'$',
+ '^' +
+ $.map(filters, function(filter) {
+ var d = $(filter)
+ .data('filter')
+ .toString();
+ return $.fn.dataTable.util.escapeRegex(d);
+ }).join('|') +
+ '$',
true,
false
)
.draw();
}
},
-
- _variance: function ( d ) {
- var data = $.map( d, function (val, key) {
+
+ _variance: function(d) {
+ var data = $.map(d, function(val, key) {
return val;
- } );
+ });
var count = data.length;
var sum = 0;
- for ( var i=0, ien=count ; i').appendTo(b.container);k.columns(b.columns).eq(0).each(function(c){for(var b=k.column(c),m=a(""),
-d=a(b.header()).hasClass("tags"),n=p._binData(b.data().flatten(),d),g=b.search(),g=g.length&&g[0]?g[0].substr(1,g[0].length-2).split("|"):[],d=d?k.ajax.json().tags:b.data().unique().sort().toArray(),h=0,f=d.length;h").html(''+d[h]+"").data("filter",d[h]).append(a('').html(n[d[h]]));-1!==a.inArray(d[h],g)&&l.addClass("selected");m.append(l)}a(e).append(a('').data("column",c).addClass(g.length?"filtering":
-"").append('').append(a('').html(a(b.header()).text())).append(a('').append(m)))});a(e).on("click","li",function(){a(this).hasClass("selected")?a(this).removeClass("selected"):a(this).addClass("selected");var b=a(this).closest("div.pane"),c=b.find("li.selected");0===c.length?(b.removeClass("filtering"),k.column(b.data("column")).search("").draw()):(b.addClass("filtering"),k.column(b.data("column")).search(a.map(c,
-function(b){return a(b).data("filter")}).join("|"),!0,!1).draw())});a(e).on("click","button.close",function(){var b=a(this).closest("div.pane");b.find("li.selected").removeClass("selected");b.removeClass("filtering");k.column(b.data("column")).search("").draw()})}var f=a.fn.dataTable;a.extend(e.prototype,{_binData:function(a,b){var c={};a.each(function(a){if(a)if(b){a=a.split(",");for(var d=0,e=a.length;d").addClass(this.classes.container)};this.c=a.extend(!0,{},d.defaults,
+h);this.s={dt:b};b.settings()[0].searchPane=this;b.columns(this.c.columns).eq(0).each(function(a){f._pane(a)});a(this.dom.container).on("click","li",function(){f._toggle(this)}).on("click","button."+this.classes.clear,function(){f._clear(a(this).closest("div."+f.classes.pane.container))});this._attach()}var l=a.fn.dataTable;a.extend(d.prototype,{rebuild:function(){var a=this;this.s.dt.columns(this.c.columns).eq(0).each(function(b){a._pane(b)})},_attach:function(){var b=this.c.container,b="function"===
+typeof b?b(this.s.dt):b;"prepend"===this.c.insert?a(this.dom.container).prependTo(b):a(this.dom.container).appendTo(b)},_binData:function(a){var b={};a.each(function(a){a&&(b[a]?b[a]++:b[a]=1)});return b},_clear:function(a){var b=this.classes,f=b.item.selected;a.find("li."+f).removeClass(f);a.removeClass(b.pane.active);this.s.dt.column(a.data("column")).search("").draw()},_pane:function(b){var h=this.classes,f=h.item,h=h.pane,c=this.s.dt.column(b),e=a(""),d=this._binData(c.data().flatten());
+if(!(this._variance(d)").html(''+m[k]+"").data("filter",m[k]).append(a("").addClass(f.count).html(d[m[k]]));if(g.length){var p=m[k].replace?a.fn.dataTable.util.escapeRegex(m[k]):m[k];-1!==a.inArray(p,g)&&n.addClass(f.selected)}e.append(n)}f=a("").data("column",b).addClass(h.container).addClass(g.length?
+h.active:"").append(a('').addClass(this.classes.clear)).append(a("").addClass(h.title).html(a(c.header()).text())).append(a("").addClass(h.scroller).append(e));h=this.dom.container;c=h.children().map(function(){if(a(this).data("column")==b)return this});c.length?c.replaceWith(f):a(h).append(f)}},_toggle:function(b){var c=this.classes,f=c.item.selected,e=this.s.dt;b=a(b);var d=b.closest("div."+c.pane.container);b.toggleClass(f,!b.hasClass(f));b=d.find("li."+
+f);0===b.length?(d.removeClass(c.pane.active),e.column(d.data("column")).search("").draw()):(d.addClass(c.pane.active),e.column(d.data("column")).search("^"+a.map(b,function(b){b=a(b).data("filter").toString();return a.fn.dataTable.util.escapeRegex(b)}).join("|")+"$",!0,!1).draw())},_variance:function(b){b=a.map(b,function(a,b){return a});for(var c=b.length,f=0,d=0,e=c;d
-
Space for banner etc
-
diff --git a/features/searchPane/vertical.html b/features/searchPane/vertical.html
index 7ad985e..5038d48 100644
--- a/features/searchPane/vertical.html
+++ b/features/searchPane/vertical.html
@@ -52,8 +52,7 @@ div.searchTable {
$(document).ready( function () {
$('#example').DataTable( {
searchPane: {
- container: '.searchPanes',
- columns: [1, 2, 4]
+ container: '.searchPanes'
}
} );
} );
@@ -61,8 +60,6 @@ div.searchTable {