jQuery.ajax csv絞り込み検索＆ページングの項目数を増やしたいです。

Question

jQuery.ajax csv絞り込み検索＆ページング（http://s-ej.com/sample/ajax/ajax0003/）をベースにイラストの図録を作っております。

使いやすく改変したく、ajax.js内の『配列生成』を直すべきだと思うのですが、どう書き直したらよいのかどうしてもわかりません。

●絞り込み要素を各10個の4項目にし、CSVファイルも必要ないところを削りたいのです。書き直しましたCSVファイルは下記になります。検索は元のまま”各絞り込み条件は、横軸に複数選択する場合はor検索であり、縦軸に複数選択する場合はand検索”にしたいと思っています。

（CSVファイル始まり）
名称日本語, Aカテゴリ, Bカテゴリ, Cカテゴリ, 画像パス, パス, ターゲット, 赤, 黄, 緑, 青, 紫, ピンク, 白, グレー, 茶, 黒,
イラスト01, Aカテゴリ01, Bカテゴリ01, Cカテゴリ01, img/001.png, detail/.html, _blank, 1, , , , 1, , , , , ,
イラスト02, Aカテゴリ02, Bカテゴリ02, Cカテゴリ02, img/002.png, detail/.html, _blank, , 1, , , , 1, , , , ,
イラスト03, Aカテゴリ03, Bカテゴリ03, Cカテゴリ03, img/003.png, detail/.html, _blank, , , , 1, , , 1, , , ,
イラスト04, Aカテゴリ04, Bカテゴリ04, Cカテゴリ04, img/004.png, detail/.html, _blank, , , 1, , , , , 1, , ,
イラスト05, Aカテゴリ05, Bカテゴリ05, Cカテゴリ05, img/005.png, detail/.html, _blank, 1, , , , , , , , 1, ,
イラスト06, Aカテゴリ06, Bカテゴリ06, Cカテゴリ06, img/006.png, detail/.html, _blank, , 1, , , , , , , , ,
イラスト07, Aカテゴリ07, Bカテゴリ07, Cカテゴリ07, img/007.png, detail/.html, _blank, , , , 1, , , , , , ,
イラスト08, Aカテゴリ08, Bカテゴリ08, Cカテゴリ08, img/008.png, detail/.html, _blank, , , 1, , , , , , , ,
イラスト09, Aカテゴリ09, Bカテゴリ09, Cカテゴリ09, img/009.png, detail/.html, _blank, 1, , , , , , , , , ,
イラスト10, Aカテゴリ10, Bカテゴリ10, Cカテゴリ10, img/010.png, detail/.html, _blank, 1, , , , , , , , , ,

（CSVファイル終わり）

イメージとしてはこのようにしたいと思っています。

どなたかご教授いただけないでしょうか。よろしくお願いいたします。

Answer 1

回答ではありませんが。
mimimax さんは、イラスト図録の元データとして、utf-8 な CSV が管理しやすいのですか。

---

追記

ajax.js を読んでみたのですが、これ、ajax を使うメリット別にないですよね。毎回全データの入った csv を丸ごとロードして、表示の調整はクライアントサイドでやっています。ということは、メモリサイズの問題かららしたら最初から全データをクライアント側の持たせて、サーバとの通信なしに表示切り替えすればいいだけです。もし ajax で非同期通信する必要があるとしたら、csv がごく頻繁に更新される場合ですが、それだとしたら csv の全データを通信するのもややおかしな話で、サーバ側に ajax 通信用の API を設けて、表示に必要な分だけをやりとりするのが自然です。
javascript や jQuery の勉強が目的ならもう少し読み込んでわからない部分の明確にして質問する方がよいと思いますし、イラスト図録を作るのが目的ならこの ajax.js はとりあえずおいといて、ご自身が要らすと図録を管理するときにどうやれば管理しやすいかを考えた方がよいのではないでしょうか。

Comments

[mimimax]

