使用Ajax加载数据的dataTables

最新推荐文章于 2023-03-06 22:30:00 发布

dahlwuyn

最新推荐文章于 2023-03-06 22:30:00 发布

阅读量3.6w

点赞数 1

分类专栏：编程语言文章标签： jquery dataTables

本文链接：https://blog.csdn.net/dahlwuyn/article/details/48196973

版权

本文介绍如何利用Ajax和dataTables库提高前端表格数据加载效率。以jQuery v1.11.3和DataTables 1.10.9为例，详细阐述了设置过程，包括下载库、构建HTML表格结构，以及在服务端使用Java Servlet配合fastjson生成并返回JSON数据。

摘要由CSDN通过智能技术生成

dataTables是一种很好用前端表格显示库。当加载大量数据时，可以用Ajax 获取数据来提高效率，增速网页加载速率。下面以一个例子作示范。

首先，需要下载jquery以及dataTables库。这里使用的是版本是jQuery v1.11.3和DataTables 1.10.9。下载网址：http://datatables.net/。

先上网页的代码。要注意的是，table中的thead和tbody必须要有。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<head>
 <link href="http://www.zhuhaihengxin.com/libs/datatables/1.10.0/css/jquery.dataTables.css" rel="stylesheet">
<title>dataTable example</title> 
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.dataTables.js"></script>
<script type="text/javascript">

	$(document).ready(function() {
		$("#datatable").dataTable({
			"processing" : true,
			"serverSide" : true,
			"paginationType":"full_numbers",
			"ajax" : "load",
			"columns" : [ 
			    {"data" : "id"},
			    {"data" : "firstName"},
			    {"data" : "lastName"}
			    ]
		});
	});
</script>
<style>
h2{
text-align:center;
}
div {
	float: left;
	margin: 10px;
	padding: 4px;
}
a{
margin:5px;
}
table,tr,td,th{
border:2px solid #3aec7b;
border-collapse:collapse;
}

</style>
</head>
	<body>
	
		<TABLE id="datatable">
			<THEAD>
				<tr>
					<th>ID</th>
					<th>First Name</th>