Next/Prev 个按钮，使用 Spring MVC 和 thymeleaf 从列表中更改对象

Question

我在第 editPLayer 页上使用了 Thymeleaf。我想添加按钮 Next 和 Previous 以更改有关播放器的表单中的信息。

像这样的按钮：

<input class="button2 button-switch" value="&lt;&lt;"/>
<input class="button2 button-switch" value="&gt;&gt;"/>

editPlayer.html 看起来像这样：

<div class="card">
        <form action="#" th:action="@{/editPlayer}" th:object="${player}" method="post">

            <input type="hidden" th:field="*{id_player}"></input>

            <div class="info">Name: </div>
            <input type="text" th:field="*{name}" placeholder="Imie" th:class="${#fields.hasErrors('name')}? 'error'" /><br/>

            <div class="info">Surname: </div>
            <input type="text" th:field="*{surname}" placeholder="Nazwisko" th:class="${#fields.hasErrors('surname')}? 'error'" /><br/>

            <div class="info">Age: </div>   
            <input type="text" th:field="*{age}" th:class="${#fields.hasErrors('age')}? 'error'"/><br/>

            <div class="info">Number: </div>
            <input type="text" th:field="*{number}" th:class="${#fields.hasErrors('number')}? 'error'"/><br/>

            <input type="submit" class="button button-submit" value="EDIT"/>
        </form>
    </div>

在上面的代码中 player 是从 Controller 返回的对象：

@Controller
@RequestMapping(value = "/editPlayer")
public class EditPlayerController {

    @Autowired
    private PlayerRepository playerRepository;

    @RequestMapping(method = RequestMethod.GET)
    public String editPlayerForm(Model model){

        model.addAttribute("player", playerRepository.findOne((long) 1));

        return "editPlayer";
    }

    @RequestMapping(method = RequestMethod.POST)
    public String editPlayerSubmit(@Valid @ModelAttribute("player") Player player, 
            BindingResult bindingResult, Model model, 
            HttpSession session){

        if(bindingResult.hasErrors()) {
            return "editPlayer";
        }

        playerRepository.save(player);

        return "redirect:/coachSite";
    }
}

现在我将 Id = 1 添加到模型 Player 对象（在这一行中）

model.addAttribute("player", playerRepository.findOne((long) 1));

我想添加到模型玩家列表中，例如：

model.addAttribute("player", playerRepository.findAll());

... 并在 editPlayer.html 中放置切换按钮（下一个和上一个）以显示信息表单，例如列表中的第一个用户，单击 Next 并在表单中显示列表中的下一个用户。我怎样才能做到这一点？任何的想法？也许有人有好主意使用 JavaScript ?

Answer 1

I dont need pages, only currently displayed object player and option to Next and Prevoius object, it must be show in my form int editPlayer.html. I don't know how implements this.

但是可以肯定的是，您可能需要此解决方案的一个子集用于上一个/下一个按钮。您正在通过 javascript 和样式（例如 css 显示属性）进行分页，或者您正在向服务器发送请求。

你有两个选择：

在一页中加载所有数据（您的想法）
为每个上一个/下一个按钮按下执行一个 ajax 请求

我的看法：

所有数据只加载一次，但要交付给客户端可能需要大量 html。大多数情况下，您编辑一个播放器并离开页面。这将是浪费。
您有一个只有所需数据的干净页面，可以通过 ajax 调用、片段呈现和 html 替换来替换它。缺点：每页.

也许我误会了你，但我读到你想一次只显示一名球员。我知道这不是您问题的技术答案，但 a) 评论太长 b) 在强制执行一个列表请求之前需要考虑一下。

Next/Prev 个按钮，使用 Spring MVC 和 thymeleaf 从列表中更改对象

Next/Prev buttons to change object from list using Spring MVC and thymeleaf

html

java

spring

thymeleaf