Admin LTE で DataTable を使用する

管理画面テンプレートの Admin LTE で DataTable を使用する方法です。 サンプルは以下にあります。 - https://adminlte.io/themes/AdminLTE/pages/tables/data.html ## 環境 - Visual Studio 2017 - ASP.NET Core 2.0 - Admin LTE 2.4.2 Admin LTE は Visual Studio 上から Bower でインストールしました。 CSS や JavaScript ファイルへのパスは環境によって異なると思うので、適切なパスに変更してください。 ## 準備 ### CSS ```html <link rel="stylesheet" href="~/lib/datatables.net-bs/css/dataTables.bootstrap.min.css" />``` ### JavaScript 以下の２つのファイルを読み込みます。 ```html <script src="~/lib/datatables.net/js/jquery.dataTables.min.js"></script><script src="~/lib/datatables.net-bs/js/dataTables.bootstrap.min.js"></script>``` そして、以下のコードでテーブルの初期化を行います。 ```html <script> $(function () { $("#example").DataTable(); }); </script>```` ## テーブルの作成 ```html <table id="example" class="table table-hover table-condensed"> <thead> <tr> <th>Column1</th> <th>Column2</th> </tr> </thead> <tbody> <tr> <td>Data1</td> <td>Data2</td> </tr> </tbody></table>``` 注意事項としては、`thead` と `tbody` を書かないと上手く表示されませんでした。 ## 参考 URL - https://github.com/almasaeed2010/AdminLTE/issues/817 - https://qiita.com/nissuk/items/7ac59af5de427c0585c5 - https://www.moongift.jp/2014/03/adminlte-%E3%81%93%E3%81%93%E3%81%BE%E3%81%A7%E5%A4%9A%E3%81%91%E3%82%8C%E3%81%B0%E4%BD%95%E3%81%A7%E3%82%82%E3%81%A7%E3%81%8D%E3%81%9D%E3%81%86%E3%80%82%E5%A4%9A%E6%A9%9F%E8%83%BD%E3%81%AAbootstrap/ - http://ngiriraj.com/pages/tables/data.html