<?xml version="1.0" encoding="utf-8" standalone="yes"?><rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:media="http://search.yahoo.com/mrss/"><channel><title>Jquery on notes</title><link>https://unionsep.dev/tags/jquery/</link><description>Recent content in Jquery on notes</description><generator>Hugo -- 0.161.1</generator><language>en</language><lastBuildDate>Mon, 27 Feb 2017 19:01:07 +0900</lastBuildDate><atom:link href="https://unionsep.dev/tags/jquery/index.xml" rel="self" type="application/rss+xml"/><item><title>jQuery.DataTablesで完全一致検索</title><link>https://unionsep.dev/posts/2017/02/27/190107/</link><pubDate>Mon, 27 Feb 2017 19:01:07 +0900</pubDate><author>unionsep</author><guid>https://unionsep.dev/posts/2017/02/27/190107/</guid><description>&amp;lt;no value&amp;gt;</description><content type="text/html" mode="escaped"><![CDATA[<p>はまった〜</p>
<p>知らなかったけど、とっても便利なjQueryのプラグインがあって、むしろ便利過ぎて使い所迷っちゃうなって感じ<br>
ページング実装するだけで使ってもいいじゃない<br>
2年前ぐらいの記事が多かったから、わりと前から流行ってたみたいなんで、使い方については先人様に任せます</p>
<a href="https://datatables.net/" target="_blank" rel="noopener noreferrer">DataTables - The Javascript Table Solution</a>

<p>で、これ、インクリメンタルサーチっぽい動きがデフォルトで、とってもかっちょいいんですが、使い所によっては完全一致させたいとかあるのかも<br>
キーワードを入れてサブミットさせて、テーブルに並べるデータをHTML生成時に絞ってやるって方法が真っ先に頭に浮かんだんす<br>
実装で迷ったのは、JSでスイスイ検索できるのに、完全一致させるためだけにサーバサイドに頼るってのもかっちょ悪いなと<br>
なんか知らないけど、 <code>DataTable()</code> で指定するパラメタにちょちょいって書いてやれば、すぐできんじゃない？って思ってました</p>
<p>そんなの速攻できるっしょってたかをくくってたんですが、わりとそうでもなくて1日かかっちゃいました<br>
まぁ、ドキュメントは英語だし、このプラグインで完全一致させたいなんて思うやつはあんまりいなかったのかなぁ<br>
で、 <code>jquery.dataTables.js</code> の中身を読む旅に出発</p>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-js" data-lang="js"><span style="display:flex;"><span><span style="color:#a6e22e">$</span>(<span style="color:#e6db74">&#39;#example&#39;</span>).<span style="color:#a6e22e">DataTable</span>(
</span></span><span style="display:flex;"><span>  <span style="color:#e6db74">&#34;oSearch&#34;</span><span style="color:#f92672">:</span> {<span style="color:#e6db74">&#34;bSmart&#34;</span><span style="color:#f92672">:</span> <span style="color:#66d9ef">false</span>}
</span></span><span style="display:flex;"><span>)
</span></span></code></pre></div><a href="https://datatables.net/docs/DataTables/1.9.0/DataTable.defaults.oSearch.html#bSmart" target="_blank" rel="noopener noreferrer">https://datatables.net/docs/DataTables/1.9.0/DataTable.defaults.oSearch.html#bSmart</a>

