質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

2回答

5148閲覧

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

niship

総合スコア37

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2018/02/14 13:28

編集2022/01/12 10:55

お世話になります。
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のテーブルテンプレートを使用しています。
不足情報等ございましたら、ご指摘下さいませ。
何卒 宜しくお願い致します。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2018/02/14 14:18

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

2018/02/14 15:19

URLは表示されていませんでした。
退会済みユーザー

退会済みユーザー

2018/02/14 23:10

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

2018/02/15 01:20

ひとまず調べて参考にしたサイトを追記してもらえますか?回答のヒントになりえます。
退会済みユーザー

退会済みユーザー

2018/02/15 02:08

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

回答2

0

Cannot reinitialise DataTable

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

追記

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

github.com - jquery.dataTables.1.9.2.js

投稿2018/02/14 14:25

編集2018/02/15 01:48
退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

unz.hori

2018/02/14 14:49

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

2018/02/14 15:03

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

2018/02/14 15:22

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

2018/02/14 15:26

そのことが分かっているとはどういうことでしょう?
退会済みユーザー

退会済みユーザー

2018/02/14 15:35

提示された範囲だけでは問題ないので誰も回答はできないです。 再構築時は以下のような処理になります。 $table = $("#result-table").DataTable(); $table .destroy(); // 再構築するまえに除去する $table = $("#result-table").DataTable();
unz.hori

2018/02/14 15:43

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

退会済みユーザー

2018/02/14 15:45

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

2018/02/14 15:45

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

2018/02/14 15:48

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

2018/02/14 15:50

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

2018/02/14 16:15

んーと、貼ったのは全量ですかね?
m.ts10806

2018/02/15 00:46

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

2018/02/15 01:21 編集

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

2018/02/15 01:35 編集

GitHubとかフリーなストレージとかに置いて共有するとかできないですかね?
退会済みユーザー

退会済みユーザー

2018/02/15 02:11

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

2018/02/15 02:43

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

0

参考URL

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

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

投稿2018/02/14 14:08

unz.hori

総合スコア1057

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

niship

2018/02/14 15:19

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

2018/02/14 15:22

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問