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

<link rel="stylesheet" href="~/lib/datatables.net-bs/css/dataTables.bootstrap.min.css" />

JavaScript

以下の２つのファイルを読み込みます。

<script src="~/lib/datatables.net/js/jquery.dataTables.min.js"></script>
<script src="~/lib/datatables.net-bs/js/dataTables.bootstrap.min.js"></script>

そして、以下のコードでテーブルの初期化を行います。

<script>
    $(function () {
        $("#example").DataTable();
    });
</script>

テーブルの作成

<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