日本語対応jQuery DataTablesのfixedColumnsを使って、Excelのウィンドウ枠風(Freeze Panes)の表を作る

シェアする

  • このエントリーをはてなブックマークに追加

JavaScriptで表を作るならjQueryのDataTablesがとにかく便利です。

これを使うようになってからまともに、th,tr,tdなどを使って表を作らなくなりました。

 

datatables

 

スポンサードリンク

jQuery DataTablesとは

DataTablesは表を作るためのjQueryのライブラリです。

公式サイトは英語で書かれていますが、DataTablesそのものは日本語にも対応しています。

また様々なオプション、プラグインのライブラリが用意されています。

 

DataTablesの公式サイトは、https://datatables.net/ で、使い方が書かれています。

 

DataTablesの使い方がどれだけ簡単で便利かというと、

CSSとして、https://cdn.datatables.net/1.10.11/css/jquery.dataTables.min.css

JSとして、https://cdn.datatables.net/1.10.11/js/jquery.dataTables.min.js

を取り込むだけで、以下のコードだけで表が作れてしまいます。

 

 

 

DataTablesはSpryMedia Ltd.に著作権がありますが、MITライセンスなので商用でも使用可能です。

https://datatables.net/license/mit

 

DataTables | MIT license

DataTables is available under the MIT license. In short, this means that you are free to use DataTables as you wish, including modifying and redistributing the code, as long as the original copyright notice is retained.

MIT license

Copyright (C) 2008-2016, SpryMedia Ltd.

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

 

jQuery DataTablesにはプラグインが多数あるので、やりたいことは大抵のことはできると思います。

 

スポンサードリンク

Excelのウィンドウ枠の固定風の表

今回、Excelのウィンドウ枠の固定風の表を作ってみます。

使うプラグインは、fixedColumns.jsです。

 

HTMLコードは次の通りです。

 

 

JavaScriptコードは次の通りです。

 

 

CSSは次の通りです。

 

 

このコードを実行すると、左側の2列が固定されて、3列目以降の列はX方向にスクロールできるようになります。

 

JSFiddleにまとめてみました。

JSFiddle

 

JSFiddleはリアルタイムですぐに実行できるので便利です。

 

スポンサードリンク

まとめ

JavaScriptで表を作るなら、jQuery DataTablesを使いましょう。

プラグインも多数あって便利です。

 

最後まで読んでいただきありがとうござました。
この記事が気に入っていただけたらシェアしてくれると嬉しいです。

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です