首页 / 技术问答 / Javascript问答列表 / 问答详情

Javascript 在使用HighChats时如何避免Datatables重新初始化错误

我正在使用数据表和HighChats.我的目标是当用户点击按钮2023、2022和ABC按钮时，图表应该重新加载以向用户提供动画效果.当我这样做时，我遇到了以下问题:

  1. 当我单击任何按钮时，我收到数据表初始化错误

以下是我的测试 case :https://codepen.io/Shawnny-Tandon/pen/bGJeOev

如果我将代码从divID更改为tableID，它就可以工作了.但是，图表只是加载而不是提供动画.有什么办法吗？

$(‘#’+divId).数据表().销毁()； 至 $(‘#’+tableId).数据表().销毁()；

function initializeDataTable(tableSelector) {
    $(tableSelector).DataTable({
        searching: false,
        responsive: true,
        lengthChange: false,
        ordering: false,
        info: false,
        paging: false,
        initComplete: function (settings, json) {
            let api = new $.fn.dataTable.Api(settings);

            var headers = api.columns().header().toArray();
            headers.forEach(function (heading, index) {
                if (index > 0 && index < headers.length) {
                    categories.push($(heading).html());
                }
            });

            let rows = api.rows().data().toArray();
            rows.forEach(function (row) {
                group = {
                    name: '',
                    data: []
                };
                row.forEach(function (cell, idx) {
                    if (idx == 0) {
                        group.name = cell;
                    } else if (idx < row.length) {
                        group.data.push(parseFloat(cell.replace(/,/g, '')));
                    }
                });
                allSeriesData.push(group);
            });
        }
    });
}

$(document).ready(function () {
    if (typeof Highcharts !== 'undefined') {
        initializeChart('demo-output', '#example1', 'test 1');
        initializeChart('demo-output2', '#example', 'test 2');

        var allSeriesData = [];
        var categories = [];
        $('#example2').data('scrollX-custom', true);

        if (!$.fn.DataTable.isDataTable("#example2 table")) {
            initializeDataTable("#example2 table");
        }

        Highcharts.setOptions({
            lang: {
                thousandsSep: ','
            }
        });

        var myChart = Highcharts.chart("chart-A", {
            chart: {
                type: "column",
                borderColor: 'lightgray',
                borderWidth: 1,
                marginTop: 50
            },
            tooltip: {
                headerFormat: '{point.key}<br/>',
                pointFormat: '{series.name}: <b>{point.y:.1f}%</b>'
            },
            legend: {
                symbolRadius: 0,
                itemStyle: {
                    color: '#000000',
                    fontSize: '16px'
                }
            },
            colors: ['#003489', '#ED7D31', '#A5A5A5', '#FFC000', '#5B9BD5'],
            credits: {
                enabled: false
            },
            title: {
                text: "test3"
            },
            xAxis: {
                categories: categories,
                labels: {
                    style: {
                        fontWeight: '600',
                        fontSize: '16px',
                        color: '#000000'
                    }
                }
            },
            yAxis: {
                title: false,
                tickInterval: 10,
                max: 60,
                labels: {
                    formatter: function () {
                        return Highcharts.numberFormat(this.value, 0);
                    },
                    style: {
                        fontWeight: '600',
                        fontSize: '16px',
                        color: '#000000'
                    }
                }
            },
            series: allSeriesData
        });

        $('#trend').on('click', function () {
            $('#chart2').hide();
            $('#chart1').hide();
            $('#chart3').show();
            reloadChart('chart-A', '#example2', 'Top Seven test Award Trends', 'chart-A', 'column');
            $('.usa-button').removeClass('active');
            $(this).addClass('active');
        });

        $('.usa-button').on('click', function () {
            var buttonId = $(this).attr('id');
            if (buttonId === 'previous') {
                $('#chart2').show();
                $('#chart1').hide();
                $('#chart3').hide();
                reloadChart('demo-output2', '#example', 'test Awards by NAICS Codes, FY 2022', 'demo-output2', 'pie');
            } else if (buttonId === 'trend') {
            } else {
                $('#chart2').hide();
                $('#chart1').show();
                $('#chart3').hide();
                reloadChart('demo-output', '#example1', 'test Awards by NAICS Codes, FY 2023', 'demo-output', 'pie');
            }
            $('.usa-button').removeClass('active');
            $(this).addClass('active');
        });

        $('#current').addClass('active');
    }
});

function initializeChart(chartId, tableId, chartTitle) {
    const table = new DataTable(tableId, {
        searching: false,
        info: true,
        paging: false,
        sort: false
    });

    const chart = Highcharts.chart(chartId, {
        chart: {
            type: 'pie',
            styledMode: false
        },
        title: {
            text: chartTitle
        },
        colors: ['#1a4480', '#e52207', '#e66f0e', '#ffbe2e', '#fee685', '#538200', '#04c585', '#97d4ea', '#009ec1', '#0076d6', '#adadad', '#8168b3', '#d72d79', '#f2938c'],
        tooltip: {
            pointFormat: '</b> {point.y:.1f}%'
        },
        series: [{
            data: chartData(table)
        }],
        credits: {
            enabled: false
        },
        plotOptions: {
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                series: {
                    animation: {
                        duration: 2000
                    }
                },
                dataLabels: {
                    enabled: true,
                    format: '{point.y:.1f}%'
                },
                showInLegend: true
            }
        }
    });

    table.on('draw', function () {
        chart.series[0].setData(chartData(table));
    });

    function chartData(table) {
        var data = [];
        table.rows().every(function () {
            var row = this.data();
            data.push({
                name: row[0],
                y: parseFloat(row[1])
            });
        });

        return data;
    }
}

