DataTableを使ってbootstrapで書いたtableを並び替え可能にする

以下より、利用したいbootstrapのバージョンを指定してCDNのリンクを取得

www.datatables.net

headに取得したリンクを設置

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/bs/dt-1.10.20/datatables.min.css"/>
 
<script type="text/javascript" src="https://cdn.datatables.net/v/bs/dt-1.10.20/datatables.min.js"></script>

利用したいtableにIDをつける

<table id="table_id" class="table">
    <thead>
        <tr>
            <th>Column 1</th>
            <th>Column 2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Row 1 Data 1</td>
            <td>Row 1 Data 2</td>
        </tr>
        <tr>
            <td>Row 2 Data 1</td>
            <td>Row 2 Data 2</td>
        </tr>
    </tbody>
</table>

つけたIDでDataTable()をcall

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

以上