ご返答ありがとうございます。こちらかなりの初心者でありまして、的違いのことを申し上げていたらスミマセン。
最初は、isotope（http://isotope.metafizzy.co/）にて作っていたのですが、isotopeは絞り込み要素が1つで使いづらかったのです。本当は、isotopeのようにhtml内に画像をおき、クラス名による要素絞り込みが複数あれば、管理もしやすく理想です。私でも扱える複数ソート絞り込みのjQuely、テンプレートをかなり探したのですが、前出のものが一番近かったのでcsvというものを知りました。
こういったページを作るために、一番自然な形はどういうものでしょうか？それが叶うJQuely、もしくはこういう言葉で検索して勉強すればよいという方向性を教えていただけないでしょうか？本当に素人で申し訳ないのですが、ご教示お願いします。

[unau]

なるほど、経緯はわかりました。ちょっと、こんな感じのはどうかな、というプラグインをこれから書いてみます。あまり時間かけられないので適当にですが。

[mimimax]

ありがとうございます!
すみません！もう一度isotope（http://isotope.metafizzy.co/）を見てみたのですが、以前見た時から更新されていまして（ページを作るのに1年以上かけております）、新しい機能が追加されていました。もしかしたらこれで叶うことなのか、お書きいただく前に見ていただいてもよろしいでしょうか？今発見したばかりで、私が意味を理解するには一晩くらいかかりますので。
こちらになります（http://codepen.io/desandro/pen/JEojz）。
よろしくお願いいたします。

[mimimax]

すみません...新isotope（http://codepen.io/desandro/pen/JEojz）を組み込んでみたのですが、項目を増やすことができませんでした。やはりプラグインお願いできればと思います。よろしくおねがいします。

[unau]

あ、私がプラグインを作ってみるのは私の楽しみであって、mimimax さんがそのまま使うことはあまり意図していません。もちろん、使ってもらっても構わないですが、それよりご自身でプラグインを作るあしがかりになれば、程度に考えています。

[mimimax]

現在広い海でプカプカういているような状態なので、出てきた単語（スクリプト）などを参考させていただくだけでも十分です。お楽しみに収まる範囲で、お時間ある時にお願いします。

[unau]

画像データなしにそれっぽく見えるテストデータを用意したり、変に凝ったり、と余計なことをいろいろしていてちょと時間がかかっています。
まだ途中なんですが、次の場所にデモを置いてみました。
http://mato.me/ext/scantyLoggia/01/
もっと使いやすくして、ソート機能とかつけて、選択肢のリセットボタンとかつけて、と、もちっとましになったら github にあげようと思っています。
コードにコメントをつけたり、コードの解説したり、もできればやりたいですけど ... 時間があるかな。

[mimimax]

拝見しました! ありがとうございます!すごいです。私みたいに簡易的なデータベースを作りたいと思っているイラストレーターや趣味人はいっぱいいると思うのです。自分ではそういう例を最初にあげたajaxのものしか見つけられなかったので、喜ぶ人たくさんいると思います。個人的にはオプションでも、isotopeみたいに選択されたもののみ表示させることできたらありがたいです。
"コードにコメント"あるとうれしいです。私みたいな初心者はそれ頼りに勉強してます。お忙しい時期だと思いますので、お時間あるときにお楽しみの範囲でおねがいします。楽しみです。

[unau]

今後もちょくちょく手を入れていく予定なんですが、ご要望いただいたり、変更をお知らせしたりとか、どうすればいいのだろうな、と考えています。
とりあえず jsdo.it というのを初めて使ってみました。teratail じゃなくてそっちでディスカッションするのがいいんですかね。
http://jsdo.it/unau/cWJ3

デモだけ見るのは次の URL から。
http://jsrun.it/unau/cWJ3

そのうち github にはあげて、できたら npmjs にもあげようと思っています。

ちなみに、2 行書き換えるだけで「選択されたもののみ表示」にできるので (mato.me のほうじゃなく jsrun.it のほうは) そのように変更してみましたが、ごらんのとおり、アニメーションがかっこわるいのです。もう少し作り込まないと ...

[unau]

ディスカッションの場としては Qiita もいいかもしれません。github の wiki でもコメントはつけられそうですけど ...

[unau]

デモページの URL がコロコロ変わってすみません。次の場所に最新版を置きました。
http://mato.me/ext/alumshowcasedemo/

