准备:先去官方网站下载插件包,datatable需要jQuery,所以还要提前下载jQuery插件。
-
引入文件:
<link rel="stylesheet" type="text/css" href="datatables.css">
<script type="text/javascript" language="javascript" src="jquery-1.12.4"></script>
<script type="text/javascript" language="javascript" src="datatables.js"></script>
-
javascript代码:
<script type="text/javascript" class="init">
$(document).ready(function() {
$('#example').DataTable( {
"scrollY": "300px",
"scrollCollapse": true,
"paging": false
} );
} );
</script>
-
table部分代码:
<table id="example" class="display">
<thead>
<tr>
<th>学号</th>
<th>姓名</th>
<th>班级</th>
<th>科目</th>
<th>分数</th>
<th>排名</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>小明</td>
<td>三年级一班</td>
<td>数学</td>
<td>90</td>
<td>9</td>
</tr>
......
-
5
效果如图所示
-