让数据表和迷你图一起玩吗? [英] Getting Datatables and Sparklines to play nice together?

问题描述

我目前正在尝试获取数据表和

Im currently trying to get Datatables and the Sparklines packages to work together kind of like below:

(这些东西都是用R编写的)

我意识到我的问题类似于这一个 ...但是，即使在查看了一些代码并将其调整为适合自己的代码后，我也只能渲染一个或另一个代码..要么是图表上来自服务器的数据，要么是缺少所有数据而呈现的迷你图-从来没有在一起. ..

I realize my issue is similar to this one... However, even after looking at some of the code and adapting it to my own, I was only able to render one or the other.. either the data from my server on the chart or the sparklines rendered with all data missing - never both together...

这是代码

<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.

The HTML above and the JS below..

<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()

Does anyone know what I am doing wrong? I need the columns: [] to point my JSON data to the right columns in the table but I also need to point one of the keys in my data object to the sparkline itself and then call the .sparkline()

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

Also my data object structure that im getting from the server kinda looks like this:

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

   }

我非常感谢任何人的反馈/帮助！谢谢！ ❤️

I really appreciate anyones feedback/help! Thanks! ❤️

推荐答案

知道了.每次我发布stackoverflow问题时总是会发生这种情况，但是如果我不这样发布，我想我会呆几天.

Got it. This always happen every time I post a stackoverflow question, but I think i'd be stuck for a few days if I didn't post so..

无论如何，在阅读了几个小时的文档后，aoColumnDefs是一个选择器，可以选择表中的整个行(如果它已经在HTML中已创建)，并且aTargets是您在列的索引中传递的参数，而mRender是您在其向屏幕显示任何内容之前调用的回调函数(它可以修改该特定列的预先数据)

Anyways, after reading the docs for a few hours -- The aoColumnDefs is a selector that can select an entire row in the table (if it's already created in the HTML) and that was wrong in my code above.. The aTargets is the parameter that you pass in the index of the column and the mRender is the call back function that you call right before it spits out whatever to the screen (it can modify the data beforehand for that specific col)

区别在于，我使用columns将代码发送到HTML，然后将整个col定向到标签上并将标签发送过来

The diff is that I sent the code to the HTML using the columns and then I targeted the whole col to attatch the tags on and sent them over

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

Posting my code in hopes this saves someone time

$('#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
                  });
              }
               });

这篇关于让数据表和迷你图一起玩吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！