jsdo.it も悪くないと思うのですが、修正版を簡単にアップする方法がわからなくて更新が面倒くさいので、自分が管理している WEB サーバ (mato.me) に置きました。
ただこちらにはディスカッションの機能を作りこんでいないので ...。

[mimimax]

上記のサイト拝見しました!動きが加わるとやっぱり楽しいですね。

ごめんなさい、スクリプト系サイトは使ってみましたが、よく知らないのです。
プログラマーさん同士だときっとスクリプトの交換や書き込みだけだけで意図が伝わったりするのでしょうが、私レベルでは日本語で伝えるしかなく...。こちらのコメント交換に上限が無ければこちらでもよいのですが...。『ディスカッションの場としては Qiita』とお書きになってたので、よくわからないまま登録・公開しておきました。こちらがよいようであれば、ちょっと勉強します。日本語なので何とかなると思います。

できるだけ汎用性のある範囲で希望をお伝えしたいです。絶対、このコードが欲しかったという人多いと思うんです。完成したら、イラストの他にも蔵書や妖怪（好きなんです）のデータベースも作れるな〜と夢がふくらんでおります。本当にありがとうございます。職業をイラストレーター＆デザインをやっておりますので、なにかお手伝いできることありましたら言ってください。

追伸／ここ最近コードにはまってしまって（楽しくて）、仕事がたまってしまっており数日ご無沙汰するかもしれません。すみません。

[mimimax]

時間ができまして、ゆっくりデモページ拝見しました。やはり選択肢が3つあると、かなり細かく絞れますね。コードも拝見してみたのですが、そちらは難しくてわかりませんでした。

私が使用させていただく際は画像をいれたいと思っております。で、誠に勝手ながら、アニマルの画像を用意してみました。

http://28.gigafile.nu/d6a908d15e2fb01047b4e77be07f1ddc5-0408

アニマルの名前はデモのままで、形の欄は食べ物にしたらわかりやすいかなと思いまして...色味は背景の色を変えました。（animalという名前になっていたマスはpenguinで作りました。使用している素材は商用フリー素材と私が描いたものだけです。）

....『画像をいれてください』という催促のような文章になってしまいましてすみません。デモを作って頂いただけで感謝してますので、本当に催促ではないのです。またのぞかせて頂きますので、お時間ある時にお手を入れて頂けたらうれしいです。
では。

[unau]

返信遅れました。
ソート機能を実現したら github に挙げようと思っていて、そっちの突貫工事を優先しておりました。
で、github に上げました。
https://github.com/unau/jquery-alumshowcase

現在のバージョンのデモを、jsdo.it に置きました。ソート機能がついたものです。
http://jsrun.it/unau/cWJ3

mimimax さんの用意してくださった画像はわかりやすくてよいのですが、github にあげるものの中に入れるのも、jsdo.it に上げるにも、ライセンス的によくわからなかったので避けました。MIT License でよいものなら含めてしまえるのですが。

[mimimax]

とてもご返信が遅れて申し訳ありません！突然の転職等で全く勉強する時間が取れず、こちらも訪れておりませんでした。すみません。また、勉強できる環境になりましたので、少しずつサイト作りを進めて行こうと思います。上げて頂いた作品で勉強させて頂きます。ありがとうございました！

[unau]

当方もすっかり teratail 熱が冷めてずっとこちらを訪れておらず、いま、1 年ぶりにログインしました。jQuery ももう使う時代ではないな、と、まったく触らなくなってしまいました。個人的な利用ではまだ jQuery でもよいでしょうが、一般向けのサイトでの採用はどうかな ... と思っています。
それはそれとして、私の作ったものに関してなにか質問などありましたらどうぞ。

[mimimax]

ありがとうございます。webの世界は早いのですね。紙媒体のデザイナーなもので、少し目を離すと勉強途中だった技術が過去のものになっていて迷ってしまいます。ホームページ拝見しました。今年もベランダの家庭菜園で失敗したので、unauさんの農業＋プログラムはあこがれます。また、ご質問させていただきますので、teratailを覗いた時はよろしくおねがいします。（山東菜と有機野菜に興味があるので、農園HPにお邪魔するかもしれません。）

[mimimax]

追加ですみません。今ひとつご質問を出していますので、もしお時間あれば見て頂けるとうれしいです。また3日悩んでいます。