Отобразить две сводные таблицы с помощью jquery

Я пытаюсь создать две сводные таблицы, используя pivottable.js, чтобы показать часы заработной платы

желаемый результат будет выглядеть так:

Расчет заработной платы за местоположение 1

foo
bar
biz

Расчет заработной платы для местоположения 2

bad
bash 
bin

очевидно, в форме отображения pivottable.js, которую я не могу воссоздать здесь

однако, сводная таблица показывает только один для страницы, и это либо местоположение 1, либо местоположение 2

Я не знаю достаточно о javascript или html, чтобы понять, что я делаю здесь неправильно, это кажется простой проблемой, которую я просто не вижу. это все в php-файле.

вот код, который я использую для файла php

$pageStart = '<html>
<head>
    <title>Payroll</title>
    <!-- c3 and d3 scripts and jquery -->
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.11/c3.min.css">
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.11/c3.min.js"></script>
    <script type="text/javascript" src="./jquery/jquery-3.2.1.min.js"></script>
    <script type="text/javascript" src="./jquery/jquery-ui-1.12.1/jquery-ui.min.js"></script>

    <!-- PivotTable.js -->
    <link rel="stylesheet" type="text/css" href="./jquery/pivottable/dist/pivot.css">
    <script type="text/javascript" src="./jquery/pivottable/dist/pivot.js"></script>
    <script type="text/javascript" src="./jquery/c3_renderers.js"></script>

    <style>
        body {font-family: Verdana;}
    </style>

    <!-- mobile support -->
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js"></script>

</head>
<body>
<p> Location 1 payroll hours
    <script type="text/javascript">
// This loads the payroll hours for location 1
// no derived attributes
var derivers = $.pivotUtilities.derivers;
var renderers = $.extend($.pivotUtilities.renderers,
$.pivotUtilities.c3_renderers);
$(function(NB){NB,
        $("#output").pivotUI(
        ' . $json . ',
        {rows: ["Name"],
        cols: ["Hours_type", "Date"],
        aggregatorName: "Sum",
        vals: ["Hours"],}
        );
 });
 </script>
 <br>
 <p> location 2 Payroll Hours
 <script>
$(function(SV){
        $("#output").pivotUI(SV,
        ' . $json2 . ',
        {rows: ["Name"],
        cols: ["Hours_type", "Date"],
        aggregatorName: "Sum",
        vals: ["Hours"],}
        );
 })
    </script>

    <div id="output" style="margin: 30px;"></div>

</body>
</html>';

print $pageStart;

$json а также $json2 являются функциями MySQL, которые вытягивают данные для сводной таблицы для отображения

Источник

1 ответ

Решение

Если вы используете $("#output") для обеих таблиц, то одна перезапишет другую.

Источник

Вам понадобятся два разных тега с разными идентификаторами, например:

Ссылка на первую таблицу в output и вторую в output1

Источник
Другие вопросы по тегам