jquery DataTables进阶（一）HelloWorld

最新推荐文章于 2021-07-07 16:26:35 发布

编程周记

最新推荐文章于 2021-07-07 16:26:35 发布

阅读量161

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/x18094/article/details/89929112

版权

前端专栏收录该内容

32 篇文章 0 订阅

订阅专栏

官方下载jquery datatable

需要引入的文件：

jquery.dataTables.min.js
jquery.dataTables.min.css
jquery1.8.3.js

一、静态Html

<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<%@ include file="common/jsp/common.jsp"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css"
	href="${home}jquery/css/jquery.dataTables.min.css" />
<script type="text/javascript" src="${home}jquery/jquery1.8.3.js"></script>
<script type="text/javascript"
	src="${home}jquery/js/jquery.dataTables.min.js"></script>
<title>life</title>
</head>
<body>
		<p>jquery datatable</p>
		<!-- 表格区域 -->
		<div class="table-responsive" style="border: 1px solid #ccc;">
			<table id="example" class="display" style="width: 100%">
				<thead>
					<tr>
						<th>Name</th>
						<th>Position</th>
						<th>Office</th>
						<th>Age</th>
						<th>Start date</th>
						<th>Salary</th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td>Olivia Liang</td>
						<td>Support Engineer</td>
						<td>Singapore</td>
						<td>64</td>
						<td>2011/02/03</td>
						<td>$234,500</td>
					</tr>
					<tr>
						<td>Donna Snider</td>
						<td>Customer Support</td>
						<td>New York</td>
						<td>27</td>
						<td>2011/01/25</td>
						<td>$112,000</td>
					</tr>
				</tbody>
			</table>
		</div>
</body>

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

效果：

二、使用ajax

html：

<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<%@ include file="common/jsp/common.jsp"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css"
	href="${home}jquery/css/jquery.dataTables.min.css" />
<script type="text/javascript" src="${home}jquery/jquery1.8.3.js"></script>
<script type="text/javascript"
	src="${home}jquery/js/jquery.dataTables.min.js"></script>
<title>life</title>
</head>
<body>
	<p>jquery datatable</p>
	<!-- 表格区域 -->
	<div class="table-responsive" style="border: 1px solid #ccc;">
		<table id="example" class="display" style="width: 100%">
			<thead>
				<tr>
					<th>Name</th>
					<th>Position</th>
					<th>Office</th>
					<th>Extn.</th>
					<th>Start date</th>
					<th>Salary</th>
				</tr>
			</thead>
		</table>
	</div>
</body>

<script type="text/javascript">
	$(document).ready(function() {
		var table = $('#example').DataTable({
			"ajax" : "arrays.txt",
			"columnDefs" : [ {
				"targets" : -1,
				"data" : null,
				"defaultContent" : "<button>Click!</button>"
			} ]
		});
	});
</script>
</html>

根目录下arrays.txt：

{
  "data": [
    [
      "Tiger Nixon",
      "System Architect",
      "Edinburgh",
      "5421",
      "2011/04/25",
      "$320,800"
    ],[
      "Garrett Winters",
      "Accountant",
      "Tokyo",
      "8422",
      "2011/07/25",
      "$170,750"
    ]
  ]
}

效果：

编程周记

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery DataTables进阶（一）HelloWorld

官方下载jquery datatable需要引入的文件：jquery.dataTables.min.jsjquery.dataTables.min.cssjquery1.8.3.js一、静态Html<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%...
复制链接

扫一扫