業務用のツール開発にも利用出来そうなjQueryのプラグイン
出社前に、Incsearch.jsというライブラリのソースを読んでいますCommentsAdd Starで書いたけど、日々お会いしてきた人の管理用のツールを開発しているのですが、社内の基幹システムからデータ抽出した結果は単純な表形式にする方向ではいるのですが、「日々お会いしてきた人」というのをもう少し厳密に定義すると
1. 過去1ヶ月にお会いした人全員
2. 過去1ヶ月を超えていたとしても、その求職者の人が仕事条件を変更した人
という感じで1.は概算で40名前後(1日2名程度会うので、20営業日あるしてこの程度)2.については20名前後(繁忙期だともうちょっと増えるかな?)なので少なくとも60名分の情報を画面表示させるとなると、ものすごく縦長な画面イメージになるのでそれは正直使い勝手悪すぎ。。
なので、1画面あたり5名くらいを表示させて、表示しきれない分については、「次のページへ」という機能を盛り込んだり、新規案件受注した場合に過去お会いした人の中で簡単にマッチングさせるように絞り込みで検索できるようなフィルタリング処理っぽいのも実装したいと思っていた所、jQueryのプラグインでDataTablesというのを見つけたので試したら、自分のやりたいことが比較的実現しやそうなので、これ使ってプロトタイプ作成中
ちなみに、このDataTablesの使い方は結構簡単でライブラリを読み込んだ後に
<script type="text/javascript" charset="utf-8"> $(document).ready(function() { $('#example').dataTable({ "sPaginationType": "full_numbers" }) } );
という記述をしておき
<table style="width: 800px;" class="display" id="example" border="0" cellpadding="0" cellspacing="0"> <thead> <tr> <th class="sorting_asc" style="width: 224px;" width="20%">レンダリングエンジn</th> <th class="sorting" style="width: 105px;" width="25%">ブラウザ</th> <th class="sorting" style="width: 142px;" width="25%">プラットフォーム</th> <th class="sorting" style="width: 189px;" width="15%">バージョン</th> <th class="sorting" style="width: 128px;" width="15%">グレード</th> </tr> </thead> <tbody> <tr> <td>Gecko</td> <td>Firefox</td> <td>ウィンドウズ</td> <td>1.7</td> <td>A</td> </tr> <tr> <td>Gecko</td> <td>Firefox</td> <td>マック</td> <td>1.7</td> <td>A</td> </tr> </table>
というようなテーブルを準備すれば、こんな感じで画面表示されます。
当然絞り込みの検索もこんな感じで↓できる(日本語も通ります!)
業務系システムってこういう表形式でデータ見せることはあると思うのですが、基本的な機能はしっかり実装されていて日本語もしっかり使えるからこういうjQueryのプラグインって使い勝手良いんですね