在下面发布的示例中,我尝试将jquery.sparkline库中的迷你图渲染为jquery.dataTables表中的数据列。加载下面的示例效果很好,但仅适用于第一页。如果我单击“下一个”而不是将数据呈现为迷你图,它将仅呈现数字。如果单击“上一个”,则初始集合会显示迷你图。如果我排序,我将两者结合起来。
我对这两个库都是新手,因此我尝试在该论坛以及其他论坛上寻找解决方案,但到目前为止,我的发现都没有解决我的问题。有人知道我在做什么错吗?
感谢您的任何建议!
<!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>
最佳答案
您的回答对我没有用,但是以下内容对我有用,并且我相信它会干净很多。
不必更改迷你图jquery插件,而不必每次都在fnDrawCallback中调用.sparkline()
。只需将选择器更改为此,即可进行管理:
"fnDrawCallback": function (oSettings) {
$('.spark:not(:has(canvas))').sparkline('html', {
type: 'line',
minSpotColor: 'red',
maxSpotColor: 'green',
spotColor: false
});
}
选择器选择所有带有spark类的元素,但内部带有canvas元素的元素除外。