Skip to content

Instantly share code, notes, and snippets.

@mradovic123
Last active August 29, 2015 14:27
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save mradovic123/12fa85315026193d9360 to your computer and use it in GitHub Desktop.
Save mradovic123/12fa85315026193d9360 to your computer and use it in GitHub Desktop.
How to paginate and format crossfilter results in dc.datatable
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
<!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>
@mradovic123
Copy link
Author

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/

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment