5

ページネーションが有効になっている DataTable があり、この設定を無効にして、ボタンを押してページャーなしですべての結果を表示する必要があります。

既に定義されている設定にアクセスし、ページングを false に変更し、テーブルを再描画しようとしていますが、うまくいきません。同様のフォーラムスレッドを検索して試しましたが、成功しませんでした。

どうすればそれを達成できますか？

これは、動作しないコードを使用したデモです

HTML:

<div id="main_wrapper">
    <button class="form_button destroy_pager" type="button" onclick="" title="Destroy pager">Destroy pager</button>

    <table id="example" cellpadding="0" cellspacing="0" border="0">
        <thead>
            <tr>
                <th>Column 1</th>
                <th>Column 2</th>
                <th>Column 3</th>
                <th>Column 4</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Data 1</td>
                <td>Data 2</td>
                <td>Data 3</td>
                <td>Data 4</td>
            </tr>
            <tr>
                <td>Data 1</td>
                <td>Data 2</td>
                <td>Data 3</td>
                <td>Data 4</td>
            </tr>
            <tr>
                <td>Data 1</td>
                <td>Data 2</td>
                <td>Data 3</td>
                <td>Data 4</td>
            </tr>
            <tr>
                <td>Data 1</td>
                <td>Data 2</td>
                <td>Data 3</td>
                <td>Data 4</td>
            </tr>
            <tr>
                <td>Data 1</td>
                <td>Data 2</td>
                <td>Data 3</td>
                <td>Data 4</td>
            </tr>
            <tr>
                <td>Data 1</td>
                <td>Data 2</td>
                <td>Data 3</td>
                <td>Data 4</td>
            </tr>
            <tr>
                <td>Data 1</td>
                <td>Data 2</td>
                <td>Data 3</td>
                <td>Data 4</td>
            </tr>
            <tr>
                <td>Data 1</td>
                <td>Data 2</td>
                <td>Data 3</td>
                <td>Data 4</td>
            </tr>
            <tr>
                <td>Data 1</td>
                <td>Data 2</td>
                <td>Data 3</td>
                <td>Data 4</td>
            </tr>
            <tr>
                <td>Data 1</td>
                <td>Data 2</td>
                <td>Data 3</td>
                <td>Data 4</td>
            </tr>
            <tr>
                <td>Data 1</td>
                <td>Data 2</td>
                <td>Data 3</td>
                <td>Data 4</td>
            </tr>
            <tr>
                <td>Data 1</td>
                <td>Data 2</td>
                <td>Data 3</td>
                <td>Data 4</td>
            </tr>
            <tr>
                <td>Data 1</td>
                <td>Data 2</td>
                <td>Data 3</td>
                <td>Data 4</td>
            </tr>
            <tr>
                <td>Data 1</td>
                <td>Data 2</td>
                <td>Data 3</td>
                <td>Data 4</td>
            </tr>
        </tbody>
    </table>
</div>

jQuery:

$(document).ready(function() {

    var oTable = $('#example').DataTable({
        'bPaginate': true,
        'iDisplayLength': 5
    });

    $('button.destroy_pager').on('click', function() {        
        var oSettings = oTable.settings;
        oSettings.bPaginate  = false;
        oTable.draw();
    });


});

編集: DataTable を初期化するときに、ページャーを有効にする必要があります。問題は、ボタンを押した後に無効にする必要があることです。

前もって感謝します

4

4 に答える 4

4

ボタンのクリック 時にbPaginateオプションを設定して、データテーブルを破棄して再初期化する必要がありますfalse

 $(document).ready(function() {
    var table =  $('#example');
    var tableOptions = {
        'bPaginate': true,
        'iDisplayLength': 5
    };
   table.DataTable(tableOptions);
   $('button.destroy_pager').on('click', function() {        
        table.DataTable().destroy()
        tableOptions.bPaginate = false;
        table.DataTable(tableOptions);
    });
});

デモ

于 2015-05-07T14:45:27.713 に答える