spring启动模式在对表排序之后将不起作用

kokeuurv  于 2021-06-29  发布在  Java
关注(0)|答案(0)|浏览(211)

我正在用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> &nbsp; &nbsp;
                        </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">&times;</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>&nbsp;&nbsp;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">&times;</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>&nbsp;&nbsp;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">&times;</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。

JavaspringJavaScriptwebbootstrap-modal

暂无答案！

目前还没有任何答案，快来回答吧！

我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备2022004421号-2 NULL123 https://www.null123.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com