7

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

5 回答 5

8

您的回答对我不起作用，但以下是有效的，我相信它更干净。

而不是更改 sparkline jquery 插件，只是不要.sparkline()每次都调用 fnDrawCallback。这可以通过简单地将选择器更改为此来管理：

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

选择器选择所有具有 spark 类的元素，不包括内部具有画布元素的元素。

于 2014-09-30T21:20:25.050 回答
5

在花了一些时间调试库后，我发现部分问题是我不应该在“fnInitComplete”中初始化迷你图。这仅在第一页触发，文档仅包含可见行。我应该在“fnDrawCallback”中做这件事。所以代码是：

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css" title="currentStyle">
        @import "/static/css/demo_page.css";
        @import "/static/css/jquery.dataTables.css";

        td.right {
            text-align: right;
        }
    </style>

    <script type="text/javascript" src="/static/js/jquery-2.0.3.js"></script>
    <script type="text/javascript" src="/static/js/jquery.dataTables.js"></script>
    <script type="text/javascript" src="/static/js/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>');
            var 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"],
                    ["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>';
                        }
                    },
                ],
                "fnDrawCallback": function (oSettings) {
                    $('.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>

</body>
</html>

这仍然会导致问题，因为迷你图库将在第二次查看页面时使用错误数据重新初始化迷你图，因为我们在 fnDrawCallback 中调用“迷你图”，每次单击“下一个”或“上一个”时都会调用它用正确的数据重新绘制表格。如果您单击“下一步”，然后单击“上一个”，迷你图将重新初始化，但使用我们第一次调用时 DOM 中的画布数据。为了解决最后一个问题，如果我们已经这样做了，我只是修改了迷你图渲染方法以跳过渲染。我这样做的方式可能不是最好的，只是查看标签的 val 是否包含“画布”，但它确实解决了我的问题。我'

这是我在 jquery.sparkline.js 中所做的代码修改。我在大约第 947 行修改了渲染函数，以包括对“画布”的检查，如果它已经存在则返回。

    render = function () {
        var values, width, height, tmp, mhandler, sp, vals;
        if (userValues === 'html' || userValues === undefined) {
            vals = this.getAttribute(options.get('tagValuesAttribute'));
            if (vals === undefined || vals === null) {
                vals = $this.html();
            }

            # Don't re-render if we already have.
            if (vals.indexOf('canvas') === 1) {
                return;
            }

            values = vals.replace(/(^\s*<!--)|(-->\s*$)|\s+/g, '').split(',');
        } else {
            values = userValues;
        }
于 2014-01-03T18:01:39.197 回答
4

发现这个可以解决问题。在数据表中包括 3 个堆叠条形图作为迷你图。

后端数据：

<span class="mysparkline" linevalues="1,2,3,4,5,6" barvalues="1,6,2,3,4,5" ></span>

数据表代码

"fnDrawCallback": function(oSettings) {
    $('.mysparkline').sparkline('html', {
        type: 'bar',
        tagValuesAttribute: 'linevalues',
        barWidth: 6,
        barSpacing: 3,
        barColor: '#fb8072',
        width: '350px',
        tooltipFormatter: function(sp, options, fields) {
            return '<div class="jqsfield"><span style="color: ' + fields[0].color + '">&#9679;</span> Perp, New Term: ' + fields[0].value + '</div>'
        }
    });
    $('.mysparkline').sparkline('html', {
        type: 'bar',
        tagValuesAttribute: 'barvalues',
        barWidth: 6,
        barSpacing: 3,
        barColor: '#36C',
        composite: true,
        tooltipFormatter: function(sp, options, fields) {
            return '<div class="jqsfield"><span style="color: ' + fields[0].color + '">&#9679;</span> Maint, Term Renew: ' + fields[0].value + '</div>'
        }
    });
}
于 2016-03-28T17:51:41.277 回答
2

我遇到了同样的问题，我发现该解决方案对于最新版本的 DataTables 来说已经过时了。对于数据表 1.10。我们需要做这样的事情：

$('#example').dataTable( {
    "rowCallback": function( row, data ) {
        $('td:eq(0)', row).html('<span class="spark">' + data + '</span>');
    },
    "drawCallback": function (Settings) {
        $('.spark').sparkline('html', {
            type: 'line',
            minSpotColor: 'red',
            maxSpotColor: 'green',
            spotColor: false
        });
    }
});

不过，我看不到重新渲染迷你图的问题。我花了一些时间让它工作，所以我只是在这里发布我想出的东西来帮助任何可能有同样问题的人。谢谢。

于 2015-01-15T20:40:29.720 回答
2

分页和重新渲染迷你图的相同问题丢失了我的 jqgrid 表中的第一个渲染迷你图。在我的情况下，通过在渲染后删除迷你图选择器类来解决它，这样我就可以通过 jqgrid 事件 loadComplete 为所有额外加载的表调用迷你图

$('.inlinesparkline').sparkline('html', {type: 'line' ,disableHiddenCheck: true, height: '20px', width: '90px'}).removeClass('inlinesparkline');

于 2017-06-23T10:24:06.907 回答