I have a html file, which shows two Tabulator tables. Table 1 is connected to saveFile1.json and table 2 to saveFile2.json. My problem is, that the <script> from saveFile2.json overwrites the <script> from saveFile1.json, so that both tables show the content from saveFile2.json. How can I fix this? Thank you.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="MyCSS.css" >
<script type="text/javascript" src="node_modules/tabulator-tables/dist/js/tabulator.js"></script>
</head>
<body>
<table>
<td>
<div id="table1"></div>
<script type="text/javascript" src="saveFile1.json"></script>
</td>
<td>
<div id="table2"></div>
<script type="text/javascript" src="saveFile2.json"></script>
</td>
</table>
<script type="text/javascript" src="tabulatorTables.js"></script>
</body>
</html>
Im gonna guess (since you dont provide a jsfiddle) that your json files consist of
saveFile1.json : var data = [ ... ];
saveFile2.json : var data = [ ... ];
and you use the same data variable on each of your Tabulators.
Hence, last saveFile*.json loaded, wins.
Use different variable names (data1 and data2) and apply them to each Tabulator (table1.setData(data1); table2.setData(data2) ) specifically.