Last active
August 29, 2015 14:27
-
-
Save mradovic123/12fa85315026193d9360 to your computer and use it in GitHub Desktop.
How to paginate and format crossfilter results in dc.datatable
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
name | pet | |
---|---|---|
john | dog | |
tom | cat | |
marry | pingpong | |
kerry | crock | |
don | donald trump | |
joe | pet | |
tim | dog | |
fuz | cat | |
toe | pingpong | |
coco | crock | |
john | donald trump | |
tom | pet | |
marry | dog | |
kerry | cat | |
don | pingpong | |
joe | crock | |
tim | donald trump | |
fuz | pet | |
toe | pet | |
coco | dog | |
john | cat | |
tom | pingpong | |
marry | crock | |
kerry | donald trump | |
don | pet | |
joe | dog | |
tim | cat | |
fuz | pingpong | |
toe | pet | |
coco | dog |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!doctype html> | |
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
<meta charset="utf-8"> | |
<html> | |
<!--The code for dc.datatable pagiantion was created by BALAJI VEERARAGHAVAN , | |
I have contributed by adding dc.row charts for data filtering purposes --> | |
<head> | |
<title></title> | |
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.3.min.js"></script> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/crossfilter/1.3.12/crossfilter.js"></script> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script> | |
<script src="http://cdnjs.cloudflare.com/ajax/libs/dc/1.7.0/dc.js"></script> | |
<script src="https://cdn.datatables.net/1.10.8/js/jquery.dataTables.min.js"></script> | |
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> | |
<!--Added by Balaji.V on 12/08/2015--> | |
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" type='text/css' /> | |
<link href="http://cdnjs.cloudflare.com/ajax/libs/dc/1.7.0/dc.css" rel="stylesheet" type='text/css' /> | |
<link href="https://cdn.datatables.net/1.10.8/css/jquery.dataTables.min.css" rel="stylesheet" type='text/css' /> | |
<style> | |
.dataTables_length { | |
display: none; | |
} | |
.dataTables_filter { | |
display: none; | |
} | |
</style> | |
</head> | |
<body> | |
<!--pointer-events: none; ;--> | |
<div class="row"> | |
<div class="col-md-3 col-sm-offset-1"> | |
<div id="pet" class="dc-chart"> | |
<!-- rowchart6--> | |
<div class="title"><b> <center> PET <br> <button id="btnReset2" onclick="javascript:pet.filterAll(); dc.redrawAll();"> RESET </button></b></div> | |
<div class="clearfix"></div> | |
</div> | |
</div> | |
</div> | |
<br /> | |
<div class="row"> | |
<table id="dc-data-table" class="list table table-striped table-bordered"> | |
<thead> | |
<tr class='header' style="background-color: blue;"> | |
<th>Name</th> | |
<th>Pet</th> | |
</thead> | |
</table> | |
<!--</div> | |
</div>--> | |
<script type="text/javascript"> | |
var pet = dc.rowChart("#pet"); | |
d3.csv("data.csv", function (error, fullresponse) { | |
var tabledata = crossfilter(fullresponse) | |
table_dimension = tabledata.dimension( | |
function (d) { return d.pet; }); | |
g = table_dimension.group(function (v) { return v; }); | |
pet.dimension(table_dimension) | |
.group(g) | |
.width(300) | |
.height(300) | |
.elasticX(true) | |
.title(function (d) { return d.value; }) | |
.renderTitle(true) | |
.renderLabel(true) | |
.label(function (d) { | |
return d.key | |
}) | |
.xAxis().ticks(5); | |
//Jquery DT | |
var dataTableOptions = { | |
"lengthMenu": [[10], [25]], | |
"retrieve": true, | |
columnDefs: [ | |
{ | |
"orderable": false, | |
targets: 0, | |
data: function (d) { return d.name; } | |
}, | |
{ | |
"orderable": false, | |
targets: 1, | |
data: function (d) { return d.pet; } | |
} | |
] | |
}; | |
var datatable = $('#dc-data-table').dataTable(dataTableOptions); | |
function RefreshTable() { | |
dc.events.trigger(function () { | |
datatable.api() | |
.clear() | |
.rows.add(table_dimension.top(Infinity)) | |
.draw(); | |
}); | |
} | |
for (var i = 0; i < dc.chartRegistry.list().length; i++) { | |
var chartI = dc.chartRegistry.list()[i]; | |
chartI.on("filtered", RefreshTable); | |
} | |
//Jquery DT | |
window.filter = function (filters) { | |
filters.forEach(function (d, i) { charts[i].filter(d); }); | |
renderAll(); | |
}; | |
window.reset = function (i) { | |
charts[i].filter(null); | |
renderAll(); | |
}; | |
RefreshTable(); | |
dc.renderAll(); | |
}); | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
The problem was how to paginate ( and format) d3 data.tables to display the results of the cross-filtering.
If I have, let say 3,000 filtered records , but I want only 100 records to be displayed on the one page, and rest on the other pages.
The documentation on this subject was very limited.
However with the help of Balaji Veeraraghavan, we came up with the very elegant solution to this problem.
To implement more than one filter please check the code at our page
http://www.bridgeportal.us/asce_map/