时间戳

首页 > 解决方案 > 让 Datatables 和 Sparklines 一起玩得很好？

javascript - 让 Datatables 和 Sparklines 一起玩得很好？

问题描述

我目前正在尝试让Datatables和Sparklines包一起工作，如下所示：

（这些东西都是用 R 写的）

我意识到我的问题与这个问题相似......但是，即使在查看了一些代码并将其调整为我自己的代码之后，我也只能渲染一个或另一个......图表上来自我的服务器的数据或在所有数据丢失的情况下呈现的迷你图 - 永远不要同时...

这是代码

<table id="table_id" class="display">
    <thead>
        <tr>
            <th>Table Name</th>
            <th>Column Name</th>
            <th>Rule</th>
            <th>Current</th>
            <th>Minimum</th>
            <th>Maximun</th>
            <th>Median</th>
            <th>Mean</th>
            <th>Sparkline</th>
        </tr>
    </thead>
    <tbody>
    </tbody>
</table>

上面的HTML和下面的JS..

<script>

    $SCRIPT_ROOT = {{ request.script_root|tojson|safe }};
    CURRENT_JOB = "{{ job_requested }}";
    data = {{ data|safe}}



$(function() {

       $('.js-typeahead').typeahead({
         order: "asc",
         source: {
           groupName: {
             // Array of Objects / Strings
             data: {{jobs|safe}}
           }
         },
         callback: {
           onInit: function() {
                $('#table_id').DataTable({
                   data:{{ data|safe}},
                    columns: [
                        {data: 'table_name'},
                        {data: 'col_name'},
                        {data: 'rule'},
                        {data: 'current'},
                        {data: 'min'},
                        {data: 'max'},
                        {data: 'median'},
                        {data: 'mean'},
                    ],
                    "aoColumnDefs": [
                    {
                        "aTargets": [8],
                        "mRender": function (data, type, full) {
                             // since data is an array of values [1,2,3,4]
                            data = data.toString()
                            return '<span class="spark">' + data + '</span>'
                        }
                    }
                ],
               "drawCallback": (oSettings) => {
                   console.log('callback')
                  $('.spark:not(:has(canvas))').sparkline('html', {
                      type: 'line',
                      minSpotColor: 'red',
                      maxSpotColor: 'green',
                      spotColor: false
                  });
              }
               });
           }
         }
       });


   });

有谁知道我做错了什么？我需要将columns: []我的 JSON 数据指向表中的正确列，但我还需要将我的数据对象中的一个键指向迷你图本身，然后调用.sparkline()

我从服务器获取的数据对象结构也看起来像这样：

 data = { 
      'table_name': cow,
      'col_name' : cow_col,
      'rule' : cow_col,
      ..etc, etc..
      'data4spark: [1,2,3,4]

   }

我真的很感谢任何人的反馈/帮助！谢谢！❤️

标签： javascriptjqueryflaskdatatablessparklines

解决方案

知道了。每次我发布stackoverflow问题时都会发生这种情况，但我想如果我不发布的话我会被困几天..

无论如何，在阅读了几个小时的文档之后——这aoColumnDefs是一个选择器，可以选择表格中的一整行（如果它已经在 HTML 中创建）并且在我上面的代码中是错误的。这aTargets是你的参数传入列的索引，并且mRender是在它向屏幕吐出任何内容之前调用的回调函数（它可以预先修改该特定列的数据）

不同之处在于我使用 将代码发送到 HTML columns，然后我将整个 col 定位到附加标签并将它们发送过来

发布我的代码，希望这可以节省一些时间

$('#table_id').DataTable({
                   data:{{ data|safe}},
                    columns: [
                        {data: 'table_name'},
                        {data: 'col_name'},
                        {data: 'rule'},
                        {data: 'current'},
                        {data: 'min'},
                        {data: 'max'},
                        {data: 'median'},
                        {data: 'mean'},
                        {data: 'data'},

                    ],
                    "aoColumnDefs": [
                    {
                        "aTargets": [8],
                        "mRender": function (data, type, full) {
                             // since data is an array of values [1,2,3,4]
                            return '<span class="spark">' + data + '</span>'
                        }
                    }
                ],
               "drawCallback": (oSettings) => {
                   console.log('callback');
                   console.log($('.spark:not(:has(canvas))'))
                  $('.spark:not(:has(canvas))').sparkline('html', {
                      type: 'line',
                      minSpotColor: 'red',
                      maxSpotColor: 'green',
                      spotColor: false
                  });
              }
               });

推荐阅读