使用下拉菜单显示 2 个不同的数据表答案

【问题标题】：Using dropdown to show 2 different datatables使用下拉菜单显示 2 个不同的数据表
【发布时间】：2017-10-22 07:35:37
【问题描述】：

我一直在处理我的 WordPress 网站上的一个问题，但我被困住了。我有两个工作数据表（当前都显示在页面上）和一个下拉选择框。我需要下拉框，其中包含 2 个选项（每个表一个）来选择一个表并仅显示该表。

理想情况下，我希望页面加载默认表 (id="mytable")，然后下拉菜单可以控制那里的所有内容。

这里是代码，除了表格本身：

<select name='tables' id='select-tables'>
  <option value="mytable">Survey Test Table</option>
  <option value="mytableSurvey">Survey Only</option>
</select>

//This is the code for the dropdown 

<script type="text/javascript"   src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js">
<script>
(function($) {
$('#select-tables').on('change', function(){
   var table = $(this).find('option:selected');
   $('#' + table).show();
   $('table').not('#' + table).hide();
});
}(jQuery));

两个表都有自己的数据表脚本：

//datatable 1, table id is mytable

<script type="text/javascript" src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js">
</script>
<script type="text/javascript">
(function($) {
$(document).ready(function(){
$('#mytable').DataTable();
   $('.dataTable').wrap('<div class="dataTables_scroll" />');
});
}(jQuery));
</script>

// table 2, table id is mytableSurvey
<script type="text/javascript" src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js">
</script>
<script type="text/javascript">
(function($) {
$(document).ready(function(){
$('#mytableSurvey').DataTable();
   $('.dataTable').wrap('<div class="dataTables_scroll" />');
});
}(jQuery));
</script>

由于这是在 wordpress 中，我必须修改下拉代码的 JS 以匹配数据表代码，以便它可以在 WP 中工作。有没有更好的方法用 JS 为现有数据表编写下拉代码？

【问题讨论】：

“更好的方法”是什么意思？它有效吗？你在问什么？您只需要$('.dataTable').wrap('<div class="dataTables_scroll" />'); 一次，因为它适用于所有这些，并且您只需要包含一次数据表插件，理想情况下您应该在wp_enqueue_scripts 中执行此操作
你问的不是很清楚。
大部分数据表代码看起来是多余的，尤其是两次加载 jQuery 插件。
对不起，我以为主要问题已在第一个声明中阐明。数据表工作，它们都加载得很好并且运行完美，但我不希望两个表相互重叠。我希望下拉菜单选择显示哪个表。您可以看到我使用 mytable 和 mytableSurvey 作为下拉列表中的选项值，并且对应于 2 个表 ID。如果我将表格设置为 display:none;，我想使用下拉菜单选择 2 个表格之一并在页面上显示该表格。
@TomN。它实际上在您提供的代码中加载了 3 次。无论如何，希望我的回答能帮到你。

标签： javascript php jquery wordpress datatable

【解决方案1】：

你有很多冗余代码，所以我也会为你减少很多重复。

<select name='tables' id='select-tables'>
  <option value="mytable">Survey Test Table</option>
  <option value="mytableSurvey">Survey Only</option>
</select>

//This is the code for the dropdown 

<script type="text/javascript"   src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js">
<script type="text/javascript">
(function($) {
$('#select-tables').on('change', function(){
   var table = $(this).find('option:selected');
   $('#' + table).show();
   $('table').not('#' + table).hide();
});
}(jQuery));

(function($) {
$(document).ready(function(){
   $('#mytable').DataTable();
   $('#mytableSurvey').DataTable();
   $('.dataTable').wrap('<div class="dataTables_scroll" />');

   //open the #mytable table on page load and close 'mytableSurvey'
   $('#mytable').show();
   $('#mytableSurvey').hide();
});
}(jQuery));
</script>

【讨论】：

谢谢，这至少开始起作用了。更改代码后，页面现在只加载了 mytable，这是正确的，但是当我选择 mytableSurvey 时，没有任何变化。它仍然显示 mytable
您可以在 testing.uwsinc.net/dashboardtest 查看它的状态。我正在使用上面的代码，除了我必须在第一个 jQuery 和第二个函数（$）之间结束脚本并启动新脚本。这是它实际创建数据表的唯一方法。它似乎成功地隐藏了第二个表，但不是它的包装/元素。而且下拉菜单似乎仍然不起作用
太棒了！很高兴我能帮上忙。