function reloadChart(chartId, tableId, chartTitle, divId, chartType) {
    $('#' + divId).DataTable().destroy();

    const table = new DataTable(tableId, {
        searching: false,
        info: true,
        paging: false,
        sort: false
    });

    const chart = Highcharts.chart(chartId, {
        chart: {
            type: chartType,
            styledMode: false
        },
        title: {
            text: chartTitle
        },
        colors: ['#1a4480', '#e52207', '#e66f0e', '#ffbe2e', '#fee685', '#538200', '#04c585', '#97d4ea', '#009ec1', '#0076d6', '#adadad', '#8168b3', '#d72d79', '#f2938c'],
        tooltip: {
            pointFormat: '</b> {point.y:.1f}%'
        },
        series: [{
            data: chartData(table)
        }],
        credits: {
            enabled: false
        },
        plotOptions: {
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                series: {
                    animation: {
                        duration: 2000
                    }
                },
                dataLabels: {
                    enabled: true,
                    format: '{point.y:.1f}%'
                },
                showInLegend: true
            }
        }
    });

    table.on('draw', function () {
        chart.series[0].setData(chartData(table), true);
    });

    function chartData(table) {
        var data = [];
        table.rows().every(function () {
            var row = this.data();
            data.push({
                name: row[0],
                y: parseFloat(row[1])
            });
        });

        return data;
    }
}
<html>
  <head>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

    <link href="https://nightly.datatables.net/css/dataTables.dataTables.css" rel="stylesheet" type="text/css" />
    <script src="https://nightly.datatables.net/js/dataTables.js"></script>

 <script src="https://code.highcharts.com/highcharts.js"></script>

  </head>
  <body>

<div class="ar-controls grid-row tablet:flex-justify-start">
<div class="tablet:grid-col-auto margin-bottom-205"><button id="current" class="usa-button usa-button--outline" title="Select to see related information below">2023</button> <button id="previous" class="usa-button usa-button--outline" title="Select to see related information below">2022</button> <button id="trend" class="usa-button usa-button--outline" title="Select to see related information below">ABC</button></div>
</div>

<div id="chart1">
<div id="demo-output" class="chart-display" style=" margin-bottom: 2em; height: 500px; border: solid 1px lightgray;"></div>

<table id="example1" class="display" style=" width: 100%;"><thead>
<tr>
<th scope="col">2023</th>
<th scope="col">Percent</th>
</tr>

</thead>
<tr>
<td scope="row">A</td>
<td>45.9%</td>
</tr>

<tr>
<td scope="row">B</td>
<td>22.0%</td>
</tr>

<tr>
<td scope="row">C</td>
<td>13.6%</td>
</tr>


</table>
</div>

<div id="chart2" style=" display: none;">
<div id="demo-output2" class="chart-display2" style=" margin-bottom: 2em; height: 680px; border: solid 1px lightgray;"></div>

<table id="example" class="display" style=" width: 100%;"><thead>
<tr>
<th scope="col">2022</th>
<th scope="col">Percent</th>
</tr>

</thead>
<tr>
<td>D</td>
<td>51.90%</td>
</tr>

<tr>
<td>E</td>
<td>18.60%</td>
</tr>


</table>
</div>

    
<div id="chart3" style=" display: none;">
<div id="chart-A" style=" width: 100%; height: 500px;"></div>

<table class="row-border stripe no-footer cell-border padding-top-5" id="example2" style=" width: 100%;"><thead>
<tr>
<th>Year</th>
<th>column1</th>
<th>column2</th>
<th>column3</th>
<th>column4/th>
<th>column5</th>
<th>column6</th>
<th>column7</th>
</tr>

</thead>
<tr>
<td scope="row" style=" text-align: left; white-space: nowrap;">FY19</td>
<td style=" text-align: left;">42.7%</td>
<td style=" text-align: left;">17.3%</td>
<td style=" text-align: left;">9.5%</td>
<td style=" text-align: left;">3.5%</td>
<td style=" text-align: left;">3.4%</td>
<td style=" text-align: left;">2.9%</td>
<td style=" text-align: left;">2.2%</td>
</tr>


</table>
</div>
</div>

推荐答案

Background个

使用当前代码，您实际上会收到警告和错误.

当您try 对数据表执行destroy()操作时，会出现该警告:

数据表警告:非表 node 初始化(DIV).有关此错误的更多信息，请参阅https://datatables.net/tn/2

如技术说明链接中所述:

DataTables将仅在HTML TABLE元素上初始化.

正如您在问题中指出的，这就是当您将divId更改为tableId时警告消失的原因.

其次，因为表没有被销毁，所以您会得到一个后续错误，因为代码试图初始化一个已经存在的表:

无法重新初始化DataTable.

One Solution个

一个简单的解决方案是执行以下操作:

  1. 删除试图销毁该表的代码行:

    //$(‘#’+DiViD).DataTable().销毁()；删除此行

  2. 使用retrieve: true选项(默认值为false).

此选项的工作方式如下:

如果已初始化表，则此参数将使DataTables仅返回已设置的对象

这假设您的表的现有初始化参数可以被重用.

在您的示例中，生成的代码如下:

function initializeDataTable(tableSelector) {
  $(tableSelector).DataTable({
    searching: false,
    responsive: true,
    lengthChange: false,
    ordering: false,
    info: false,
    paging: false,
    initComplete: function(settings, json) {
      let api = new $.fn.dataTable.Api(settings);

      var headers = api.columns().header().toArray();
      headers.forEach(function(heading, index) {
        if (index > 0 && index < headers.length) {
          categories.push($(heading).html());
        }
      });

      let rows = api.rows().data().toArray();
      rows.forEach(function(row) {
        group = {
          name: '',
          data: []
        };
        row.forEach(function(cell, idx) {
          if (idx == 0) {
            group.name = cell;
          } else if (idx < row.length) {
            group.data.push(parseFloat(cell.replace(/,/g, '')));
          }
        });
        allSeriesData.push(group);
      });
    }
  });
}

$(document).ready(function() {
  if (typeof Highcharts !== 'undefined') {
    initializeChart('demo-output', '#example1', 'test 1');
    initializeChart('demo-output2', '#example', 'test 2');

    var allSeriesData = [];
    var categories = [];
    $('#example2').data('scrollX-custom', true);

    if (!$.fn.DataTable.isDataTable("#example2 table")) {
      initializeDataTable("#example2 table");
    }

    Highcharts.setOptions({
      lang: {
        thousandsSep: ','
      }
    });

    var myChart = Highcharts.chart("chart-A", {
      chart: {
        type: "column",
        borderColor: 'lightgray',
        borderWidth: 1,
        marginTop: 50
      },
      tooltip: {
        headerFormat: '{point.key}<br/>',
        pointFormat: '{series.name}: <b>{point.y:.1f}%</b>'
      },
      legend: {
        symbolRadius: 0,
        itemStyle: {
          color: '#000000',
          fontSize: '16px'
        }
      },
      colors: ['#003489', '#ED7D31', '#A5A5A5', '#FFC000', '#5B9BD5'],
      credits: {
        enabled: false
      },
      title: {
        text: "test3"
      },
      xAxis: {
        categories: categories,
        labels: {
          style: {
            fontWeight: '600',
            fontSize: '16px',
            color: '#000000'
          }
        }
      },
      yAxis: {
        title: false,
        tickInterval: 10,
        max: 60,
        labels: {
          formatter: function() {
            return Highcharts.numberFormat(this.value, 0);
          },
          style: {
            fontWeight: '600',
            fontSize: '16px',
            color: '#000000'
          }
        }
      },
      series: allSeriesData
    });

    $('#trend').on('click', function() {
      $('#chart2').hide();
      $('#chart1').hide();
      $('#chart3').show();
      reloadChart('chart-A', '#example2', 'Top Seven test Award Trends', 'chart-A', 'column');
      $('.usa-button').removeClass('active');
      $(this).addClass('active');
    });

    $('.usa-button').on('click', function() {
      var buttonId = $(this).attr('id');
      if (buttonId === 'previous') {
        $('#chart2').show();
        $('#chart1').hide();
        $('#chart3').hide();
        reloadChart('demo-output2', '#example', 'test Awards by NAICS Codes, FY 2022', 'demo-output2', 'pie');
      } else if (buttonId === 'trend') {} else {
        $('#chart2').hide();
        $('#chart1').show();
        $('#chart3').hide();
        reloadChart('demo-output', '#example1', 'test Awards by NAICS Codes, FY 2023', 'demo-output', 'pie');
      }
      $('.usa-button').removeClass('active');
      $(this).addClass('active');
    });

    $('#current').addClass('active');
  }
});

