jqueryを利用した絞り込みの絞り込み

お世話になります。
先日に引き続き失礼いたします。

皆様は例えばDBからデータを引っ張ってきてtable形式で出力し（この際出力のロジック及び言語は不問）
その引っ張ってきたデータをさらにJQueryを利用して動的に絞り込むロジックを組む際は、
どの様なアルゴリズムの元実装しておりますか？

テーブル名の部分をセレクトボックスにして、それを選択した際にajaxにより
再度選択したデータをキーとしてDBからデータを検索して再出力すれば実現可能かと
考えておりますが、SQLを無駄に発行したくないという考えもあります。

ぜひ皆様のお話をお聞かせください。

行動規範の内容に同意します

回答3件

JavaScriptでの操作において、最も重いのがDOM操作です。

jQueryを利用して動的に絞り込むというよりは、
Ajax通信等で今アクセスできる全てのデータをどかんと落としてしまって、
JavaScriptのグローバル変数領域に配列として格納した方がパフォーマンスは良さそうです。
(JSONで渡すとテキストサイズが多くなりますが、gzipが効いてファイルサイズが半減しますので、下手な画像ファイルよりよほど軽いです)

実際にJavaScriptで配列からごねごね絞り込んだとしても、数万件程度なら一瞬だったりします。
ChromeのV8エンジンは伊達じゃなかった…因みにFirefoxやEdgeも負けない程チューニングされており、大概快適です。

もしtable要素を使って描画する際、
CSSプロパティのtable-layout: fixed;は必ず指定してください。

SQLを無駄に発行したくないという考えもあります

パフォーマンスとしては似たような質問がありましたので共有します。
https://teratail.com/questions/115302

実際にはSQLはインデックスさえ適切に張っておけば、
C++の本領発揮といった感じで数千や数万件のデータを一瞬で絞り込める強い味方です。
ただし、短時間で何度も通信を繰り返すようなら一度に全部のデータを落とさせる手法も検討してみてください。

投稿2018/03/12 13:39

miyabi-sun

総合スコア21158

x_x

2018/03/13 02:12

不思議に思ったのですが、C++というのはどこから来たのでしょうか？

miyabi-sun

2018/03/13 02:22

MySQLのコアエンジンがC++製という意味で使っていました。行き過ぎた推測で申し訳ないです。

行動規範の内容に同意します

私も他の回答者と同意見です。
DBは大量の検索トラフィックをさばけるような設計になっていますので、クライアントサイドでよほど複雑な後処理をしないのであれば都度クエリを投げるのが良いかと思います。
仮に都度DB検索させる仕様で性能不足を感じるようでしたら、テーブルまたはクエリ設計に問題があります。
その場合にはSQLパフォーマンス(実行計画)をEXPLAINというコマンドを使って確認し、必要に応じてインデックス設定などチューニングを施してください。

投稿2018/03/13 05:28