问答详情
源自:6-3 客户管理查询三

数据明明已经有返回了,但是列表就是不显示

网上的解决办法要不就是code对应的值改成0,再要不就是还需要response参数。都试过了没有用,我的值还是没展示。实在是找不到问题在哪里,求帮助~~~


customer.js文件

table=layui.table;

table.render({
    elem: ,
    url: ,  page: ,   response:{ statusName: ,
        statusCode: },
    cols: [[ {field:,title:},
        {field:,title:},
        {field:,title:},
        {field:,title:},
        {field:,title:},
        {title:,toolbar:}
    ]],
    parseData:(res){{
            : res.code, : res.msg,   : res.data.records,   : res.data.count    }
    }
});


controller文件:
package com.imooc.project.controller;


import com.baomidou.mybatisplus.core.conditions.query.LambdaQueryWrapper;
import com.baomidou.mybatisplus.core.toolkit.StringUtils;
import com.baomidou.mybatisplus.core.toolkit.Wrappers;
import com.baomidou.mybatisplus.extension.api.R;
import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
import com.imooc.project.entity.Customer;
import com.imooc.project.service.CustomerService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.ResponseBody;

import java.util.HashMap;
import java.util.Map;

/**
 * <p>
 * 客户表 前端控制器
 * </p>
 *
 * @author xigua
 * @since 2023-04-19
 */
@Controller
@RequestMapping("/customer")
public class CustomerController {

    @Autowired
    private CustomerService customerService;

    /**
     * 进入列表页
     * @return
     */
    @GetMapping("toList")
    public String toList(){
        return "/customer/customerList";
    }

    /**
     * 查询方法
     * @param realName
     * @param phone
     * @param page
     * @param limit
     * @return
     */
    @GetMapping("list")
    @ResponseBody
    public R<Map<String,Object>> list(String realName,String phone,Long page,Long limit){
        //查询条件:当realName不为空时,加上模糊查询;当电话号码不为空时,加上模糊查询
        //并且customerID按照倒序排列
        LambdaQueryWrapper<Customer> wrapper= Wrappers.<Customer>lambdaQuery()
                .like(StringUtils.isNotBlank(realName),Customer::getRealName,realName)
                .like(StringUtils.isNotBlank(phone),Customer::getPhone,phone)
                .orderByDesc(Customer::getCustomerId);

        //分页查询
        Page<Customer> customerPage = customerService.page(new Page<>(page, limit), wrapper);

        HashMap<String, Object> data = new HashMap<>();
        data.put("count",customerPage.getTotal());
        data.put("records",customerPage.getRecords());

        return R.ok(data);
    }


}

customerList.html文件
<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
   <link rel="stylesheet" th:href="@{/webjars/layui/css/layui.css}" media="all">
</head>
<body>

   <div class="layui-form-item">

      <div class="layui-inline">
         <label class="layui-form-label">真实姓名</label>
         <div class="layui-input-inline" style="width: 150px;">
            <input type="text" id="realName" autocomplete="off" class="layui-input">
         </div>
      </div>

      <div class="layui-inline">
         <label class="layui-form-label">手机号码</label>
         <div class="layui-input-inline" style="width: 150px;">
            <input type="text" id="phone" autocomplete="off"
 class="layui-input">
         </div>
      </div>

      <div class="layui-inline">
         <div class="layui-input-inline">
            <button class="layui-btn">查询</button>
         </div>
      </div>

   </div>

   <button class="layui-btn">增加</button>

   <table id="customerList"></table>
   <script th:src="@{/webjars/layui/layui.all.js}"></script>
   <script th:src="@{/webjars/jquery/jquery.js}"></script>
   <script th:src="@{/js/customer/customer.js}"></script>
   <script type="text/html" id="barDemo">
      <a class="layui-btn layui-btn-xs" lay-event="detail">查看</a>
      <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
      <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
   </script>


</body>
</html>


提问者:qq_31画_0 2023-05-10 16:34

个回答

  • qq_31画_0
    2023-05-10 17:17:16

    家人们我找了一下午,我感觉就是我请求成功了,但是解析数据有问题。

    然后我试了一下会不会是后端没有返回count,然后前端没法获取总数条数,所以没法赋值给res.data.count

    然后我在customer.js里面传了这行代码

    res.data.count=res.data.length;

    家人们谁懂啊,没想到成功了

    http://img.mukewang.com/645b5ff50001b7a818830759.jpg