Layui_数据表格简单介绍

最新推荐文章于 2024-06-21 07:58:59 发布

小张同学_java

最新推荐文章于 2024-06-21 07:58:59 发布

阅读量619

点赞数 1

文章标签： layui html5 html

本文链接：https://blog.csdn.net/weixin_49789131/article/details/120517845

版权

本文主要介绍了Layui的数据表格使用，包括前端和后端的实现细节。前端通过dataTable.jsp和dataTable.js实现无刷新的数据展示，后端涉及BookDao.java、BookAction.java以及XML配置。数据表格在数据展示和操作中起到关键作用。

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

前言：

数据表格的详细内容，大家请阅读官方文档，这里主要是简单介绍一下使用。之后会有一个简易的

网上书城项目介绍会使用到这些。

一、效果展示

二、前端实现

dataTable.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@include file="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">
<title>Insert title here</title>
<script src="${ pageContext.request.contextPath }/static/js/data.js"></script>
</head>
<body>
		<input id="ctx" type="text"
			value="${ pageContext.request.contextPath }" hidden />
		<!-- 书籍数据表格 -->
		<div class="layui-container" style="margin-top: 50px;margin-left: 400px;">
			<table id="demo" lay-filter="test"></table>
			<a class="layui-btn layui-btn-danger" onclick="dels()">批量删除</a> <a
				class="layui-btn layui-btn-primary" onclick="add()">增加</a>
		</div>

		<!-- ｔｏｏｌＢａｒ工具条 -->
		<script type="text/html" id="barDemo">
		<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
		<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
	</script>
</body>
<!-- 弹出层DOM元素 -->
<div id="upd" hidden>
	<form class="layui-form">
		<!-- 书籍ID -->
		<!-- <input id="bid" name="bid" type="text" hidden />  -->
		<!-- iframe层的索引 -->
		<input id="index" name="index" type="text" hidden />
		<!-- 是修改还是增加 -->
		<input id="is" name="cz" type="text" hidden />
		<div class="layui-form-item">
			<label class="layui-form-label">书籍ID</label>
			<div class="layui-input-block">
				<input id="bid" type="text" name="bid" required
					lay-verify="required" placeholder="请输入书籍ID" autocomplete="off"
					class="layui-input">
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">

最低0.47元/天解锁文章

小张同学_java

关注

1
点赞
踩
7

收藏

觉得还不错? 一键收藏
打赏
0
评论
Layui_数据表格简单介绍

前言：数据表格的详细内容，大家请阅读官方文档，这里主要是简单介绍一下使用。之后会有一个简易的网上书城项目介绍会使用到这些。目录一、效果展示二、前端实现dataTable.jspdataTable.js三、后端实现1、项目结构：2、Dao层BookDao.java3、Web层BookAction.java3、XML文件配置四、总结一、效果展示二、前端实现dataTable.jsp<%@ page language="jav
复制链接

扫一扫