How To Add Pagination In Table Using D3?
i have following code,i have to add pagination on this table how to add pagination in d3? i have to set pagination for each two rows,please suggest the solution. just i have added
Solution 1:
At the simplest level you just control the visibility/display of the table rows. This example is as basic as you get , it uses two buttons to show different groups of ten in a table - no page numbering, no limiting, no styling :-) - but it does the pagination
http://jsfiddle.net/f50mggof/6/
<div id="buttons">
<button id="up">
UP
</button>
<button id="down">
DOWN
</button>
</div>
<table></table>
var dataset = [];
for (var n = 0; n < 100; n++) {
dataset.push ([n, Math.random()*50, Math.random()*30]);
}
var rows = d3.select("table").selectAll("tr").data(dataset)
.enter()
.append("tr")
;
var cells = rows.selectAll("td").data(function(d) { return d; })
.enter()
.append("td")
.text(function(d) { return d; })
;
d3.select("#buttons").datum({portion : 0});
// the chain select here pushes the datum onto the up and down buttons also
d3.select("#buttons").select("#up").on ("click", function(d) {
d.portion -= 10;
redraw (d.portion);
});
d3.select("#buttons").select("#down").on ("click", function(d) {
d.portion += 10;
redraw (d.portion);
})
function redraw (start) {
d3.select("table").selectAll("tr")
.style("display", function(d,i) {
return i >= start && i < start + 10 ? null : "none";
})
}
redraw(0);
Post a Comment for "How To Add Pagination In Table Using D3?"