function initializeChart(chartId, tableId, chartTitle) {
  const table = new DataTable(tableId, {
    searching: false,
    info: true,
    paging: false,
    sort: false
  });

  const chart = Highcharts.chart(chartId, {
    chart: {
      type: 'pie',
      styledMode: false
    },
    title: {
      text: chartTitle
    },
    colors: ['#1a4480', '#e52207', '#e66f0e', '#ffbe2e', '#fee685', '#538200', '#04c585', '#97d4ea', '#009ec1', '#0076d6', '#adadad', '#8168b3', '#d72d79', '#f2938c'],
    tooltip: {
      pointFormat: '</b> {point.y:.1f}%'
    },
    series: [{
      data: chartData(table)
    }],
    credits: {
      enabled: false
    },
    plotOptions: {
      pie: {
        allowPointSelect: true,
        cursor: 'pointer',
        series: {
          animation: {
            duration: 2000
          }
        },
        dataLabels: {
          enabled: true,
          format: '{point.y:.1f}%'
        },
        showInLegend: true
      }
    }
  });

  table.on('draw', function() {
    chart.series[0].setData(chartData(table));
  });

  function chartData(table) {
    var data = [];
    table.rows().every(function() {
      var row = this.data();
      data.push({
        name: row[0],
        y: parseFloat(row[1])
      });
    });

    return data;
  }
}

function reloadChart(chartId, tableId, chartTitle, divId, chartType) {
  //$('#' + divId).DataTable().destroy( true );

  const table = new DataTable(tableId, {
    searching: false,
    info: true,
    paging: false,
    sort: false,
    retrieve: true
  });

  const chart = Highcharts.chart(chartId, {
    chart: {
      type: chartType,
      styledMode: false
    },
    title: {
      text: chartTitle
    },
    colors: ['#1a4480', '#e52207', '#e66f0e', '#ffbe2e', '#fee685', '#538200', '#04c585', '#97d4ea', '#009ec1', '#0076d6', '#adadad', '#8168b3', '#d72d79', '#f2938c'],
    tooltip: {
      pointFormat: '</b> {point.y:.1f}%'
    },
    series: [{
      data: chartData(table)
    }],
    credits: {
      enabled: false
    },
    plotOptions: {
      pie: {
        allowPointSelect: true,
        cursor: 'pointer',
        series: {
          animation: {
            duration: 2000
          }
        },
        dataLabels: {
          enabled: true,
          format: '{point.y:.1f}%'
        },
        showInLegend: true
      }
    }
  });

  table.on('draw', function() {
    chart.series[0].setData(chartData(table), true);
  });

  function chartData(table) {
    var data = [];
    table.rows().every(function() {
      var row = this.data();
      data.push({
        name: row[0],
        y: parseFloat(row[1])
      });
    });

    return data;
  }
}
<html>

<head>
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <link href="https://nightly.datatables.net/css/dataTables.dataTables.css" rel="stylesheet" type="text/css" />
  <script src="https://nightly.datatables.net/js/dataTables.js"></script>
  <script src="https://code.highcharts.com/highcharts.js"></script>
