对Jquery DataTables的学习（一）

今天无聊就回顾下之前在第一家实习公司学的东西----Datatables

我用的是1.10.10版本的datatables

下载地址：http://pan.baidu.com/s/1boXYZM3

让我们先来看看效果图

这是个最简单的datatables  什么都没有  直接调用datatables这个组件

我是用hbuilder来编写的

看看我的目录的结构，只是简单的用用

废话不多说，让我们来看看index.html中的代码吧

一、引用datatables包中的css样式和封装好的js代码

	<!--样式文件-->
		<link rel="stylesheet" type="text/css" href="DataTables-1.10.10/css/jquery.dataTables.min.css">
		<!--jquery js-->
		<script src="DataTables-1.10.10/js/jquery.js"></script>
		<!--DataTables 核心 js-->
		<script src="DataTables-1.10.10/js/jquery.dataTables.min.js"></script>

二、用datatables组件

	<table id="students" class="display">
			<thead>
				<tr>
					<th>Id</th>
					<th>Name</th>
					<th>Sex</th>
					<th>Old</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>001</td>
					<td>张三</td>
					<td>男</td>
					<td>16</td>
				</tr>

				<tr>
					<td>002</td>
					<td>小吴</td>
					<td>男</td>
					<td>16</td>
				</tr>
				<tr>
					<td>003</td>
					<td>小徐</td>
					<td>男</td>
					<td>20</td>
				</tr>
				<tr>
					<td>004</td>
					<td>小三</td>
					<td>女</td>
					<td>16</td>
				</tr>
				<tr>
					<td>005</td>
					<td>小李</td>
					<td>男</td>
					<td>26</td>
				</tr>
				<tr>
					<td>006</td>
					<td>小刘</td>
					<td>女</td>
					<td>32</td>
				</tr>
				<tr>
					<td>007</td>
					<td>小王</td>
					<td>男</td>
					<td>21</td>
				</tr>
				<tr>
					<td>008</td>
					<td>张三</td>
					<td>男</td>
					<td>23</td>
				</tr>

			</tbody>
		</table>

三、在JavaScript中调用datatables

<script>
			$(function() {
				$('#students').DataTable();
			});
		</script>