Javascript 如何运行一个脚本在一个HTML页面中显示两个透视表
为了显示一个透视表，我从源代码将javascript集成到html页面中 结果: 未更改，仅显示表2，即在我的html java脚本中最后列出的脚本pivotTable2.js。 当我更改脚本顺序并将pivotTable1.js放在最后时，会显示表1，但在表2的div中。此外，表1没有DataTables提供的设计和功能。即使我从html中删除了脚本pivotTable2.js，表1也会显示在页面上表2的位置，并且没有表设计。Javascript 如何运行一个脚本在一个HTML页面中显示两个透视表,javascript,html,Javascript,Html,为了显示一个透视表，我从源代码将javascript集成到html页面中 结果: 未更改，仅显示表2，即在我的html java脚本中最后列出的脚本pivotTable2.js。 当我更改脚本顺序并将pivotTable1.js放在最后时，会显示表1，但在表2的div中。此外，表1没有DataTables提供的设计和功能。即使我从html中删除了脚本pivotTable2.js，表1也会显示在页面上表2的位置，并且没有表设计。 我怎样才能提高？非常感谢您的帮助和评论。您可以在一个js文件中使用以
我怎样才能提高？非常感谢您的帮助和评论。您可以在一个js文件中使用以下函数创建多个透视表。从技术上讲，您不需要将fields1和fields2设置为变量，相反，您可以将数据直接传递到函数中，但我保持了这种方式，以保持与您已有的类似。现在，对函数的唯一添加是将对数据表和透视表的引用作为参数传递（在{}之外）
您可以在一个js文件中使用以下函数来创建多个透视表。从技术上讲，您不需要将fields1和fields2设置为变量，相反，您可以将数据直接传递到函数中，但我保持了这种方式，以保持与您已有的类似。现在，对函数的唯一添加是将对数据表和透视表的引用作为参数传递（在{}之外）
那么在两个js文件中，您都在重用函数名
setupPivot函数setupPivot1（输入）{…}我得到相同的结果：显示表2。这就是你的意思？那么在你的两个js文件中你都在重用函数名setupPivot
？如果是这样的话，作为一个快速修复实验，我将重命名其中一个并在同一个js文件中调用它。如果这样做有效，那么您至少知道问题所在。是的，我重用了名为setupPivot的函数。我现在尝试了函数setupPivot1（输入）{…}我得到相同的结果：显示表2。这就是你的意思吗？我第一次完全尝试了你的代码并显示了我的第二个表，但是没有表设计。我在编辑时更改了您的代码，并正确显示了第二个表，但没有正确显示第一个表。我更改了setupPivot的顺序，先更改了表2，然后不正确地显示了第二个表。更正：我更改了setupPivot的顺序，先更改了表2，然后不正确地显示了第一个表。我第一次完全尝试了您的代码并显示了第二个表，但没有进行表设计，结果不正确。我在编辑时更改了您的代码，并正确显示了第二个表，但没有正确显示第一个表。我先更改了setupPivot表2的顺序，然后第二个表显示不正确。更正：我先更改setupPivot表2的顺序，然后第一个表显示不正确。
<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>
<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:[...] })
});
// 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>
// 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
});
var fields1 = [...];
var fields2 = [...];
function setupPivot(input, data_table_obj, pivot_table_obj){
input.callbacks = {afterUpdateResults: function(){
$(data_table_obj).dataTable({...}); // originally ('#results');
}};
$(pivot_table_obj).pivot_display('setup', input); // originally ('#pivot-table');
};
$(document).ready(function() {
setupPivot({url:'./data.csv', fields: fields1, rowLabels:[...], summaries:[...] },'#results > table', '#pivotTable');
setupPivot({url:'./data.csv', fields: fields2, rowLabels:[...], summaries:[...] },'#results1 > table', '#pivotTable1');
});