1

ユーザーが選択したオプションを変更する<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れていません」と表示され、テーブルが描画されないようにする必要があります。ユーザーが「何も選択されていません」以外のものを選択すると、適切なjQuery DataTableがdiv内に描画されます。前もって感謝します！table-to-show

4

2 に答える 2

0

これを試して...

これを交換して...

<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プロパティに使用されます

それが役立つことを願っています!

于 2012-10-09T20:44:55.883 に答える
0

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;}

選択ドロップダウンからさまざまなオプションを選択するときに、クラスを切り替えるだけです...

于 2012-10-09T20:28:25.450 に答える