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

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

ただいまの
回答率

88.91%

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

解決済

回答 1

投稿

  • 評価
  • クリップ 1
  • VIEW 3,906

tuckQ

score 64

前提・実現したいこと

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

該当のソースコード

    $(document).ready(function() {
        $('#example').dataTable( {
            "language": {
                "url": "https://cdn.datatables.net/plug-ins/1.10.15/i18n/Japanese.json",
            },
             autoWidth: false, //step 1
   columnDefs: [
      { width: '80px', targets: 0 }, //step 2, column 1 out of 4
      { width: '300px', targets: 1 }, //step 2, column 2 out of 4
      { width: '200px', targets: 2 },  //step 2, column 3 out of 4
      { width: '70px', targets: 3 },  //step 2, column 3 out of 4
      { width: '70px', targets: 4 },  //step 2, column 3 out of 4
      { width: '70px', targets: 5 }  //step 2, column 3 out of 4

   ]        
        } );
    } );

  var oTable =$('#example').dataTable();

$('.dataTables_filter input').bind('keyup', function () {
   // 全角スペースを半角スペースに置換して検索する。
   oTable.fnFilter($(this).val().replace(/\u00A0|\u3000/g, " "));
});   

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

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の検索フォームで区切り文字として全角スペースを使えるようにする

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

0

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

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

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/05/05 20:46

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

    キャンセル

  • 2017/05/05 21: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()` を代わりに使うことが推奨されておりますので、余裕があれば調べてみてください

    キャンセル

  • 2017/05/06 13:19

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

    キャンセル

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

  • ただいまの回答率 88.91%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る