在数据表中正确渲染迷你图 [英] Properly rendering sparklines in a datatable
问题描述
在下面发布的示例中，我尝试将jquery.sparkline库中的迷你图渲染为jquery.dataTables表中的数据列.加载下面的示例效果很好，但仅适用于第一页.如果我单击下一个"而不是将数据呈现为迷你图，它将仅呈现数字.如果单击上一个"，则初始集合会显示迷你图.如果我排序的话，我会把两者结合起来.
In my example posted below I am attempting to render a sparkline from the jquery.sparkline library as a column of data in a jquery.dataTables table. Loading the example below works just fine but only for the first page. If I click on 'next' instead of having the data render as a sparkline it simply renders the numbers. If I click 'previous' the sparklines show up for the initial set. If I sort I get a combination of the two.
我对这两个库都是陌生的，我试图在这个论坛以及其他论坛上寻找解决方案，但到目前为止，我的发现都没有解决我的问题.有人知道我在做什么错吗?
I'm new to both of these libraries and I have tried to look on this forum as well as others for solutions and so far none of my findings have solved my problem. Anyone know what I'm doing wrong?
谢谢您的建议！
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css" title="currentStyle">
@import "http://datatables.net/release-datatables/media/css/demo_page.css";
@import "http://datatables.net/release-datatables/media/css/jquery.dataTables.css";
td.right {
text-align: right;
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-2.0.3.js"></script>
<script type="text/javascript" src="http://datatables.net/release-datatables/media/js/jquery.dataTables.js"></script>
<script type="text/javascript" src="http://omnipotent.net/jquery.sparkline/2.1.2/jquery.sparkline.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#dynamic').html('<table cellpadding="0" cellspacing="0" border="0" class="display" id="example"></table>');
$('#example').dataTable({
"aaSorting": [],
"aaData": [
["0,1,2,3,4"],
["4,3,2,1,0"],
["0,1,2,3,4"],
["4,3,2,1,0"],
["0,1,2,3,4"],
["4,3,2,1,0"],
["0,1,2,3,4"],
["4,3,2,1,0"],
["0,1,2,3,4"],
["4,3,2,1,0"],
["0,1,2,3,4"],
["4,3,2,1,0"]
],
"aoColumns": [
{ "sTitle": "Sparkline", "sClass": "center" }
],
"aoColumnDefs": [
{
"aTargets": [0],
"mRender": function (data, type, full) {
return '<span class="spark">' + data + '</span>'
}
}
],
"fnInitComplete": function (oSettings, json) {
$('.spark').sparkline('html', {
type: 'line',
minSpotColor: 'red',
maxSpotColor: 'green',
spotColor: false
});
}
});
});
</script>
</head>
<body id="dt_example">
<div id="container">
<div id="dynamic"></div>
<div class="spacer"></div>
</div>
</body>
</html>
推荐答案
您的答案对我没有用，但是以下内容对我来说很有效.
Your answer did not work for me, but the following did, and I believe it is a lot cleaner.
不必更改迷你图jquery插件，而不必每次都在fnDrawCallback中调用.sparkline().只需将您的选择器更改为此即可进行管理:
Instead of changing the sparkline jquery plugin, just don't call .sparkline() in the fnDrawCallback every time. This can be managed by simply changing your selector to this:
"fnDrawCallback": function (oSettings) {
$('.spark:not(:has(canvas))').sparkline('html', {
type: 'line',
minSpotColor: 'red',
maxSpotColor: 'green',
spotColor: false
});
}
选择器选择所有带有spark类的元素，但内部带有canvas元素的元素除外.
The selectors selects all elements with the spark class, excluding the ones with a canvas element inside.
这篇关于在数据表中正确渲染迷你图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
