javascript - 如何在 createdadettime JSP、javascript 中按日期和结果顺序实现 Spring Boot 搜索过滤器？

Question

我正在开发一个 Spring Boot Web 应用程序。我正在尝试在我的应用程序中实现搜索过滤器。我的 JSP 页面上有一个日期字段。因此，当我从那里选择任何日期时，我应该能够获取该特定日期的所有记录。所以我创建了一个 REST API 来获取特定日期的记录。以下是我的存储库代码：

    public interface OrdersDao extends JpaRepository<Orders, Long> {
        List<Orders> findByOrderdateOrderByCreateddatetimeDesc(Date date); // to fetch records in selected date
        List<Orders> findAllByStatus(int status, Pageable pageable); // to show active orders in table through pagination 
        List<Orders> findAllByStatus(int status); 
    }

这是我处理响应的控制器。下面的代码是在选定的日期获取订单。例如，在日期：05-06-2021 下了 6 个订单。所以当我选择这个日期时，它应该会显示在那个日期订购的所有 6 个订单。

@RequestMapping(value = AkApiUrl.searchbydate, method = { RequestMethod.POST, RequestMethod.GET }, produces = {MediaType.APPLICATION_JSON_VALUE })
    public ResponseEntity<?> searchbydate(HttpServletRequest request, @RequestParam("orderdate") String orderdate) {
        CustomResponse = ResponseFactory.getResponse(request);
        try {
            SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd");
            Date allorderindate = sdf.parse(orderdate);
            List<Orders> orderlist = ordersdao.findByOrderdateOrderByCreateddatetimeDesc(allorderindate);
            if (orderlist != null) {
                CustomResponse.setResponse(orderlist);
                CustomResponse.setStatus(CustomStatus.OK);
                CustomResponse.setStatusCode(CustomStatus.OK_CODE);
            }
        } catch (Exception e) {
            e.printStackTrace();
            CustomResponse.setResponse(null);
            CustomResponse.setStatus(CustomStatus.Error);
            CustomResponse.setStatusCode(CustomStatus.Error_CODE);
        }
        return new ResponseEntity<ResponseDao>(CustomResponse, HttpStatus.OK);
    }

这是我在前端处理响应的脚本。

function searchorder(){
        var orderdate = document.getElementById('orderdate').value;
        var url = "../api/searchbydate";
        $.post(url,{
            orderdate : orderdate,
        },function(data, status) {
            if (data.status == "OK") {
                if (data.statusCode == 1) {
                        ordertable(<%=pagelength%>); // Here I called this function on ajax success, to display orders table on selected date.
                } else {
                    var error = data.responseMessage;
                    swal(error, "", "error");
                    }
            } else {
                var error = data.responseMessage;
                swal(error, "", "error");
                }
        });
    }

这是通过 AJAX 创建动态表的功能，以处理繁重的数据负载。这是通过后端的分页来完成的。

function ordertable(limit){
        var url = "../api/getallorder";
        $.post(url,{
            limit : limit,
            },function(data, status) {
                if (data.status == "OK") {
                    if (data.statusCode == 1) {
                        var row = "", page;
                        var orderlist = data.response;
                        var orderlistlength = orderlist.length;
                        var allorders = data.totalorders;
                        var count = allorders/10;
                        if(orderlistlength > 0){
                            for(var i = 0 ; i < orderlistlength ; i++){
                                row = row + "<tr><td>"+orderlist[i].orderid+"</td><td><a href=\"order-id.html\">"+orderlist[i].uniqueorderid+"</a></td>"
                                +"<td>"+orderlist[i].orderstatus+"</td><td>No records for time</td><td>No delivery type</td>"
                                +"<td>"+orderlist[i].userid.address+"</td><td>"+orderlist[i].totalamount+"</td><td>"+orderlist[i].userid.city+"</td>"
                                +"<td>No vendor's records yet</td></tr>";
                            }
                        }else{
                            row = "<tr><td colspan = 9>No Record Found.</td></tr>";
                        }
                        document.getElementById('orderspaginationdiv').innerHTML = row;
                    } else {
                        var error = data.responseMessage;
                        swal(error, "", "error");
                        }
                } else {
                    var error = data.responseMessage;
                    swal(error, "", "error");
                    }
                });
    }

所以问题是，我已经在邮递员中测试了 searchbydate，我得到了想要的结果作为响应。但我不知道我在前端缺乏什么。当我选择日期时，从界面中，它正在从数据库中获取并显示所有数据。如果有人有建议，那将是可观的。如果有人发现任何疑问，他们可以问我。

标签： javascriptajaxspring-bootjspspring-data-jpa