如何使用d3在表中添加分页？
[英]How to add pagination in table using d3?
问题描述
我有以下代码，我必须在此表上添加分页
<!DOCTYPE html> <html> <head> <title>table</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script> <style> .rect { outline: 1px solid green; } </style> </head> <body> <div id="table"></div> <script> var data = [{ "name": "a", "section": 1, "stars": "d1" }, { "name": "b", "section": 2, "stars": "d2" }, { "name": "c", "section": 1, "stars": "d3" }]; var columns = ['name', 'section', 'stars'] // create table var table = d3.select("#table").append("table"); var thead = table.append("thead").append("tr"); thead.selectAll("th") .data(columns) .enter() .append("th") .text(function(d) { return d; }); var tbody = table.append("tbody"); data.forEach(function(d, i) { trow = tbody.append("tr") trow.selectAll("td") .data(columns) .enter() .append("td") .append(function(d) { if (d == "stars") { return document.createElement('button'); } else return document.createElement('div'); }) .attr("class", function(d) { if (d == "section") { return "rect" } }) .text(function(e) { return d[e] }); }); </script> </body> </html>
如何在d3中添加分页？ 我必须为每两行设置分页，请提出解决方案。 只是我添加了3行数据，但我的实际数据包含50到100行
1 个解决方案
解决方案1
2 2016-06-03 13:56:17
在最简单的级别上，您只需控制表行的可见性/显示。 此示例是您所掌握的最基本的示例，它使用两个按钮在一个表中显示十个不同的组-没有页码，没有限制，没有样式:-)-但是它可以进行分页
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);
如何使用d3 js中的设置向表的每一行添加链接？
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.