javascriptTweetWebサービスを構築する際に、通常のサービスとは別に管理画面が必要になる場合があります。管理画面は利用者が限られていますので、派手でインタラクティブである必要はありません。使いやすく見やすい管理画面は、本サービスとは違うベクトルで作るのが大変です。時間がない場合、管理画面に必要な機能がパッケージされたライブラリを使うという選択肢があります。色々なライブラリがありますが、最近私が使用したのはAdminLTEです。adminlte.ioAdminLTEのメリットは別の機会で触れるとして、AdminLTEでは、テーブル操作をするためにDataTablesを使用しています。datatables.netこのライブラリは、テーブル操作に必要なソートや検索がデフォルトでついています。WebAPIとの非同期通信にも対応している使い勝手の良いライブラリです。デフォルトでも十分ですが機能拡張も出来ます。今回は、DataTablesを拡張して独自の検索をできるようにする方法について触れます。日付毎に集計されたデータがあるとします。集計されたデータから、日付の範囲を指定して検索できるようにします。CodePen.日付の指定は直接入力ではなく、カレンダーのポップアップから選択できるようにします。使用するライブラリDatablesはjQueryのライブラリですので下記は必ず使用します。DataTablesjQuery任意で必要なライブラリ上記の他に使用するライブラリは下記です。使用する必要はありませんので、要件に合わせて変えてください。4:簡単にテーブルの見た目を綺麗にするまた、DataTablesはbootstrap用のライブラリを公開しています。bootstrapのバージョンによって読み込むファイルも変わりますので合わせて選択してください。cdn.datatables.net基本的な実装部分まずは、DataTableでテーブルを構築します。tableタグに対してDataTableを実行するようにすれば次のようなテーブルが作られます。</table></div>javascriptテーブル用のタグにDataTableを実行します。})})今回は日本語に対応させますので、languageオプションに日本語用のファイルを使うようにしています。独自の検索をフィールドを追加する次に日付検索用のフィールドを追加します。DataTablesが用意しているフィールドとは別になりますので、わかりやすい場所にタグを追加します。次に、期間の検索処理とカレンダーから年月日を選択できる機能を追加します。独自の検索は、jQueryのライブラリを拡張する事で実装できます。独自のルールを実装する場合は、$.fn.dataTable.ext.search.pushで検索用の関数を追加します。検索フィールドの要素を取得して、momentの形式に置き換えます。日付を取得して、momentの形式に置き換えます。最初の列の要素なので、0を指定します。日付を比較して条件に合えばtrueを返します。trueを返す事で検索結果に表示出来ます。false;})追加された関数は、テーブルの行毎に実行されます。引数のdataに列毎のデータが入っていますので、列番号を指定して該当のデータを取得する事で比較ができます。Pickerを実装し、検索フィールドをクリックするとカレンダーのポップアップが出るようにします。このライブラリは時間の検索も出来ますが、今回は日付のみです。オプションのsingleDatePickerを有効にします。DataTableの要素読み込み完了後に実行されます。Pickerのカレンダーを追加します。空欄を許可する場合はautoUpdateInputをFalseにします。カレンダーから日付を選んだ時に実行されます。カレンダーが閉じた場合に実行します。})})DataTablesとの連携は、draw()で行います。実行する事で、テーブルを再描画して検索結果を反映します。範囲指定のみ行いたい場合は、デフォルトでついている自由検索窓が不要です。そのため、検索窓から除外します。レイアウトを変える場合は、sDomオプションで指定します。legacy.datatables.netページングや表示件数等の要素を独自のdivで内包する事が出来ます。他のタグは使えませんので、独自のタグを挿入したい場合はjsでDomを操作するなどの方法で行います。自由検索だけ省いた状態で出力するには次のような指定をします。要件によっては、前回の検索ワードや設定をそのまま残しておきたい場合があります。DataTablesでは入力値の保存機能は実装されています。保持機能を有効にするDataTablesのstateSaveオプションを有効にする事で入力値を保持できるようになります。自由検索や表示件数のようなデフォルト機能の設定は、stateSaveを有効にするだけで対応できます。true,独自設定を保持する今回追加したような独自の検索フィールドは対象ではありません。独自の検索結果の場合はDataTablesを拡張して保持できるようにします。入力値を保持する保持時のコールバック関数にfnStateSaveParamsが用意されています。この関数を使う事で、保持時に処理を追加することができます。datatables.netコールバックの関数では、引数に保持用の変数をつける事ができます。その引数は配列なので、任意のキーと値を挿入する事で一緒に保持します。今回は、inputタグに付与したname属性をキーにします。}前のセッションで保持した値を初期値に代入するブラウザを更新した時、前項で保持した値をフィールドの初期値に代入します。DataTablesで入力された値を呼び出す時のコールバック関数にfnStateLoadParamsが用意されています。legacy.datatables.net(fnStateLoadParamsの項を参照してください。)前項でname属性をキーにして保存したため、キーと入力フィールド名を照合してvalue属性に代入します。}参考flynsarmy.com以上です。デフォルトでも十分使えるライブラリですが、案件の目的に合わせてカスタマイズする事が出来ます。管理画面だけでなく、いろいろの用途でも使えますので是非ご検討ください。前回に引き続きLaravelのMigrateについてです。incor...laravelでmigrate機能はとても便利です。ライブラリ全般に言え...2018-04-08【Redmine】Backlogの「完了理由」フィールドを再現する案件によって、BacklogとRedmineを使い分けています。WebSandBagスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。