使用layui做表单数据展示时遇到的问题包括layui is not defined，请求异常，错误提示：parsererror，只有表头可以显示出来数据却显示不出

layui表格数据加载问题

原创于 2024-07-09 22:53:03 发布 · 910 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#layui #前端 #javascript #bootstrap

最近在使用layui在前端以表格的形式展示数据，却遇到了一些问题，下面说一下我的解决办法，避免大家踩坑。

首先是layui引入的问题即layui is not defined，大家可以去layui官网下载layui到本地并在前端页面中使用layui，注意href参数以及src参数要写你保存的layui的路径，例如：

<link rel="stylesheet" href="../static/layui-v2.7.6/layui-v2.7.6/layui/css/layui.css" media="all"/>
<script type="text/javascript" src="../static/layui-v2.7.6/layui-v2.7.6/layui/layui.js"></script>

最难的还是数据展示不出来的问题

使用layui定义的表头能显示出来，但是对应的数据却死活显示不出来，包括我用Bootstrap也是这样，我解决这个问题用了一下午也没解决，我之前一直以为是后端返回的json数据样例有问题，于是我去官网反复看，一直是按照他给的样例返回的数据，

{
    "code": 0,
    "msg": "",
    "count": 1000,
    "data": [
        {
            "id": 10000,
            "username": "user-0",
            "sex": "女",
            "city": "城市-0",
            "sign": "签名-0",
            "experience": 255,
            "logins": 24,
            "words": 82830700,
            "classify": "作家",
            "score": 57
        },
        {
            "id": 10001,
            "username": "user-1",
            "sex": "男",
            "city": "城市-1",
            "sign": "签名-1",
            "experience": 884,
            "logins": 58,
            "words": 64928690,
            "classify": "词人",
            "score": 70.5
        }]
}

但是返回的数据却一直在前端显示不出来，于是我想到可能是数据的问题，于是我手动写了一个数据样例并且在后端返回，结果我手动写的样例成功在前端展示了出来，这也验证了确实是数据的问题，后来我发现是我的数据中有的键的值是nan即缺失值，于是我将nan替换成了字符串null，问题得到了解决。但是我目前还不知道为什么会这样，如果有大佬知道可以说明一下。

    for i in range(len(show_data)):
        for key in show_data[i].keys():
            print(key, show_data[i][key])
            if str(show_data[i][key]) == 'nan':
               show_data[i][key] = 'null'