javascript - 如何让 jQuery DataTables 在多个 DOM 表之间切换？

Question

我有一个<select>并且每次用户更改其选择的选项时，我都想要一个不同的 jQuery Datatable 来绘制（使用隐藏的 DOM<table>作为数据源）：

<!-- Assume I have included jquery.dataTables.css and jquery.dataTables.js correctly. -->

<style>
    #hidden-tables {
        display: hidden;
    }
</style>

<script type="text/javascript">
    $(document).ready(function () {
        $("#table1").dataTable();
        $("#table2").dataTable();
    });
</script>

<select id="my-sel">
    <option selected="selected" id="opt1">Nothing selected</option>
    <option id="opt1">Opt1</option>
    <option id="opt2">Opt2</option>
</select>

<div id="hidden-tables">
    <table id="table1">
        <!-- Omitted for brevity -->
    </table>
    <table id="table2">
        <!-- Omitted for brevity -->
    </table>
</div>

<!-- When the user selects opt1 or opt2 in the "my-sel" <select>, then display its corresponding table here. -->
<div id="table-to-show"></div>

基本上，当页面加载时，我希望my-sel选择显示“ Nothing selected ”并且不绘制表格。当用户选择“ Nothing selected ”以外的任何内容时，我希望适当的 jQuery DataTable 在table-to-showdiv内绘制。提前致谢！

Answer 1

一种解决方案可能是

<div class="show">
    <table id="table1">
        <!-- Omitted for brevity -->
    </table>
</div>
<div class="hide">
    <table id="table2">
        <!-- Omitted for brevity -->
    </table>
</div>

在哪里

.hide {display:none;}

和

.show {display:block;}

当您从选择下拉列表中选择不同的选项时，您所要做的就是切换类...

Answer 2

尝试这个...

换这个...

<script type="text/javascript">
$(document).ready(function () {
    $("#table1").dataTable();
    $("#table2").dataTable();
});
</script>

有了这个..

<script type="text/javascript">
$(document).ready(function () {
    $('#my-sel').change(function () {
        var opt = $(this).find('option:selected').html();
        if (opt !== 'Nothing selected') {
            $('#table-to-show').html('');
            var tableName;
            switch (opt) {
                case 'Opt1':
                    tableName = 'table1';
                    break;
                case 'Opt2':
                    tableName = 'table2';
                    break;
            }
            $('#' + tableName).clone(true).appendTo('#table-to-show');
            $('#table-to-show table').dataTable();
        }
    });
});
</script>

还将您的更改display:hidden;为display:none; “隐藏”用于css属性“可见”而不是“显示”

希望有帮助！