正确渲染数据表中的迷你图

Question

问

正确渲染数据表中的迷你图

书友73892718 发布于 2023-02-07 10:24

在我下面发布的示例中,我试图将jquery.sparkline库中的迷你图呈现为jquery.dataTables表中的数据列.加载下面的示例工作得很好但仅适用于第一页.如果我单击"下一步"而不是将数据渲染为迷你图,则只需渲染数字.如果我单击"上一个",则会显示初始设置的迷你图.如果我排序,我会得到两者的组合.

我是这两个图书馆的新手,我试图在这个论坛以及其他人寻找解决方案,到目前为止,我的研究结果都没有解决我的问题.谁知道我做错了什么？

谢谢你的任何建议!

Jeffrey Klar.. 6

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

而不是更改sparkline jquery插件,只是不要.sparkline()每次调用fnDrawCallback.只需将选择器更改为:

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

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

2 个回答

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

而不是更改sparkline jquery插件,只是不要.sparkline()每次调用fnDrawCallback.只需将选择器更改为:
```
"fnDrawCallback": function (oSettings) {
    $('.spark:not(:has(canvas))').sparkline('html', {
        type: 'line',
        minSpotColor: 'red',
        maxSpotColor: 'green',
        spotColor: false
    });
}
```
选择器选择具有spark类的所有元素,不包括内部带有canvas元素的元素.
2023-02-07 10:25 回答

敖军士

在花了一些时间调试库之后，我发现问题的一部分是我不应该在'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中调用“ sparkline”，每次单击“下一个”或“上一个”时都会调用它用适当的数据重新绘制表。如果单击“下一个”然后单击“上一个”，则迷你图将被重新初始化，但带有第一个调用中DOM中的画布数据。为了解决这个最后的问题，我只是修改了迷你图渲染方法以跳过渲染（如果我们已经这样做的话）。我这样做的方法可能不是最好的，只是查看标签的val是否包含“ canvas”，但这确实解决了我的问题。一世'

这是我在jquery.sparkline.js中进行的代码修改。我在大约第947行上修改了render函数，以包括对“ canvas”的检查，如果已经存在，则返回。

    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;
        }

2023-02-07 10:25 回答

手机用户2502922313

撰写答案