javascript - 数据表 - 使用选择框显示/隐藏

Question

我目前有 2 个工作数据表和一个选择框。目前，它们都显示在页面加载时，然后如果我从选择框中选择一个，它会显示一个并隐藏另一个。选择框从那里工作得很好，但我想默认情况下在页面加载时仅显示一个表格，而不是两者都显示。

这是带有选择框代码的数据表脚本:

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

<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();
$('#mytableSurvey').DataTable();
$('.dataTable').wrap('<div class="dataTables_scroll" />');

// select change event
$(document).on('change' , '#select-tables', function(){
 var table = $(this).val();
 $('#' + table +'_wrapper').show();
 $('[id$="_wrapper"]').not('#' + table +'_wrapper').hide();
}).change();
});
}(jQuery));
</script>

显然，我的表 ID 是 mytable 和 mytableSurvey，因此我不会发布任何实际的表代码，因为所有必要的内容都在此处的数据表脚本中。

这里的一切都有效，我只是希望找到此代码的补充，仅在页面加载时显示“mytable”。

Answer 1

试试这个代码:

$(document).ready(function() {
    $('#mytable').DataTable();
    $('#mytableSurvey').DataTable();

    $(document).on('change' , '#select-tables', function(){
 var table = $(this).val();
 $('#' + table +'_wrapper').show();
 $('[id$="_wrapper"]').not('#' + table +'_wrapper').hide();
});
$("#select-tables").trigger("change");
});

DEMO