jquery – 在数据表中正确渲染迷你图

在我下面发布的示例中,我试图将 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,0"],["0,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>

解决方法

你的答案对我不起作用,但以下情况确实如此,我相信它更清洁了.

不要改变sparkline jquery插件,只是不要每次都在fnDrawCallback中调用.sparkline().只需将选择器更改为：

"fnDrawCallback": function (oSettings) {
    $('.spark:not(:has(canvas))').sparkline('html',{
        type: 'line',spotColor: false
    });
}

选择器选择具有spark类的所有元素,不包括内部带有canvas元素的元素.

jquery – 在数据表中正确渲染迷你图

解决方法

相关文章