JQuery插件DataTables的使用

在你的项目中使用 DataTables，只需要引入三个文件即可，jQuery库，一个DT的核心js文件和一个DT的css文件， 完成以以下三步即可。

第一步：引入JS/CSS

<!-- 网络资源 --><!-- DataTables CSS --><link rel="stylesheet" type="text/css" href="http://cdn.datatables.net/1.10.15/css/jquery.dataTables.css"><!-- jQuery --><script type="text/javascript" charset="utf8" src="http://code.jquery.com/jquery-1.10.2.min.js"></script><!-- DataTables --><script type="text/javascript" charset="utf8" src="http://cdn.datatables.net/1.10.15/js/jquery.dataTables.js"></script>  <!-- 或者下载到本地：https://datatables.net/releases/DataTables-1.10.15.zip --><!-- DataTables CSS --><link rel="stylesheet" type="text/css" href="DataTables-1.10.15/media/css/jquery.dataTables.css"><!-- jQuery --><script type="text/javascript" charset="utf8" src="DataTables-1.10.15/media/js/jquery.js"></script><!-- DataTables --><script type="text/javascript" charset="utf8" src="DataTables-1.10.15/media/js/jquery.dataTables.js"></script>

第二步：添加如下 HTML 代码

<table id="table_id_example" class="display">    <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>

第三步：初始化Datatables

<script type="text/javascript">$(document).ready(function() {$('#table_id_example').DataTable();});</script>

效果：