Q&A
エラーメッセージにURLが付与されてたはずだけど
お世話になります。
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のテーブルテンプレートを使用しています。
不足情報等ございましたら、ご指摘下さいませ。
何卒 宜しくお願い致します。
URLは表示されていませんでした。
とりあえず、datatables のバージョンを書いてください、エラーメッセジにURLがでないことを含め色々とおかしいです
ひとまず調べて参考にしたサイトを追記してもらえますか？回答のヒントになりえます。
http://www.kotazi.com/blog/post/20151229_datatables/
こちらを参考にして、destroyなどをtrueにしましたが、効果はありませんでした。
とりあえずそのページは 1.10.x 向けであって 1.9.x 向けではないな
回答2件
0
Cannot reinitialise DataTable
データテーブルを再初期化できません。
てことだから 同じテーブルですでにデータテーブルを構築してるだけでしょ
追記
$("#selector").DataTable({ destroy : true }); → 1.9 系では未実装
$("#selector").DataTable({ retrieve: true }); → 1.9 系では未実装
投稿2018/02/14 14:25
編集2018/02/15 01:48退会済みユーザー
総合スコア0
確かにエラーメッセージを見るとそうですね。
https://jsfiddle.net/qtdcuua4/2/
提示されてる場所だけ設定すれば正常動作ですから
おお、検証しているとは。さすがです！
調べた結果、そのことはわかっていますが、
destroy: trueや、retrieve: trueも効果がありませんでした。
そのことが分かっているとはどういうことでしょう？
提示された範囲だけでは問題ないので誰も回答はできないです。
再構築時は以下のような処理になります。
$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/
珍しくasahina1979さんが激レスしてるw
質問する側は回答者に分かるようにネタをすべてださないと回答は難しいですよ
retrieve: true
https://jsfiddle.net/asahina/qtdcuua4/12/
てことで質問者のそのページのJSのソースを全部ださんとエスパー以外わからん
asahina様
ご丁寧に有難うございます。
やはり、エラーは消えません。
んー、抽象的な意見はどうでもいいから明確にどうしたのかとか現状のjsとかを貼ってくれとasahina1979さんも言ってるんですけどね。ここまで検証してくれる回答者は稀有ですよ。
追記していますが、その他に不足情報はございますでしょうか。
んーと、貼ったのは全量ですかね？
htmlも
<!DOCTYPE~~</html>も含めて全て貼るべきではと思います。
ソースコードが10000文字を超えているため、全文を貼ることができません。
申し訳有りません。
GitHubとかフリーなストレージとかに置いて共有するとかできないですかね？
５年以上前の遺物の 1.9.2 か・・・ 情報が出てこない気がするな
1.10 で大幅に更新されているから 技術情報に互換性がないんだよね。。。
バージョンが低かったのですね。
charismaのテンプレートは使わずに公式から拾って、作り直してみます。
ご丁寧にお調べ頂きまして、有難うございました。
あなたの回答
tips
プレビュー
