Custom Text filter for DC.js dataTable
http://stackoverflow.com/questions/25083383/custom-text-filter-for-dc-js-datatable
by Nivaldo
HTML
<script src="http://cdnjs.cloudflare.com/ajax/libs/crossfilter/1.3.7/crossfilter.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.js"></script>
<script src="http://code.jquery.com/jquery-2.1.1.js"></script>
<link rel="stylesheet" href="http://dc-js.github.io/dc.js/css/dc.css">
<script src="http://dc-js.github.io/dc.js/js/dc.js"></script>
<main role="main" itemscope itemprop="mainContentOfSite">
<!-- START Section 'Dashboard' -->
<section class="section light-gray">
<div class="container">
<h1 class="large">Dashboard y'all</h1>
<div class="container">
<div id='dashboard-bar-rev-by-energy'>
<h4>Total Revenue<br>by Energy</h4>
</div>
<div id='dashboard-bar-rev-by-other' style="background:white;">
<h4>Total Revenue<br>by Other</h4>
</div>
<div id="dashboard-bar-rev-source">
<h4>Total Revenue<br>by Revenue Source</h4>
</div>
<div id="dashboard-bar-avg-by-rev-source">
<h4>Average Revenue<br>by Revenue Source</h4>
</div>
<div id="dashboard-bar-avg-by-commodity">
<h4>Average Revenue<br>by Commodity<h4></div>
<div class="clearfix"></div>
<div id="totals">Total Revenue: <span></span></div>
<div class="clearfix"></div>
<input type="text" id="table-search"></input>
<table class='table table-hover dc-data-table' id='dashboard-table'>
<thead>
<tr class="header">
<th>
<a href="javascript:sort_dataTable(dashTable,'Company Name');">
Company name
</a>
</th>
<th>
<a href="javascript:sort_dataTable(dashTable,'Revenue Source');">
Revenue Source
</a>
</th>
<th>
...
JavaScript
$("#table-search").on('input', function () {
text_filter(companyDimension, this.value);
});
function clean_monetary_float(f) {
f = f.replace(/,/g, '');
return parseFloat(f.replace("$", ""));
}
Number.prototype.formatMoney = function (c, d, t) {
var n = this,
c = isNaN(c = Math.abs(c)) ? 2 : c,
d = d == undefined ? "." : d,
t = t == undefined ? "," : t,
s = n < 0 ? "-" : "",
i = parseInt(n = Math.abs(+n || 0).toFixed(c)) + "",
j = (j = i.length) > 3 ? j % 3 : 0;
return s + (j ? i.substr(0, j) + t : "") + i.substr(j).replace(/(\d{3})(?=\d)/g, "$1" + t) + (c ? d + Math.abs(n - i).toFixed(c).slice(2) : "");
};
function text_money(f) {
f = parseFloat(f);
var s = f.formatMoney(2, '.', ',');
var t;
if (s.length > 19) //trillion
{
t = "trillion"
} else if (s.length > 15) //Billions
{
t = "billion"
} else if (s.length > 11) //Millions
{
t = "million"
} else if (s.length > 7) //Thousands
{
t = "thousand"
}
s = s.substring(0, s.search(',') + 2);
s = s.replace(",", ".");
return s += " " + t;
}
function sort_dataTable(dataTable, dataField, that) {
dataTable.sortBy(function (d) {
return d[dataField]
});
if (dataTable.order() == d3.ascending) dataTable.order(d3.descending);
else dataTable.order(d3.ascending);
dc.renderAll();
graphCustomizations();
}
function text_filter(dim, q) {
dashTable.filterAll();
var re = new RegExp(q, "i")
if (q != '') {
dim.filter(function(d) {
return 0 == d.search(re);
});
} else {
dim.filterAll();
}
dc.redrawAll();
graphCustomizations();
}
var dash_bar_rev_by_energy = dc.barChart("#dashboard-bar-rev-by-energy");
var dash_bar_rev_by_other = dc.barChart("#dashboard-bar-rev-by-other");
var dash_bar_by_rev_source =...