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

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

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

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

Q&A

解決済

1回答

6731閲覧

jQuery Datatablesの検索フォームで区切り文字として全角スペースを使えるようにしたい

tuckQ

総合スコア64

jQuery

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

0グッド

1クリップ

投稿2017/05/04 12:52

###前提・実現したいこと

  • jQuery Datatablesの検索フォームで区切り文字として全角スペースを使えるようにしたい
  • 対処法として全角スペースを半角スペースに置換する処理を組み込む

###該当のソースコード

javascript

1 $(document).ready(function() { 2 $('#example').dataTable( { 3 "language": { 4 "url": "https://cdn.datatables.net/plug-ins/1.10.15/i18n/Japanese.json", 5 }, 6 autoWidth: false, //step 1 7 columnDefs: [ 8 { width: '80px', targets: 0 }, //step 2, column 1 out of 4 9 { width: '300px', targets: 1 }, //step 2, column 2 out of 4 10 { width: '200px', targets: 2 }, //step 2, column 3 out of 4 11 { width: '70px', targets: 3 }, //step 2, column 3 out of 4 12 { width: '70px', targets: 4 }, //step 2, column 3 out of 4 13 { width: '70px', targets: 5 } //step 2, column 3 out of 4 14 15 ] 16 } ); 17 } ); 18 19 var oTable =$('#example').dataTable(); 20 21$('.dataTables_filter input').bind('keyup', function () { 22 // 全角スペースを半角スペースに置換して検索する。 23 oTable.fnFilter($(this).val().replace(/\u00A0|\u3000/g, " ")); 24});

###発生している問題・エラーメッセージ

DataTables warning: table id=example - Cannot reinitialise DataTable. For more information about this error, please see http://datatables.net/tn/3

###試したこと
Datatablesのヘルプを見て初期化処理を一本化しないといけないことは分かった。しかし、2つの処理をどう合体して記述すればよいかが分かりません。

###補足情報(言語/FW/ツール等のバージョンなど)
下記サイトの情報を参考にしました。
jQuery dataTablesの検索フォームで区切り文字として全角スペースを使えるようにする

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

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

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

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

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

guest

回答1

0

ベストアンサー

検索ボックスへの bind()$(document).ready() の中で行えば良いのでは?

今のコードでは var oTable = $('#example').dataTable(); の部分が $(document).ready() を待たずに実行されるため、先にオプションなしで DataTables が初期化されてしまい、その後で $(document).ready() 内の本来やりたい初期化処理の部分が呼び出され、「二度も初期化するな」と怒られているように見えます。

一度初期化をした後であれば、引数無しの $('#example').dataTable() 呼び出しは初期化済みの DataTables 操作オブジェクトを取得できるため、今のコードをそのまま $(document).ready() の中に入れてしまっても動作するとは思います。が、もっと単純に、引数付き初期化処理の結果を変数で受け取って使えば分かりやすいのではないでしょうか。

※ちなみに、インデントをきちんと揃えてコードを書くようにすると、上記のような「同じ処理の中」とか「外」とかが分かりやすくなりますよ ;)

投稿2017/05/04 16:55

argparse

総合スコア1017

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

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

tuckQ

2017/05/05 05:12

アドバイスありがとうございます。下記のように$(document).ready() の中に処理をまとめたところエラーが出なくなりました!ただ、今度は、全角スペース→区切り文字(半角スペース)の置換が効かない問題が発生しております。JavaScriptのエラーも出てないので、原因がわからない状況です、、。※コードのインデントしておらず見づらくてすみません、実施したところ自分でも構造が分かりやすくなりました。 ''' $(document).ready(function() { $('#example').dataTable({ "language": { "url": "https://cdn.datatables.net/plug-ins/1.10.15/i18n/Japanese.json", }, autoWidth: false, columnDefs: [{ width: '80px', targets: 0 }, { width: '300px', targets: 1 }, { width: '200px', targets: 2 }, { width: '70px', targets: 3 }, { width: '70px', targets: 4 }, { width: '70px', targets: 5 }] }); var oTable = $('#example').dataTable(); $('.dataTables_filter input').bind('keyup', function() { // 全角スペースを半角スペースに置換して検索する。 oTable.fnFilter($(this).val().replace(/\u00A0|\u3000/g, " ")); }); }); '''
tuckQ

2017/05/05 11:05 編集

keyupの動作確認のため下記のスクリプトを設置しましたが、アラート表示がされないので、うまく処理があたってないことが原因でしょうか? $('.dataTables_filter input').bind('keyup', function() { alert( "keyupの動作確認テスト" ); });
argparse

2017/05/05 09:10

`alert()` さえ表示されないのであれば、イベントがきちんと `bind()` できていないのでしょうね。 実際にどのような HTML に対して動作させているのかは分かりませんが、 jQuery はセレクタに一致する要素が見つからなくても特にエラーにはなりませんので、クラス名などが適切かどうかを確認すると良いかもしれません。
tuckQ

2017/05/05 11:46

いろいろ試行錯誤しているのですが、JavaScript初心者のため苦戦しております。何度も質問してしまい恐縮なのですが、今の状態のサンプルをjsfiddleで作成しましたので、もし可能であれば見ていただけないでしょうか?よろしくお願いいたします。 https://jsfiddle.net/tuckQ/boc64xcs/3/
argparse

2017/05/05 12:59

おや、すみません、抑々の認識に誤りがあったようです。 DataTables とは別にご自身で用意された `<input>` 要素への `bind()` であれば、ご呈示のコードで動作すると思うのですが、今回は「DataTables が標準で用意している検索ボックスの処理を変更したい」のですね。失礼致しました。 その場合、動かない理由は 2 つあります。 1. DataTables 自身の初期化完了を待たないと、まだ対象の `<input>` 要素が生成されていないため、 `bind()` が上手くいかない 2. DataTables が標準で用意しているイベントハンドラがすでに存在するため、後から `bind()` しても「両方のイベントハンドラが呼ばれてよくわからないことになる」だけで、「もともとのイベントハンドラを上書きできる」わけではない ではどう対処するかですが、概ね以下のどちらかの方法を取ることになるのではないでしょうか。 a. DataTables を `{searching: false}` で初期化し、標準の検索ボックスを生成させない。その代わりに、自分で検索用の `<input>` を別途用意する。 b. DataTables の初期化を待ち、 DataTables 自身が `bind()` したイベントハンドラを除去する。そのあとで、自分のイベントハンドラを `bind()` する。 恐らく一番分かりやすく簡単なのは a ですが、望ましい動作は b でしょうね。 b をどう実現するかというと、まず DataTables の初期化を待たなければなりません。これには、以下のドキュメントにある通り "initComplete" という初期化オプションを使うのがよさそうです。ここに関数を渡してやると、 DataTables の初期化後に呼び出してもらえます。 https://datatables.net/reference/option/initComplete これで 1 の問題は解決できますので、あとは 2 の問題です。こちらは、 jQuery で `bind()` したイベントハンドラであれば `unbind()` で簡単に除去できますから、自前のイベントハンドラを `bind()` する前に呼び出すと良いでしょう。 https://api.jquery.com/unbind/ まとめると以下のようになります。 https://jsfiddle.net/vc8Lx9mj/ ※ちなみに `bind()` や `unbind()` はすでに非推奨となり、 `on()` や `off()` を代わりに使うことが推奨されておりますので、余裕があれば調べてみてください
tuckQ

2017/05/06 04:19

再度手ほどきいただきありがとうございます。自力では到底解明できていなかったです。処理の流れや動作の仕組みなど大枠は理解することができました。bind()の仕組みなど基礎的な知識が不足しているので、勉強して理解深めようと思います。詳細に解説いただきありがとうございました!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問