Question

为了显示一个数据透视表，我将JavaScript集成到源https://rwjblue.github.io/pivot.js/的html页面中。

    <script type="text/javascript" src="js/pivot/subnav.js"></script>
    <script type="text/javascript" src="js/pivot/accounting.min.js"></script>
    <script type="text/javascript" src="js/pivot/pivot.min.js"></script>
    <script type="text/javascript" src="js/pivot/utils.js"></script>
    <script type="text/javascript" src="js/pivot/pivot.js"></script>
    <script type="text/javascript" src="js/pivot/jquery_pivot.js"></script>

脚本ivot.js提供了数据透视表的输入，数据和结构。脚本jquery_pivot.js处理输入，构建并发布数据透视表和过滤器。有用。现在，我想在同一html页面上显示另一个具有不同数据集和结构的数据透视表。它没有用。

我做了什么：

我复制了脚本文件ivot.js，将副本重命名为pivot1.js和pivot2.js，并更改了不同数据集和结构的代码。

<script type="text/javascript" src="js/pivot/pivotTable1.js"></script>
<script type="text/javascript" src="js/pivot/pivotTable2.js"></script>

// e.g. pivotTable1.js for pivot table 1:

var fields = [...]

function setupPivot(input){
    input.callbacks = {afterUpdateResults: function(){
        $('#results1 > table').dataTable({...}); // originally ('#results');
    }};
$('#pivotTable1').pivot_display('setup', input); // originally ('#pivot-table');
};

$(document).ready(function() {
    setupPivot({url:'./data.csv', fields: fields, rowLabels:[...], summaries:[...] })
});

在我的html页面上，将显示数据透视表的地方，我用div封装了每个部分，并带有“ pivot”类，并为该表分配了一个ID，例如1.我更改了相关的div ID，并添加了表格编号，例如1。

// e.g. for pivot table 1:

<html>
    <body>
        <div id="1" class="pivot">
            <div class="subnav">
                <ul class="nav nav-pills">
                    <li class="dropdown">
                        <a class="dropdown-toggle" data-toggle="dropdown" href="#">Columns<b class="caret"></b></a>
                        <ul class="dropdown-menu stop-propagation">
                            <div id="row-label-fields1"></div>
                        </ul>
                    </li>
                    <li class="dropdown">
                        <a class="dropdown-toggle" data-toggle="dropdown" href="#">Filters<b class="caret"></b></a> 
                        <ul class="dropdown-menu stop-propagation">
                            <div id="filter-list1"></div>
                        </ul>
                    </li>
                    <li class="dropdown">
                        <a class="dropdown-toggle" data-toggle="dropdown" href="#">Values<b class="caret"></b></a>
                        <ul class="dropdown-menu stop-propagation">
                            <div id="summary-fields1"></div>
                        </ul>
                    </li>
                    <li class="dropdown">
                        <a class="dropdown-toggle" data-toggle="dropdown" href="#">Group Values<b class="caret"></b></a>
                        <ul class="dropdown-menu stop-propagation">
                            <div id="column-label-fields1"></div>
                        </ul>
                    </li>
                </ul>
            </div>
            <div id="pivot-detail1"></div> <!--- gets the filter list from jquery_pivot.js --->
            <div class="space"></div>
            <div id="results1"></div> <!--- gets the field values from jquery_pivot.js --->
        </div>
    </body>

    <!-- jQuery
    ================================================== --> 
    <script type="text/javascript" src="vendors/jQuery/jquery-3.3.1.min.js"></script>

    <!-- Pivot.js 
    ================================================== -->
    <script type="text/javascript" src="js/pivot/subnav.js"></script>
    <script type="text/javascript" src="js/pivot/accounting.min.js"></script>
    <script type="text/javascript" src="vendors/Pivot.js/pivot.min.js"></script>
    <script type="text/javascript" src="js/pivot/utils.js"></script>
    <script type="text/javascript" src="js/pivot/pivotTable1.js"></script>
    <script type="text/javascript" src="js/pivot/pivotTable2.js"></script>
    <script type="text/javascript" src="js/pivot/jquery_pivot.js"></script>

    <!-- Datatables.js
    ================================================== -->     
    <script type="text/javascript" src="vendors/DataTables/DataTables-1.10.18/js/jquery.dataTables.min.js"></script>
    <script type="text/javascript" src="vendors/DataTables/FixedHeader-3.1.4/js/dataTables.fixedHeader.min.js"></script>
    <script type="text/javascript" src="vendors/DataTables/datatables.js"></script> 

</html>

在脚本jquery_pivot.js中，我将原始函数包装在每个函数中，以便获取html类'pivot'的所有div ID。我通过在脚本开头和结尾处发出警报来检查脚本是否运行了两次。我有4个警报，因此它针对每个表运行。

        // get table id's, append original var names by div pivot id and replace the original var in original code by new var: 

        var my_resultsDivId;
        var my_pivotDetailsDivId;
        var my_tableId;
        var my_resultRows;
        var my_filterList;
        var my_rowLabelFields;
        var my_columnLabelFields;
        var my_summaryFields;
        var my_selectConstructor;

        $('.pivot').each(function () {
            my_resultsDivID = 'results' + this.id; // e.g. 'results' is the original var name
            my_pivotDetailDivID = 'pivot-detail' + this.id;
            my_tableDivID = 'pivotTable' + this.id;
            my_resultRows = 'result-rows' + this.id;
            my_filterList = 'filter-list' + this.id;
            my_rowLabelFields = 'row-label-fields' + this.id;
            my_columnLabelFields = 'column-label-fields' + this.id;
            my_summaryFields = 'summary-fields' + this.id;
            my_selectConstructor = 'select-constructor' + this.id;

            alert(this.id); // check which id is processed

            (function( $ ) {...})( jQuery );  // original code

             alert(this.id + ' done'); // check script is actually processed for each id one after the other
        });

结果：不变，仅显示表2，该表在我的HTML Java脚本中最后列出了一个脚本ivotTable2.js。当我更改脚本的顺序并在最后放置ivotTable1.js时，将显示表1，但在表2的div内。此外，表1没有DataTables提供的设计和功能。即使当我从html中删除脚本ivotTable2.js时，表1仍显示在页面中表2的位置，并且没有表设计。我该如何改善？任何帮助和评论都非常感谢。

Answer 1

您可以在ONE JS文件中使用以下功能创建多个数据透视表。从技术上讲，您不需要将fields1和fields2设置为变量，而是可以将数据直接传递到函数中，但是我将其保留为与已有的相似。现在，对函数的唯一添加就是只需将引用作为参数（在{}之外）传递给数据表和数据透视表。

html += "<link rel=\"stylesheet\" href=\"{{ url_for('static', filename='css/main.css') }}\">"

如何在一个HTML页面中运行一个脚本以显示两个数据透视表

1 个答案: