在下面发布的示例中，我尝试将 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>
