我正在用springboot建立客户数据库，其中包含所有crud操作、分页、排序和搜索功能。因为我是网络开发的新手，所以我关注了两个youtube教程。为了实现积垢操作的模态，我遵循以下步骤：
https://www.youtube.com/watch?t=1747&v=ligfe20dyq4&feature=youtu.be
为了实现分页和排序，我遵循以下步骤：
https://www.youtube.com/watch?v=aie8n12efqc
而且每个想法都太好了！但是。。。
实现排序后，我的情态动词停止工作。单击列的标题后，url将获得排序字段和排序顺序的参数，但modals将不起作用。当我在url中没有参数时，它就工作了。我将不能使用模态后排序和后来当我实现搜索。我相信情态动词是非常用户友好的，我真的想要他们。但我不知道如何处理这个问题，如果你能帮助我，我将非常高兴和感激。
这是customer\u list.html文件
<!DOCTYPE html>
<html xmlns:th = "http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>List of customers</title>
<meta name = "author" content="Miloš Savić">
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT" crossorigin="anonymous"></script>
<script type="text/javascript" src = "/webjars/jquery/2.2.3/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script type="text/javascript" th:src = "@{js/main.js}" src = "../static/js/main.js"></script>
</head>
<body>
<h1 align = "center">List of Customers</h1>
<div align = "center" class = "container-fluid" >
<br />
<!-- <a th:href = "@{/newcustomer}" class = "btn btn-primary btn-sm mb-3">Add Customer</a> -->
<button class = "btn btn-success" id = "nBtn">New Customer</button>
<br />
<br />
<br />
<table id = "customers" border = "1" class = "table table-striped table-responsive-xl">
<thead>
<tr>
<!-- <th>ID</th> -->
<th>
<a th:href = "@{'/page/' + ${currentPage} + '?sortField=paypalUsername&sortDirection=' + ${reverseSortDirection}}">
PayPal Username</a>
</th>
<th>
<a th:href = "@{'/page/' + ${currentPage} + '?sortField=paypalAddress&sortDirection=' + ${reverseSortDirection}}">
PayPal Adress</a>
</th>
<th>
<a th:href = "@{'/page/' + ${currentPage} + '?sortField=ingameName&sortDirection=' + ${reverseSortDirection}}">
In-game Name</a>
</th>
<th>Game</th>
<th>Platform</th>
<th>Login Email</th>
<th>Login Password</th>
<th>Kingdom/State</th>
<th>Activity</th>
<th>Date</th>
<th>Currency</th>
<th>Old/Other Username</th>
<th>Charge Back?</th>
<th>Notes</th>
</tr>
</thead>
<tbody>
<tr th:each = "customerDTO : ${listOfCustomers}">
<!-- <td th:text = "${customerDTO.idCustomer}"></td> -->
<td th:text = "${customerDTO.paypalUsername}"></td>
<td th:text = "${customerDTO.paypalAddress}"></td>
<td th:text = "${customerDTO.ingameName}"></td>
<td th:text = "${customerDTO.game}"></td>
<td th:text = "${customerDTO.platform}"></td>
<td th:text = "${customerDTO.loginEmail}"></td>
<td th:text = "${customerDTO.loginPassword}"></td>
<td th:text = "${customerDTO.kingdom}"></td>
<td th:text = "${customerDTO.active}"></td>
<td th:text = "${customerDTO.date}"></td>
<td th:text = "${customerDTO.currency}"></td>
<td th:text = "${customerDTO.oldOtherUsername}"></td>
<td th:text = "${customerDTO.chargeBack}"></td>
<td th:text = "${customerDTO.notes}"></td>
<td><a href = "#" th:href = "@{/findById(id=${customerDTO.idCustomer})}" class="btn btn-primary btn-lg" id = "eBtn" th:data = "${customerDTO.idCustomer}">Edit</a></td>
<td><a href = "#" th:href = "@{/deleteCustomer(id=${customerDTO.idCustomer})}" class="btn btn-danger btn-lg" id = "delBtn" th:data = "${customerDTO.idCustomer}">Delete</a></td>
</tr>
</tbody>
</table>
<div th:if = "${totalPages > 1}">
<div class = "row col-sm-10">
<div class = "col-sm-2">
Total Customers: [[${totalItems}]]
</div>
<div class = "col-sm-1">
<span th:each = "i: ${#numbers.sequence(1, totalPages)}">
<a th:if = "${currentPage != i}" th:href = "@{'/page/' + ${i} + '?sortField=' + ${sortField} + '&sortDirection=' + ${sortDirection}}">[[${i}]]</a>
<span th:unless = "${currentPage != i}">[[${i}]]</span>
</span>
</div>
<div class = "col-sm-1">
<a th:if = "${currentPage < totalPages}" th:href = "@{'/page/' + ${currentPage + 1} + '?sortField=' + ${sortField} + '&sortDirection=' + ${sortDirection}}">Next</a>
<span th:unless = "${currentPage < totalPages}">Next</span>
</div>
<div class = "col-sm-1">
<a th:if = "${currentPage < totalPages}" th:href = "@{'/page/' + ${totalPages} + '?sortField=' + ${sortField} + '&sortDirection=' + ${sortDirection}}">Last</a>
<span th:unless = "${currentPage < totalPages}">Last</span>
</div>
</div>
</div>
</div>
<!-- Modal for update -->
<div class = "myModalFormEdit">
<form th:action = "@{/savecustomer}" method = "POST">
<div class="modal fade" id="exampleModalEdit" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Update Customer</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="form-group">
<!-- <label for="idCustomer" class="col-form-label">ID:</label> -->
<input type = "hidden" class = "form-control" id="idCustomer" name = "idCustomer" />
</div>
<div class="form-group">
<label for="paypalUsername" class="col-form-label">PayPal Username:</label>
<input type="text" maxlength="32" class="form-control" id="paypalUsername" name = "paypalUsername" />
</div>
<div class="form-group">
<label for="paypalAddress" class="col-form-label">PayPal Address:</label>
<input type = "email" maxlength="32" class="form-control" id="paypalAddress" name = "paypalAddress" />
</div>
<div class="form-group">
<label for="game" class="col-form-label">Game:</label>
<input type = "text" maxlength="4" class="form-control" id="game" name = "game" />
</div>
<div class="form-group">
<label for="ingameName" class="col-form-label">In-game Name:</label>
<input type = "text" maxlength="32" class="form-control" id="ingameName" name = "ingameName" />
</div>
<div class="form-group">
<label for="platform" class="col-form-label">Platform:</label>
<input type = "text" maxlength="32" class="form-control" id="platform" name = "platform" />
</div>
<div class="form-group">
<label for="loginEmail" class="col-form-label">Login Email:</label>
<input type = "email" maxlength="32" class="form-control" id="loginEmail" name = "loginEmail" />
</div>
<div class="form-group">
<label for="loginPassword" class="col-form-label">Login Password:</label>
<input type = "text" maxlength="32" class="form-control" id="loginPassword" name = "loginPassword" />
</div>
<div class="form-group">
<label for="kingdom" class="col-form-label">Kingdom/State:</label>
<input type = "text" maxlength="32" class="form-control" id="kingdom" name = "kingdom" />
</div>
<div class="form-group">
<label for="active" class="col-form-label">Activity:</label>
<select class="form-control" id="active" name = "active" >
<option value="true" selected>Active</option>
<option value="false">Inactive</option>
</select>
</div>
<div class="form-group">
<label for="date" class="col-form-label"> <i class="fa fa-calendar"></i> Date:</label>
<input type = "date" class="form-control" id="date" name = "date"/>
</div>
<div class="form-group">
<label for="currency" class="col-form-label">Currency:</label>
<input type = "text" maxlength="4" class="form-control" id="currency" name = "currency" />
</div>
<div class="form-group">
<label for="oldOtherUsername" class="col-form-label">Old/Other Username:</label>
<input type = "text" maxlength="32" class="form-control" id="oldOtherUsername" name = "oldOtherUsername" />
</div>
<div class="form-group">
<label for="chargeBack" class="col-form-label">Charge Back?</label>
<select class="form-control" id="chargeBack" name = "chargeBack" >
<option value="true" selected>No</option>
<option value="false">Yes</option>
</select>
</div>
<div class="form-group">
<label for="notes" class="col-form-label">Notes:</label>
<textarea class="form-control" maxlength="512" id="notes" name = "notes"></textarea>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary" value = "">Save</button>
</div>
</div>
</div>
</div>
</form>
</div>
<!-- Modal for Insert New-->
<div class = "myModalFormInsertNew">
<form th:action = "@{/savecustomer}" method = "POST">
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">New Customer</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="form-group">
<label for="paypalUsername" class="col-form-label">PayPal Username:</label>
<input type="text" class="form-control" id="paypalUsername" name = "paypalUsername" />
</div>
<div class="form-group">
<label for="paypalAddress" class="col-form-label">PayPal Address:</label>
<input type = "email" class="form-control" id="paypalAddress" name = "paypalAddress" />
</div>
<div class="form-group">
<label for="game" class="col-form-label">Game:</label>
<input type = "text" class="form-control" id="game" name = "game" />
</div>
<div class="form-group">
<label for="ingameName" class="col-form-label">In-game Name:</label>
<input type = "text" class="form-control" id="ingameName" name = "ingameName" />
</div>
<div class="form-group">
<label for="platform" class="col-form-label">Platform:</label>
<input type = "text" class="form-control" id="platform" name = "platform" />
</div>
<div class="form-group">
<label for="loginEmail" class="col-form-label">Login Email:</label>
<input type = "email" class="form-control" id="loginEmail" name = "loginEmail" />
</div>
<div class="form-group">
<label for="loginPassword" class="col-form-label">Login Password:</label>
<input type = "text" class="form-control" id="loginPassword" name = "loginPassword" />
</div>
<div class="form-group">
<label for="kingdom" class="col-form-label">Kingdom/State:</label>
<input type = "text" class="form-control" id="kingdom" name = "kingdom" />
</div>
<div class="form-group">
<label for="active" class="col-form-label">Activity:</label>
<select class="form-control" id="active" name = "active" >
<option value="true" selected>Active</option>
<option value="false">Inactive</option>
</select>
</div>
<div class="form-group">
<label for="date" class="col-form-label"> <i class="fa fa-calendar"></i> Date:</label>
<input type = "date" class="form-control" id="date" name = "date"/>
</div>
<div class="form-group">
<label for="currency" class="col-form-label">Currency:</label>
<input type = "text" class="form-control" id="currency" name = "currency" />
</div>
<div class="form-group">
<label for="oldOtherUsername" class="col-form-label">Old/Other Username:</label>
<input type = "text" class="form-control" id="oldOtherUsername" name = "oldOtherUsername" />
</div>
<div class="form-group">
<label for="chargeBack" class="col-form-label">Charge Back?</label>
<select class="form-control" id="chargeBack" name = "chargeBack" >
<option value="true" selected>No</option>
<option value="false">Yes</option>
</select>
</div>
<div class="form-group">
<label for="notes" class="col-form-label">Notes:</label>
<textarea class="form-control" id="notes" name = "notes"></textarea>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary" value = "">Save</button>
</div>
</div>
</div>
</div>
</form>
</div>
<!-- ModalDelete -->
<div class="modal fade" id="myModalDelete" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="staticBackdropLabel">Delete Customer</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p class = "alert alert-danger">Are you sure you want to delete this customer?</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<a href = "" class="btn btn-danger" id = "delRef">Delete</a>
</div>
</div>
</div>
</div>
</body>
</html>用于modals的javascript main.js：
$(document).ready(function(){
$('#nBtn, .table #eBtn').on('click', function(event){
event.preventDefault();
var href = $(this).attr('href');
var text = $(this).text();
var date = new Date();
if(text == 'Edit')
{
$.get(href, function(customerDTO, status){
$('.myModalFormEdit #idCustomer').val(customerDTO.idCustomer);
$('.myModalFormEdit #paypalUsername').val(customerDTO.paypalUsername);
$('.myModalFormEdit #paypalAddress').val(customerDTO.paypalAddress);
$('.myModalFormEdit #game').val(customerDTO.game);
$('.myModalFormEdit #ingameName').val(customerDTO.ingameName);
$('.myModalFormEdit #platform').val(customerDTO.platform);
$('.myModalFormEdit #loginEmail').val(customerDTO.loginEmail);
$('.myModalFormEdit #loginPassword').val(customerDTO.loginPassword);
$('.myModalFormEdit #kingdom').val(customerDTO.kingdom);
$('.myModalFormEdit #active').val(customerDTO.active);
$('.myModalFormEdit #date').val(customerDTO.date);
$('.myModalFormEdit #currency').val(customerDTO.currency);
$('.myModalFormEdit #oldOtherUsername').val(customerDTO.oldOtherUsername);
$('.myModalFormEdit #chargeBack').val(customerDTO.chargeBack);
$('.myModalFormEdit #notes').val(customerDTO.notes);
$('.myModalFormEdit #exampleModalEdit').modal('show');
});
}
else
{
$('.myModalFormInsertNew #exampleModal').modal('show');
};
});
$('.table #delBtn').on('click', function(event){
event.preventDefault();
var href = $(this).attr('href');
$('#myModalDelete #delRef').attr('href', href);
$('#myModalDelete').modal('show');
});
});控制器java类：
package com.mitogames.controllers;
import java.util.List;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.data.domain.Page;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.ModelAttribute;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.servlet.ModelAndView;
import com.mitogames.dto.CustomerDTO;
import com.mitogames.services.ICustomerService;
@Controller
public class MitogamesController
{
Logger log = LoggerFactory.getLogger(this.getClass());
@Autowired
ICustomerService customerService;
@GetMapping("/index")
public String homePage()
{
return "index";
}
@PostMapping("/savecustomer")
public String saveCustomer(@ModelAttribute CustomerDTO customerDTO)
{
//CustomerDTO emptyCustomer = new CustomerDTO();
//ModelAndView modelAndView = new ModelAndView();
try
{
customerService.saveCustomer(customerDTO);
} catch (Exception e)
{
log.error("Unabel to save the customer" + e);
e.printStackTrace();
return "error";
}
//modelAndView.addObject("customerDTO", emptyCustomer);
//modelAndView.setViewName("newcustomer");
//return modelAndView;
return "redirect:/customer_list";
}
@GetMapping("/customer_list")
public String customerList(Model model)
{
return findPaginated(1, "paypalUsername", "asc", model);
}
@GetMapping("/findById")
@ResponseBody
public CustomerDTO findById(int id)
{
CustomerDTO customerDTO = new CustomerDTO();
customerDTO = customerService.getCustomerById(id);
return customerDTO;
}
@GetMapping("/deleteCustomer")
public String deleteCustomerById(int id)
{
customerService.deleteCustomer(id);
return "redirect:/customer_list";
}
@GetMapping("/page/{pageNumber}")
public String findPaginated(@PathVariable (value = "pageNumber") int pageNumber, @RequestParam("sortField") String sortField,
@RequestParam("sortDirection") String sortDirection ,Model model)
{
int pageSize = 5;
Page<CustomerDTO> page = customerService.findPaginated(pageNumber, pageSize, sortField, sortDirection);
List<CustomerDTO> listOfCustomers = page.getContent();
model.addAttribute("currentPage", pageNumber);
model.addAttribute("totalPages", page.getTotalPages());
model.addAttribute("totalItems", page.getTotalElements());
model.addAttribute("listOfCustomers", listOfCustomers);
model.addAttribute("sortField", sortField);
model.addAttribute("sortDirection", sortDirection);
model.addAttribute("reverseSortDirection", sortDirection.equals("asc") ? "desc" : "asc");
return "customer_list";
}
}道类
package com.mitogames.dao;
import java.util.List;
import java.util.Optional;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.data.domain.Page;
import org.springframework.data.domain.PageRequest;
import org.springframework.data.domain.Pageable;
import org.springframework.data.domain.Sort;
import org.springframework.stereotype.Component;
import com.mitogames.dto.CustomerDTO;
@Component
public class CustomerDAO implements ICustomerDAO
{
@Autowired
ICustomerRepository customerRepository;
@Override
public void saveCustomer(CustomerDTO customerDTO) throws Exception
{
customerRepository.save(customerDTO);
}
@Override
public List<CustomerDTO> getAllCustomers() throws Exception
{
return customerRepository.findAll();
}
@Override
public CustomerDTO getCustomerById(int id)
{
Optional<CustomerDTO> optional = customerRepository.findById(id);
CustomerDTO customerDTO = null;
if (optional.isPresent())
{
customerDTO = optional.get();
}
else
{
throw new RuntimeException("Customer not found for id: " + id);
}
return customerDTO;
}
@Override
public void deleteCustomer(int id)
{
customerRepository.deleteById(id);
}
@Override
public Page<CustomerDTO> findPaginated(int pageNumber, int pageSize, String sortField, String sortDirection)
{
Sort sort = sortDirection.equalsIgnoreCase(Sort.Direction.ASC.name()) ? Sort.by(sortField).ascending() :
Sort.by(sortField).descending();
Pageable pageable = PageRequest.of(pageNumber - 1, pageSize, sort);
return this.customerRepository.findAll(pageable);
}
}我有一个服务类，但在本例中它只是将参数传递给dao对象。对于crud操作，我的接口customerrepository扩展了jparepository。
暂无答案！
目前还没有任何答案，快来回答吧！