(jQuery)datatablesの表示件数を変更できない

Question

お世話になります。
jQueryのdatatablesのLengthMenuを変更出来ません。
エラーが発生してしまいます。

エラー内容：

DataTables warning: table id={id} - Cannot reinitialise DataTable.

エラー文言で何度も調べましたが、解決することができませんでした。
アドバイスを頂けると幸いです。

該当ソースコードを記載いたします。

                <div class="row">
                    <div class="box col-md-12">
                        <div class="box-inner">
                            <div class="box-header well" data-original-title="">
                                <h2><i class="glyphicon glyphicon-list"></i> 検索結果</h2>
                                <div class="box-icon">
                                    <a href="#" class="btn btn-minimize btn-round btn-default"><i class="glyphicon glyphicon-chevron-up"></i></a>
                                    <a href="#" class="btn btn-close btn-round btn-default"><i class="glyphicon glyphicon-remove"></i></a>
                                </div>
                            </div>
                            <div class="box-content result">
                                <table class="table table-striped table-bordered bootstrap-datatable datatable responsive" id="result-table">
                                    <thead>
                                        <tr>
                                            <th>Username</th>
                                            <th>Date registered</th>
                                            <th>Role</th>
                                            <th>Status</th>
                                            <th>Actions</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td>David R</td>
                                            <td class="center">2012/01/01</td>
                                            <td class="center">Member</td>
                                            <td class="center">
                                                <span class="label-success label label-default">Active</span>
                                            </td>
                                            <td class="center">
                                                <a class="btn btn-success" href="#">
                                                    <i class="glyphicon glyphicon-zoom-in icon-white"></i>View
                                                </a>
                                                <a class="btn btn-info" href="#">
                                                    <i class="glyphicon glyphicon-edit icon-white"></i>Edit
                                                </a>
                                                <a class="btn btn-danger" href="#">
                                                    <i class="glyphicon glyphicon-trash icon-white"></i>Delete
                                                </a>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>Chris Jack</td>
                                            <td class="center">2012/01/01</td>
                                            <td class="center">Member</td>
                                            <td class="center">
                                                <span class="label-success label label-default">Active</span>
                                            </td>
                                            <td class="center">
                                                <a class="btn btn-success" href="#">
                                                    <i class="glyphicon glyphicon-zoom-in icon-white"></i>View
                                                </a>
                                                <a class="btn btn-info" href="#">
                                                    <i class="glyphicon glyphicon-edit icon-white"></i>Edit
                                                </a>
                                                <a class="btn btn-danger" href="#">
                                                    <i class="glyphicon glyphicon-trash icon-white"></i>Delete
                                                </a>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>Jack Chris</td>
                                            <td class="center">2012/01/01</td>
                                            <td class="center">Member</td>
                                            <td class="center">
                                                <span class="label-success label label-default">Active</span>
                                            </td>
                                            <td class="center">
                                                <a class="btn btn-success" href="#">
                                                    <i class="glyphicon glyphicon-zoom-in icon-white"></i>View
                                                </a>
                                                <a class="btn btn-info" href="#">
                                                    <i class="glyphicon glyphicon-edit icon-white"></i>Edit
                                                </a>
                                                <a class="btn btn-danger" href="#">
                                                    <i class="glyphicon glyphicon-trash icon-white"></i>Delete
                                                </a>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>

$("#result-table").DataTable({
        // 件数切替の値を10～50の10刻みにする
        lengthMenu: [ 10, 20, 30, 40, 50 ],
        // 件数のデフォルトの値を50にする
        displayLength: 50,  
        scrollX: true,
        scrollY: 200,
        columnDefs: [
            { targets: 0, visible: false },
            { targets: 1, width: 100 }
        ]
});

    <script>
        $(function() {
            $("#datePiceker_begin").datepicker();
        });
        $(function() {
            $("#datePiceker_end").datepicker();
        });
        $('#clear').click(function() {
            $('.form-control').val("");
        });
        $('#search_condition').click(function() {
            if ($('#search_condition_list').is(':visible')) {
                $('#search_condition_list').animate({
                    height: 'hide'
                }, "normal");
                $('#search_condition').text("▶︎Search Condition");
            } else {
                $('#search_condition_list').animate({
                    height: 'show'
                }, "normal");
                $('#search_condition').text("▼Search Condition");
            }
        });
        
        table = $("#result-table").DataTable();
        table.destroy();
        table = $("#result-table").DataTable({
                // 件数切替の値を10～50の10刻みにする
                lengthMenu: [ 10, 20, 30, 40, 50 ],
                // 件数のデフォルトの値を50にする
                displayLength: 50,  
                scrollX: true,
                scrollY: 200,
                columnDefs: [
                    { targets: 0, visible: false },
                    { targets: 1, width: 100 }
                ]
        });
    </script>