<p>まずこれでスマートなフィルタリングを使わないに設定</p>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-js" data-lang="js"><span style="display:flex;"><span><span style="color:#a6e22e">$</span>(<span style="color:#e6db74">&#39;#example&#39;</span>)
</span></span><span style="display:flex;"><span>  .<span style="color:#a6e22e">DataTable</span>()
</span></span><span style="display:flex;"><span>  .<span style="color:#a6e22e">search</span>(<span style="color:#e6db74">&#34;^&#34;</span> <span style="color:#f92672">+</span> <span style="color:#a6e22e">$</span>(<span style="color:#e6db74">&#39;#text_area&#39;</span>).<span style="color:#a6e22e">val</span>() <span style="color:#f92672">+</span> <span style="color:#e6db74">&#34;$&#34;</span>, <span style="color:#66d9ef">true</span>, <span style="color:#66d9ef">false</span>, <span style="color:#66d9ef">true</span>)
</span></span><span style="display:flex;"><span>  .<span style="color:#a6e22e">draw</span>();
</span></span></code></pre></div><p>つぎにこれで正規表現を使って1語検索をするのが正解みたい<br>
結局stack overflowを参考にさせていただきました</p>
<aside class="cite-card">
    <div class="cite-card__image cite-card__image--fallback" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor"
      stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-image">
      <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
      <circle cx="8.5" cy="8.5" r="1.5"></circle>
      <polyline points="21 15 16 10 5 21"></polyline>
   </svg></div>

  <a href="http://stackoverflow.com/questions/8609577/jquery-datatables-filter-column-by-exact-match" target="_blank" rel="noopener noreferrer">
    <div class="cite-card__title">http://stackoverflow.com/questions/8609577/jquery-datatables-filter-column-by-exact-match</div>

    <div class="cite-card__site">stackoverflow.com</div>
  </a>
</aside>

<p>ここにも書いてましたけど、stack overflowのが僕にとってやさしかったです</p>
<a href="https://code.google.com/archive/p/jquery-datatables-column-filter/issues/137" target="_blank" rel="noopener noreferrer">Google Code Archive - Long-term storage for Google Code Project Hosting.</a>

<p>いいじゃんいいじゃんって嬉しがってたら、また一難<br>
テキストエリアにキーワードを入れて、次に消していって、最後まで消したら、最後の検索が残ってる(´・ω・`)</p>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-js" data-lang="js"><span style="display:flex;"><span><span style="color:#66d9ef">if</span> (<span style="color:#e6db74">&#39;&#39;</span> <span style="color:#f92672">!=</span> <span style="color:#a6e22e">$</span>(<span style="color:#e6db74">&#39;#text_area&#39;</span>).<span style="color:#a6e22e">val</span>()) {
</span></span><span style="display:flex;"><span>  <span style="color:#a6e22e">$</span>(<span style="color:#e6db74">&#39;#example&#39;</span>)
</span></span><span style="display:flex;"><span>    .<span style="color:#a6e22e">DataTable</span>()
</span></span><span style="display:flex;"><span>    .<span style="color:#a6e22e">search</span>(<span style="color:#e6db74">&#34;^&#34;</span> <span style="color:#f92672">+</span> <span style="color:#a6e22e">$</span>(<span style="color:#e6db74">&#39;#text_area&#39;</span>).<span style="color:#a6e22e">val</span>() <span style="color:#f92672">+</span> <span style="color:#e6db74">&#34;$&#34;</span>, <span style="color:#66d9ef">true</span>, <span style="color:#66d9ef">false</span>, <span style="color:#66d9ef">true</span>)
</span></span><span style="display:flex;"><span>    .<span style="color:#a6e22e">draw</span>();
</span></span><span style="display:flex;"><span>} <span style="color:#66d9ef">else</span> {
</span></span><span style="display:flex;"><span>  <span style="color:#a6e22e">$</span>(<span style="color:#e6db74">&#39;#example&#39;</span>)
</span></span><span style="display:flex;"><span>    .<span style="color:#a6e22e">DataTable</span>()
</span></span><span style="display:flex;"><span>    .<span style="color:#a6e22e">search</span>(<span style="color:#e6db74">&#39;&#39;</span>)
</span></span><span style="display:flex;"><span>    .<span style="color:#a6e22e">draw</span>();
</span></span><span style="display:flex;"><span>}
</span></span></code></pre></div><p>テキスト内にキーワードが入ってないときは空で <code>draw()</code> したら、とりあえずは期待通りの動きをしてくれた〜<br>
<code>clear()</code> とか <code>destroy()</code> 使ったら、デフォルトで設定したパラメタも初期化されてしまってどうしていいかわからなかったｗ<br>
<code>oSearch</code> とか <code>aoColumnDefs</code> とかで設定できるのかなと思ったんだけど、ここまでにたどり着くまで半日かかってるので燃料が切れて一旦終了。。</p>
<p>なんでこの記事を書こうと思ったかというと、DataTablesは調べれば調べるほど高機能なプラグインだなーって思ったんですけど、便利過ぎて完全一致なんてパラメタですぐっしょって思ってしまったから<br>
だから、多分、次同じことをしようとした時、まーた性懲りもなくすぐっしょて思いそうだったから。。<br>
これだけスイスイ検索できることがウリ？なのに、完全一致検索は違うんじゃない？って今になって思います(´・ω・`)</p>
<p>ブログを書く訓練として、思いついたことを書くのを最近心がけてますが、結構ネタはあるみたい<br>
ただ、やっぱまだ書くのに時間がかかってて、もっと精進せねばと思う感じです〜</p>
]]></content></item></channel></rss>