How to update table when call ajax success thymeleaf spring

I have table information user. I search on table and use ajax to call SearchController. How do I can update response for table?

When call first time, I use method Get

 @GetMapping(value = "/users")
    public String users(UserFilterReq request, ModelMap modelMap) {
        modelMap.addAttribute("users", userService.getAllUser(request));
        modelMap.addAttribute("date", LocalDate.now());
        modelMap.addAttribute("roles", roleService.getAll());
        modelMap.addAttribute("userDto", new UserUpdateDto());
        return "/user/userList";
    }

At userList.html, I use thymeleaf bind data:

        <button type="button" class="btn btn-info" name="redBean">Search</button>
        <input type="text" th:name="keySearch"  id="keySearchInput" class="form-control-sm" th:placeholder="keySearch">
        <table class="table table-custom">
            <thead class="thead-dark">
            <tr>
                <th>ID</th>
                <th>Full name</th>
                <th>User name</th>
                <th>Email</th>
            </tr>
            </thead>
            <tbody>
            <tr th:if="${users.empty}">
                <td colspan="2"> No User Available </td>
            </tr>
            <tr th:each="user, index : ${users}">
                <td><span th:text="${user.id}"></span></td>
                <td><span th:text="${user.firstName} + ' ' + ${user.lastName}"> Full name </span></td>
                <td><span th:text="${user.lastName}"> User name </span></td>
                <td><span th:text="${user.email}"> Email </span></td>
            </tr>
            </tbody>
        </table>

When click button Search call ajax:

    $('button[name="redBean"]').click(function (event) {
        event.preventDefault();
        var formData = $('#keySearchInput').serialize();
        $.post('/users-search', formData, function (data) {
            //update data table...
        });
    });

Rest api search user:

    @PostMapping(value = "/users-search")
    public ResponseEntity<Page<DtbUser>> search(UserFilterReq req){
        return new ResponseEntity<>(userService.getAllUser(req), HttpStatus.OK);
    }

How to i can update table ???
Thanks You!

Leave a Reply

avatar
  Subscribe  
Notify of