こんにちは。
結局作る事になる。
只野です。
世の中便利になりましたね。最近はちょっと検索すれば便利な“jQuery”プラグインが沢山出てきます。作ろうとしている開発にマッチすれば爆速で開発が終了したりしますね。ありがたや。ありがたや。
だがしかし
ベストマッチするのは本当にワンポイントな事が多いのも事実です。カレンダーやドロップダウンボックスの拡張なりと一部分だけ利用できるなんて事が多いです。仕事だとお客様が欲しいものを作るのが第一ですからね。便利なプラグインがないからって、
これしかできません。
とはプロ（自称）として言えないのです。そうなったら作るしかねーです。プラグインを探しているとあと一歩！でベストみたいな時も多いので悔しくもあります←
私の場合だと大体あと一歩で欲しいやつだとなるのは、“table系”のプラグインです。table系のプラグインも便利な物が多いですよね。jQueryで一回呼び出せばソートやページャなどつけてくれる物もあったりと素晴らしいです。だけどスタイルがいじれなかったり、結合セルが含まれるtableだと使えなかったりとあと一歩が足りない時があります。無料で公開してくれてんだわがまま言うなってのはわかっています。
だから自分で作る事にしたのです。
jQueryでtable拡張プラグインを作る
まず私が欲しいなと思うプラグインを下記の内容となります。
・tableのスタイルは自由に設定可能、プラグイン設定時にtableのcssクラスは操作しない。
・結合セルを含んでいても利用可能
・総件数などtable情報を自動で表示
・ページャ機能を自動で表示
・ソート機能を利用可能
・tableタグのid毎にプラグインの利用が可能
はい。結構むずいです。そもそもjQueryのプラグインどうやってつくんだってばよ！って話ですよ。調べました。
(function($) {
/**
* プラグイン本体
*/
$.fn.pluginName = function(options) {
var $element = this;
/**
* オプション設定
*/
var settings = $.extend({
//オプション名とデフォルト値を設定
option1: [],
option2: 10,
}, options );
//お好きな処理をどうぞ
return $element;
}
}( jQuery ));
基本こんな感じっぽい。まずはjQueryが利用できる環境が大前提です。それから上記記載をすればプラグインを追加できるそうです。「$.fn.任意のプラグイン名」が肝です。「fn」ってプロパティ配下にプラグインを設定できる口でもあるのでしょう。詳しくはgoogle先生に聞いてください←
後はjQuery系でよくある引数に設定方法に対応させるために、「$.extend」を利用し引数の受け取り口を設定します。これをやる事で上記プラグインの場合
$('id1').pluginName({
option1:[1,2,3],
option2:1
});
こういった呼び出し方ができるようになります。
これで準備は整いました。あとは少ない脳みそをフル回転させつつgoogle先生の力を借りれば…
プラグイン適用サンプル
| ヘッダ１ | ヘッダ２ | ヘッダ３ | ヘッダ４ | ヘッダ５ | ヘッダ６ |
|---|---|---|---|---|---|
| 1 | 2 | 3 | 結合 | 未結合 | |
| 2 | 3 | 4 | 結合 | 未結合 | |
| 3 | 4 | 5 | 結合 | 未結合 | |
| 4 | 5 | 6 | 結合 | 未結合 | |
| 5 | 6 | 7 | 結合 | 未結合 | |
| 6 | 7 | 8 | 未結合 | 結合 | |
| 7 | 8 | 9 | 未結合 | 結合 | |
| 8 | 9 | 10 | 未結合 | 結合 | |
| 9 | 10 | 11 | 未結合 | 結合 | |
| 10 | 11 | 12 | 未結合 | 結合 | |
| 11 | 12 | 13 | 結合 | 未結合 | |
| 12 | 13 | 14 | 結合 | 未結合 | |
| 13 | 14 | 15 | 結合 | 未結合 | |
| 14 | 16 | 17 | 結合 | 未結合 | |
| 15 | 16 | 17 | 結合 | 未結合 | |
| 16 | 17 | 18 | 未結合 | 結合 | |
| 17 | 18 | 19 | 未結合 | 結合 | |
| 18 | 19 | 20 | 未結合 | 結合 | |
| 19 | 20 | 21 | 未結合 | 結合 | |
| 20 | 21 | 22 | 未結合 | 結合 | |
| 21 | 22 | 23 | 結合 | 未結合 | |
| 22 | 23 | 24 | 結合 | 未結合 | |
| 23 | 24 | 25 | 結合 | 未結合 | |
| 24 | 25 | 26 | 結合 | 未結合 | |
| 25 | 26 | 27 | 結合 | 未結合 | |
| 26 | 27 | 28 | 未結合 | 結合 | |
| 27 | 28 | 29 | 未結合 | 結合 | |
| 30 | 31 | 32 | 未結合 | 結合 | |
| 31 | 32 | 33 | 未結合 | 結合 | |
| 32 | 33 | 34 | 未結合 | 結合 | |
| 33 | 34 | 35 | 未結合 | 結合 | |
できました。中々いい感じです。上記テーブルは作成したjQueryプラグインを適用している状態です。プラグインを適用していないテーブル状態は下記の状態となります。
| ヘッダ１ | ヘッダ２ | ヘッダ３ | ヘッダ４ | ヘッダ５ | ヘッダ６ |
|---|---|---|---|---|---|
| 1 | 2 | 3 | 結合 | 未結合 | |
| 2 | 3 | 4 | 結合 | 未結合 | |
| 3 | 4 | 5 | 結合 | 未結合 | |
| 4 | 5 | 6 | 結合 | 未結合 | |
| 5 | 6 | 7 | 結合 | 未結合 | |
テーブルの明細は多少減らしていますが、元はただのテーブルです。これに作成したjQueryプラグインを適用するとサンプルの状態になります。適用方法は下記jQueryを記載するだけです。
$(function(){
$('#rows').tadanoTable();
});
初期処理で適用します。プラグイン名は「tadanoTable」、我ながら完璧なネーミングセンスです←
適用できるテーブルはヘッダ部分を<thead><tr><th>で作成し明細部分を<tbody><tr><td>で作成してある事が条件です。一般的なテーブルの作り方をしていれば問題なく適用できます。
はい。基本はタグに対してプラグインを実行するだけです。ただテーブル系だと明細数とかページャー個数とか設定したい時が多々ありますね。そこでオプションを作成して柔軟に対応できるようにしています。
オプション
| 名称 | 概要 |
|---|---|
| sortObject | ソート対象ヘッダを設定{Array} ※ヘッダ列を左から順に設定 1=有効 0=無効 デフォルト=全て無効 |
| pageDisplayedResults | 明細表示件数を設定{Number} デフォルト=10 |
| pageNumber | ページャー番号表示個数を設定{Number} デフォルト=5 |
| pageTotalText | ページ情報（合計テキスト）を設定{Text} デフォルト=合計件数： |
| pageCountText | ページ情報（件数テキスト）を設定{Text} デフォルト=件 |
| pageUnitText | ページ情報（ページ表示テキスト）を設定{Text} デフォルト=ページ |
| pageBeforeText | ページャー（前ページ移動テキスト）を設定{Text} デフォルト=前へ |
| pageNextText | ページ情報（次ページ移動テキスト）を設定{Text} デフォルト=次へ |
各オプションを設定する場合はこのように記載します。
ソート対象
$('#rows').tadanoTable({
sortObject:[1,1,0,0,0],
pageDisplayedResults:10,
pageNumber:5,
});
ソート対象は最終対象以降は省略可能です。
後は合計やソート状態など見た目を変更したい時のためにcssクラス名を設定してあります。下記クラス名でスタイル設定を行えばスタイルの変更が行えます。
CSSクラス
| 名称 | 適用個所 |
|---|---|
| page-info | テーブル上に自動設定しているページ情報 |
| page-order | ソート対象ヘッダに自動設定しているソート表示状態 |
| page-area | テーブル下に自動設定しているページャ表示エリア |
| page-before | ページャー前へボタン |
| page-next | ページャー次へボタン |
| page-top | ページャー先頭位置移動ボタン |
| page-end | ページャー終了位置移動ボタン |
| page-number | ページャー番号ボタン |
デフォルトの状態は何もスタイル設定していないので、好きにスタイルを適用できます。因みにサンプルで表示しているテーブルには下記スタイルを適用しています。
a[class*="page-"],.page-order {
padding: 0.25em 0.25em 0.25em 0.25em;
position: relative;
display: inline-block;
text-decoration: none;
color: #FFFFFF;
background: #808080;
border-radius: 4px;
box-shadow: inset 0 2px 0 rgba(255,255,255,0.2), 0 2px 2px rgba(0, 0, 0, 0.19);
font-weight: bold;
text-align: center;
}
a[class*="page-"]{
margin:0.5em 0.25em 0.5em 0.25em;
}
.page-order {
width:20px;
margin:0 0.5em 0 0.5em;
}
a[class*="page-"]:active,.page-order:active {
box-shadow: 0 0 2px rgba(0, 0, 0, 0.30);
color:#FFAD90;
}
ワードプレスのスタイルの問題か一部marginとpaddingが効いていないんですけどね。そもそもcssミスってるかもしれませんけどね←
はい。このように自身で好きなスタイルを適用できるようにしています。やりたい事は大体できましたが、まだ対応したいところは残っています。
ダウンロードリンク
まだバグもあるでしょうが、開発途中の物で良ければ下記からダウンロードできますので、好きにご利用ください。
当プラグイン（只野テーブル）を利用して発生した問題については一切責任を負いませんので、あらかじめご了承ください。
動作環境：jQueryが実行可能（今のバージョンだと3.3.1）
プラグイン仕様：
・テーブルにページ情報、ソート機能、ページャ機能を追加
・適用可能なテーブルはヘッダを<thead><tr><th>で作成、明細部分を<tbody><tr><td>で作成
・ソート可能個所はtd内にテキストが設定されている。
・ソートは文字列比較（数値比較は未対応）
・td内にタグ（inputなど）での値設定、列結合個所は現在ソート対象外
・行結合が含まれるテーブルはプラグイン動作対象外
・スクロールを含むテーブルはプラグイン動作対象外
今後の課題は今対象外にしている仕様の解消ですかね。まだまだやる事は沢山です。jQueryをもっと勉強ですね。バージョンアップできたら随時更新していきます。
本日はこの辺で