</head>

<body>
  <div class="ar-controls grid-row tablet:flex-justify-start">
    <div class="tablet:grid-col-auto margin-bottom-205"><button id="current" class="usa-button usa-button--outline" title="Select to see related information below">2023</button> <button id="previous" class="usa-button usa-button--outline" title="Select to see related information below">2022</button>
      <button
        id="trend" class="usa-button usa-button--outline" title="Select to see related information below">ABC</button>
    </div>
  </div>
  <div id="chart1">
    <div id="demo-output" class="chart-display" style=" margin-bottom: 2em; height: 500px; border: solid 1px lightgray;"></div>
    <table id="example1" class="display" style=" width: 100%;">
      <thead>
        <tr>
          <th scope="col">2023</th>
          <th scope="col">Percent</th>
        </tr>
      </thead>
      <tr>
        <td scope="row">A</td>
        <td>45.9%</td>
      </tr>
      <tr>
        <td scope="row">B</td>
        <td>22.0%</td>
      </tr>
      <tr>
        <td scope="row">C</td>
        <td>13.6%</td>
      </tr>
    </table>
  </div>
  <div id="chart2" style=" display: none;">
    <div id="demo-output2" class="chart-display2" style=" margin-bottom: 2em; height: 680px; border: solid 1px lightgray;"></div>
    <table id="example" class="display" style=" width: 100%;">
      <thead>
        <tr>
          <th scope="col">2022</th>
          <th scope="col">Percent</th>
        </tr>
      </thead>
      <tr>
        <td>D</td>
        <td>51.90%</td>
      </tr>
      <tr>
        <td>E</td>
        <td>18.60%</td>
      </tr>
    </table>
  </div>
  <div id="chart3" style=" display: none;">
    <div id="chart-A" style=" width: 100%; height: 500px;"></div>
    <table class="row-border stripe no-footer cell-border padding-top-5" id="example2" style=" width: 100%;">
      <thead>
        <tr>
          <th>Year</th>
          <th>column1</th>
          <th>column2</th>
          <th>column3</th>
          <th>column4/th>
            <th>column5</th>
            <th>column6</th>
            <th>column7</th>
        </tr>
      </thead>
      <tr>
        <td scope="row" style=" text-align: left; white-space: nowrap;">FY19</td>
        <td style=" text-align: left;">42.7%</td>
        <td style=" text-align: left;">17.3%</td>
        <td style=" text-align: left;">9.5%</td>
        <td style=" text-align: left;">3.5%</td>
        <td style=" text-align: left;">3.4%</td>
        <td style=" text-align: left;">2.9%</td>
        <td style=" text-align: left;">2.2%</td>
      </tr>
    </table>
  </div>
  </div>
</body>

</html>

Javascript相关问答推荐

Next.js Next/Image图像隐含性有任何类型-如何修复？

使用useup时，React-Redux无法找到Redux上下文值

使用续集和下拉栏显示模型属性

使用JavaScript重新排序行

将本机导航路由react 到导航栏中未列出的屏幕？

我的服务工作器没有连接到我的Chrome扩展中的内容脚本.我该怎么解决这个问题？

如何从URL获取令牌？

查找最长的子序列-无法重置数组

为什么Mutations 观察器用微任务队列而不是macrotask队列处理？

使用领域Web SDK的Vite+Vue应用程序中的Web程序集(WASM)错误

是什么导致了这种奇怪的水平间距错误(？)当通过JavaScript将列表项元素追加到无序列表时，是否在按钮之间？

在使用REACT更改了CSS类之后，无法更改CSS样式

处理app.param()中的多个参数

MongoDB中的嵌套搜索

在SuperBase JS客户端中寻址JSON数据

如果NetSuite中为空，则限制筛选

在JavaScript中将Base64转换为JSON

如何正确地在ComponentWillUnmount中卸载状态以避免内存泄漏？

如何在Web项目中同步语音合成和文本 colored颜色 更改

Select 所有输入.值

实用课程推荐
相关教程推荐
休闲君评测 |  TOOLFK工具网 |  古诗文网 |  良许Linux教程网 |  Python之禅 |  红色石头 |  入党申请书 | 

© 2020 Hi LearnFk 意见反馈 免责声明 关于我们 桂ICP备11002319号-3 友链&广告位+QQ: 1963612630