datatablesバージョン

File: jquery.dataTables.min.js
Version: 1.9.2

tableは、charismaのテーブルテンプレートを使用しています。
不足情報等ございましたら、ご指摘下さいませ。
何卒　宜しくお願い致します。

Comments

[退会済みユーザー]

エラーメッセージにURLが付与されてたはずだけど

[niship]

URLは表示されていませんでした。

[退会済みユーザー]

とりあえず、datatables のバージョンを書いてください、エラーメッセジにURLがでないことを含め色々とおかしいです

[m.ts10806]

ひとまず調べて参考にしたサイトを追記してもらえますか？回答のヒントになりえます。

[niship]

http://www.kotazi.com/blog/post/20151229_datatables/
こちらを参考にして、destroyなどをtrueにしましたが、効果はありませんでした。

[退会済みユーザー]

とりあえずそのページは 1.10.x 向けであって 1.9.x 向けではないな

Answer 1

Cannot reinitialise DataTable

データテーブルを再初期化できません。
てことだから　同じテーブルですでにデータテーブルを構築してるだけでしょ

追記

$("#selector").DataTable({ destroy : true }); → 1.9 系では未実装
$("#selector").DataTable({ retrieve: true }); → 1.9 系では未実装

github.com - jquery.dataTables.1.9.2.js

Comments

[unz.hori]

確かにエラーメッセージを見るとそうですね。

[退会済みユーザー]

https://jsfiddle.net/qtdcuua4/2/

提示されてる場所だけ設定すれば正常動作ですから

[unz.hori]

おお、検証しているとは。さすがです！

[niship]

調べた結果、そのことはわかっていますが、
destroy: trueや、retrieve: trueも効果がありませんでした。

[unz.hori]

そのことが分かっているとはどういうことでしょう？

[退会済みユーザー]

提示された範囲だけでは問題ないので誰も回答はできないです。

再構築時は以下のような処理になります。

$table = $("#result-table").DataTable();
$table .destroy(); // 再構築するまえに除去する
$table = $("#result-table").DataTable();

[退会済みユーザー]

ちなみに同じメッセージを出すように改変

https://jsfiddle.net/asahina/qtdcuua4/4/

[退会済みユーザー]

マニュアル通り再構築をする

https://jsfiddle.net/asahina/qtdcuua4/6/

[退会済みユーザー]

destroy: true オプション

https://jsfiddle.net/asahina/qtdcuua4/9/

[unz.hori]

珍しくasahina1979さんが激レスしてるw
質問する側は回答者に分かるようにネタをすべてださないと回答は難しいですよ

[退会済みユーザー]

retrieve: true

https://jsfiddle.net/asahina/qtdcuua4/12/

[退会済みユーザー]

てことで質問者のそのページのJSのソースを全部ださんとエスパー以外わからん

[niship]

asahina様
ご丁寧に有難うございます。
やはり、エラーは消えません。

[unz.hori]

んー、抽象的な意見はどうでもいいから明確にどうしたのかとか現状のjsとかを貼ってくれとasahina1979さんも言ってるんですけどね。ここまで検証してくれる回答者は稀有ですよ。

[niship]

追記していますが、その他に不足情報はございますでしょうか。

[unz.hori]

んーと、貼ったのは全量ですかね？

[m.ts10806]

htmlも
<!DOCTYPE~~</html>も含めて全て貼るべきではと思います。

[niship]

ソースコードが10000文字を超えているため、全文を貼ることができません。
申し訳有りません。

[unz.hori]

GitHubとかフリーなストレージとかに置いて共有するとかできないですかね？

[退会済みユーザー]

５年以上前の遺物の 1.9.2 か・・・ 情報が出てこない気がするな
1.10 で大幅に更新されているから 技術情報に互換性がないんだよね。。。

[niship]

バージョンが低かったのですね。
charismaのテンプレートは使わずに公式から拾って、作り直してみます。
ご丁寧にお調べ頂きまして、有難うございました。

Answer 2

参考URL

$("#result-table").dataTable({
  "lengthMenu": [ 10, 20, 30, 40, 50 ],

みたいに記述してもだめですか？

Comments

[niship]

ご回答有難うございます。
同じエラーが出ます。

[unz.hori]

asahina1979さんの回答を見てくださいね