118 lines
5.0 KiB
HTML
118 lines
5.0 KiB
HTML
<!doctype html>
|
|
<html lang="en" xmlns:th="http://www.thymeleaf.org">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
|
<title>资源库-Quinn</title>
|
|
<link rel="stylesheet" th:href="@{/bootstrap/css/bootstrap.min.css}">
|
|
<link rel="stylesheet" th:href="@{/css/download.css}">
|
|
|
|
</head>
|
|
<body>
|
|
|
|
<div th:replace="~{common/header::header(activeUrl='source')}"></div>
|
|
|
|
<main role="main" class="mt-3">
|
|
<div class="container">
|
|
<form action="javascript:navChange(0);" method="post">
|
|
<div class="form-row align-items-center">
|
|
<div class="col-auto">
|
|
<label class="sr-only" for="name">KEYWORD</label>
|
|
<div class="input-group mb-2">
|
|
<div class="input-group-prepend">
|
|
<div class="input-group-text">关键字</div>
|
|
</div>
|
|
<input type="text" class="form-control" id="name" name="name" placeholder="请输入关键字"/>
|
|
</div>
|
|
</div>
|
|
<div class="col-auto">
|
|
<label class="sr-only" for="category">SOURCE-TYPE</label>
|
|
<div class="input-group mb-2">
|
|
<div class="input-group-prepend">
|
|
<div class="input-group-text">类别</div>
|
|
</div>
|
|
<select id="category" name="category" class="form-control custom-select">
|
|
<option th:value=-1 th:text="请选择"></option>
|
|
<option th:each="category:${categoryList}" th:value="${category.getId()}" th:text="${category.getCategory()}"></option>
|
|
</select>
|
|
</div>
|
|
|
|
</div>
|
|
<div class="col-auto ml-auto">
|
|
<button type="submit" class="btn btn-primary mb-2">查询</button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<div class="container" th:fragment="s_table_refresh" th:id="id_s_table_refresh">
|
|
<table class="table">
|
|
<thead class="thead-light">
|
|
<tr>
|
|
<th scope="col">#</th>
|
|
<th scope="col">资源名</th>
|
|
<th scope="col">资源简介</th>
|
|
<th scope="col">资源类型</th>
|
|
<th scope="col">去下载</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr th:each="source:${sourceList}">
|
|
<td th:text="${source.getId()}"></td>
|
|
<td th:text="${source.getSourceName()}"></td>
|
|
<td th:text="${source.getDetail()}"></td>
|
|
<td th:text="${source.getCategoryName()}"></td>
|
|
<td th:name="${source.getId()}">
|
|
<a style="color: white" th:href="@{'/source/view/'+${source.getId()}}" class="btn btn-sm btn-primary">详情</a>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
<nav aria-label="Page navigation example">
|
|
<ul class="pagination justify-content-center">
|
|
<li th:class="${pageParam.hasPrevious()==true?'page-item':'page-item disabled'}">
|
|
<a class="page-link" href="javascript:navChange(-1);" tabindex="">Previous</a>
|
|
</li>
|
|
<li class="page-item" th:if="${pageParam.hasPrevious()}">
|
|
<a class="page-link" href="javascript:navChange(-1);" th:text="${pageParam.getCurrent()-1}"></a>
|
|
</li>
|
|
<li class="page-item active">
|
|
<a id = "current" class="page-link" href="javascript:navChange(0);" th:text="${pageParam.getCurrent()}"></a>
|
|
</li>
|
|
<li class="page-item" th:if="${pageParam.hasNext()}">
|
|
<a class="page-link" href="javascript:navChange(1);" th:text="${pageParam.getCurrent()+1}"></a>
|
|
</li>
|
|
<li th:class="${pageParam.hasNext()==true?'page-item':'page-item disabled'}">
|
|
<a class="page-link" href="javascript:navChange(1);">Next</a>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
</div>
|
|
</main>
|
|
|
|
<div th:replace="~{common/footer::footer}"></div>
|
|
|
|
<a class="to-top">返回顶部</a>
|
|
<script th:src="@{/js/jquery-3.5.1.min.js}"></script>
|
|
<script th:src="@{/bootstrap/js/bootstrap.bundle.min.js}"></script>
|
|
<script th:src="@{/js/toTop.js}"></script>
|
|
<script th:src="@{/js/jquery-ui.min.js}"></script>
|
|
<script th:src="@{/live/js/addlive2d.js}"></script>
|
|
<script type="text/javascript">
|
|
function navChange(page){
|
|
var name = $('#name').attr("value");
|
|
var category = $('#category').val();
|
|
var current = $('#current').text();
|
|
var pageNum = parseInt(current) + page;
|
|
$.ajax({
|
|
url: "/source/page",
|
|
type: "post",
|
|
data: {"name": name, "category": category, "pageNum": pageNum, "limit": 10},
|
|
success: function (data) {
|
|
$('#id_s_table_refresh').html(data);
|
|
}
|
|
});
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|