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

プログラミング
スポンサーリンク

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

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

 

今回、日本語対応jQuery DataTablesのfixedColumnsを使って、Excelのウィンドウ枠風(Freeze Panes)の表を作ってみました。

 

 

スポンサーリンク

jQuery DataTablesとは

 

 

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

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

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

 

DataTablesの公式サイトは、

DataTables | Javascript table library

で、使い方が書かれています。

 

 

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ライセンスなので商用でも使用可能です。

 

DataTables | MIT license

 

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を使いましょう。

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

 

 

プログラミングの無料レッスン体験

 

約8,000名の受講生と80社以上の導入実績のあるプログラミングやWebデザインのオンラインマンツーマンレッスンCodecamp

<Codecampの特徴>

1 現役エンジニアによる指導

2オンラインでのマンツーマン形式の講義

3大手企業にも導入されている実践的なカリキュラム

↓無料体験レッスン実施中です。

プログラミングのオンラインスクールCodeCamp

 

 

 

コメント