JQuery DataTables

 

程式碼

html

<table id="myTable" class="display">
    <thead>
        <tr>
            <th>欄位 1</th>
            <th>欄位 2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>測試資料123</td>
            <td>測試資料abc</td>
        </tr>
        <tr>
            <td>測試資料564</td>
            <td>測試資料def</td>
        </tr>
    </tbody>
</table>

css

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.12.1/css/jquery.dataTables.css">

js

script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.12.1/js/jquery.dataTables.js"></script>

使用datatable

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

結果

tags: JQuery

相關連結

DataTables | Table plug-in for jQuery