datatables 的 'copy', 'excel', 'pdf', 'csv', 'print' 的实现和基本选中

最新推荐文章于 2023-10-25 15:11:40 发布

YKenan

最新推荐文章于 2023-10-25 15:11:40 发布

阅读量645

点赞数 1

分类专栏：前端文章标签： bootstrap html jsp

本文链接：https://blog.csdn.net/YKenan/article/details/88749569

版权

前端专栏收录该内容

34 篇文章 0 订阅

订阅专栏

datatables 的 'copy', 'excel', 'pdf', 'csv', 'print' 的实现和基本选中

- 1. 导入相应的包
- 2. html 代码

1. 导入相应的包

https://download.csdn.net/download/ykenan/11540889

2. html 代码

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!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">
		<meta name="keywords" content="maven-list, list" />
		<title>maven-list</title>
		<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
		<link rel="stylesheet" type="text/css" href="css/dataTable.min.css" />
		<link rel="stylesheet" type="text/css" href="css/jquery.dataTables.min.css" />
		<link rel="stylesheet" type="text/css" href="css/buttons.bootstrap.min.css" />
		<link rel="stylesheet" type="text/css" href="css/dataTables.bootstrap4.min.css" />
		<link rel="stylesheet" type="text/css" href="font-awesome/css/font-awesome.min.css" />
		<link rel="stylesheet" type="text/css" href="css/buttons.css" />
		<link rel="stylesheet" type="text/css" href="css/style.css" />
	</head>

	<body>

		<br />
		<br />
		<div class="container">
			<form id="add">
				<label for="age">
				<div class="input-group mb-3">
					<div class="input-group-prepend">
						<span class="input-group-text">年龄</span>
					</div>
					<input type="text" id="age" name="age" class="form-control"
						placeholder="请输入年龄" />
				</div>
			</label> <label for="hoppy">
				<div class="input-group mb-3">
					<div class="input-group-prepend">
						<span class="input-group-text">爱好</span>
					</div>
					<input type="text" id="hoppy" name="hoppy" class="form-control"
						placeholder="请输入爱好" />
				</div>
			</label>
				<button type="button" onclick="form_post_add()" class="myButton">添加</button>
			</form>
			<form id="delect">
				<label for="id">
				<div class="input-group mb-3">
					<div class="input-group-prepend">
						<span class="input-group-text">ID</span>
					</div>
					<input type="text" id="id" name="id" class="form-control"
						placeholder="请输入ID" />
				</div>
			</label>
				<button type="button" onclick="form_get_delect()" class="myButton">删除</button>
			</form>
			<form id="DELECT_method">
				<input hidden="hidden" type="text" name="_method" value="DELECT" />
			</form>
		</div>

		<div class="container">
			<table class="table datatable display table-bordered table-hover" id="myTable">
				<thead>
					<tr>
						<th>yId</th>
						<th>yAge</th>
						<th>yHoppy</th>
						<th>操作</th>
					</tr>
				</thead>
				<tbody>
					<c:forEach items="${yKenanList}" var="YKenan">
						<tr>
							<td>${YKenan.yId}</td>
							<td>${YKenan.yAge}</td>
							<td>${YKenan.yHoppy}</td>
							<td>
								<a href="javascript:void(0)" onclick="form_post_delect('${YKenan.yId}')">删除</a>
								<a href="update/${YKenan.yId}">修改</a>
							</td>
						</tr>
					</c:forEach>
				</tbody>
			</table>
		</div>
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
		<script type="text/javascript" src="js/bootstrap.min.js"></script>
		<script type="text/javascript" src="js/dataTables.buttons.min.js"></script>
		<script type="text/javascript" src="js/jquery.dataTables.min.js"></script>
		<script type="text/javascript" src="js/dataTables.min.js"></script>
		<script type="text/javascript" src="js/dataTables.bootstrap4.min.js"></script>
		<script type="text/javascript" src="js/jszip.min.js"></script>
		<script type="text/javascript" src="js/pdfmake.min.js"></script>
		<script type="text/javascript" src="js/vfs_fonts.js"></script>
		<script type="text/javascript" src="js/buttons.flash.min.js"></script>
		<script type="text/javascript" src="js/buttons.print.min.js"></script>
		<script type="text/javascript" src="js/buttons.html5.min.js"></script>
		<script type="text/javascript" src="js/style.js"></script>
		<script type="text/javascript" src="js/example.js"></script>

		<script type="text/javascript">
			$(document).ready(function() {
				var table = $('#myTable').DataTable({
					dom: 'Bfrtip',
					buttons: ['copy', 'excel', 'pdf', 'csv', 'print']
				});
				//给行绑定选中事件
				$('#myTable tbody').on('click', 'tr', function() {
					if($(this).hasClass('selected')) {
						$(this).removeClass('selected');
					} else {
						table.$('tr.selected').removeClass('selected');
						$(this).addClass('selected');
					}
				});
			});
		</script>

	</body>

</html>

YKenan

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
datatables 的 'copy', 'excel', 'pdf', 'csv', 'print' 的实现和基本选中

bootstrap 的 ‘copy’, ‘excel’, ‘pdf’, ‘csv’, ‘print’ 的实现和基本选中此文件会随着时间不断更新<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%><%@ taglib prefix="c" uri...
复制链接

扫一扫