adminLTE3を触っていたらDataTablesを使っているようで、いろいろ調べてみたらとても便利だったのでまとめてみた

DataTables

PC

スマホ

書き方

CDN

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/dt-1.10.18/r-2.2.2/datatables.min.css"/>

<script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.10.18/r-2.2.2/datatables.min.js"></script>

呼び出し

$(document).ready( function () {
    $('#myTable').DataTable();
} );

<table id="myTable" class="table table-bordered table-striped dt-responsive nowrap" role="grid" aria-describedby="example2_info" style="width:100%">
  <thead>
      <tr role="row">
         <th class="sorting_asc">名前</th>
         <th class="sorting_asc">年齢</th>
          <th class="sorting_asc">身長</th>
          <th class="sorting_asc">誕生日</th>
       </tr>
       </thead>
       <tbody>
　　　　　......

オプション

class	効果
table-bordered	線を表示
table-striped	背景色を交互
dt-responsive	レスポンシブ
nowrap	折り返し禁止

レスポンシブ対応

レスポンシブのオプションを入れることでスマホサイズの時に適切なカラム数に調整した上で、落ちたカラムはアコーディオンでみれるようにしてくれる。

dt-responsive が大事みたい