Question

我已经在我的WordPress网站上处理了一个问题，但是我已经陷入了困境。我有两个工作数据表（当前在页面上相互显示）和一个下拉选择框。我需要下拉框，其中包含2个选项（每个表一个）以选择一个表并仅显示该表。

理想情况下，我希望使用默认表格加载页面（id =＆＃34; mytable＆＃34;），然后下拉列表可以控制所有内容。

以下是代码，而不是表格本身：

<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为现有数据表编写下拉列表？

Answer 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>

使用下拉列表显示2个不同的数据表

1 个答案: