多表联查两张表中所取得字段相同怎么办？

第一张表格的结构

第二章表格的结构

所需要得到的页面展示效果

原本的sql： select asset.name,device_type.name,asset.ip from asset LEFT JOIN device_type on asset.type=device_type where asset.type=device_type.type

由于需要得到两个表相同字段的内容，可以采用前端分析展示

更改后的sql：

SELECT name,type,ip FROM asset

JS部分

var pageCurr;
var form;
$(function () {
    layui.use('table', function () {
        var table = layui.table;
        form = layui.form;
        tableIns = table.render({
            elem: '#getMonitor',
            url: '/home/findMonitor',
            method: 'get', //默认：get请求
            cellMinWidth: 80,
            page: true,
            request: {
                pageName: 'pageNum', //页码的参数名称，默认：pageNum
                limitName: 'pageSize' //每页数据量的参数名，默认：pageSize
            },
            // parseData:function (res){
            // console.log(res);
            // return{
            //     "code":0,
            //     "msg":"",
            //     "count":1000,
            //     "data":res
            // }
            // },
            response:{
                statusName: 'code', //数据状态的字段名称，默认：code
                statusCode: 200, //成功的状态码，默认：0
                countName: 'totals', //数据总数的字段名称，默认：count
                dataName: 'list' //数据列表的字段名称，默认：data
            },
            cols: [[
                {field: 'name', title: '设备名称', align: 'center'}
                , {field: 'type', title: '设备类型', align: 'center'}
                , {field: 'ip', title: '设备IP', align: 'center'}
            ]],
            done: function (res, count) {
                $("[data-field='level']").children().each(function () {
                    if ($(this).text() == '紧急') {
                        $(this).val('紧急').css("color", '#FF0000')
                    } else if ($(this).text() == '重要') {
                        $(this).val('重要').css("color", '#FF4500')
                    } else if ($(this).text() == '次要') {
                        $(this).val('次要').css("color", '#FF7F50')
                    } else if ($(this).text() == '一般') {
                        $(this).val('一般').css("color", '#FFA07A')
                    } else if ($(this).text() == '告知') {
                        $(this).val('告知').css("color", '#FFFF00')
                    }
                });
                $("[data-field='type']").children().each(function () {
                    if ($(this).text() == 'DCD') {
                        $(this).text('网络安全监测装置')
                    } else if ($(this).text() == 'DB') {
                        $(this).text('数据库')
                    } else if ($(this).text() == 'IDS') {
                        $(this).text('入侵检测系统')
                    } else if ($(this).text() == 'AV') {
                        $(this).text('防病毒系统')
                    } else if ($(this).text() == 'VEAD') {
                        $(this).text('纵向加密装置')
                    } else if ($(this).text() == 'SW') {
                        $(this).text('交换机')
                    } else if ($(this).text() == 'SVR') {
                        $(this).text('服务器')
                    } else if ($(this).text() == 'BID') {
                        $(this).text('横向方向隔离装置')
                    } else if ($(this).text() == 'FID') {
                        $(this).text('横向正向隔离装置')
                    } else if ($(this).text() == 'FW') {
                        $(this).text('防火墙')
                    }
                });
            }

        });
    })
})

function replaceDoc()
{
    $(function () {
        layui.use('table', function () {
            var table = layui.table;
            form = layui.form;
            tableIns = table.render({
                elem: '#getMonitor',
                url: '/home/findMonitor',
                method: 'get', //默认：get请求
                cellMinWidth: 80,
                page: true,
                request: {
                    pageName: 'pageNum', //页码的参数名称，默认：pageNum
                    limitName: 'pageSize' //每页数据量的参数名，默认：pageSize
                },
                // parseData:function (res){
                // console.log(res);
                // return{
                //     "code":0,
                //     "msg":"",
                //     "count":1000,
                //     "data":res
                // }
                // },
                response:{
                    statusName: 'code', //数据状态的字段名称，默认：code
                    statusCode: 200, //成功的状态码，默认：0
                    countName: 'totals', //数据总数的字段名称，默认：count
                    dataName: 'list' //数据列表的字段名称，默认：data
                },
                cols: [[
                    {field: 'name', title: '设备名称', align: 'center'}
                    , {field: 'type', title: '设备类型', align: 'center'}
                    , {field: 'ip', title: '设备IP', align: 'center'}
                ]],
                done: function (res, count) {
                    $("[data-field='level']").children().each(function () {
                        if ($(this).text() == '紧急') {
                            $(this).val('紧急').css("color", '#FF0000')
                        } else if ($(this).text() == '重要') {
                            $(this).val('重要').css("color", '#FF4500')
                        } else if ($(this).text() == '次要') {
                            $(this).val('次要').css("color", '#FF7F50')
                        } else if ($(this).text() == '一般') {
                            $(this).val('一般').css("color", '#FFA07A')
                        } else if ($(this).text() == '告知') {
                            $(this).val('告知').css("color", '#FFFF00')
                        }
                    });
                    $("[data-field='type']").children().each(function () {
                        if ($(this).text() == 'DCD') {
                            $(this).text('网络安全监测装置')
                        } else if ($(this).text() == 'DB') {
                            $(this).text('数据库')
                        } else if ($(this).text() == 'IDS') {
                            $(this).text('入侵检测系统')
                        } else if ($(this).text() == 'AV') {
                            $(this).text('防病毒系统')
                        } else if ($(this).text() == 'VEAD') {
                            $(this).text('纵向加密装置')
                        } else if ($(this).text() == 'SW') {
                            $(this).text('交换机')
                        } else if ($(this).text() == 'SVR') {
                            $(this).text('服务器')
                        } else if ($(this).text() == 'BID') {
                            $(this).text('横向方向隔离装置')
                        } else if ($(this).text() == 'FID') {
                            $(this).text('横向正向隔离装置')
                        } else if ($(this).text() == 'FW') {
                            $(this).text('防火墙')
                        }
                    });
                }
                // done: function(res, curr, count){
                //     $("[data-field='pname']").children().each(function(){
                //         if($(this).text()==''){
                //             $(this).text("根目录");
                //         }else {
                //             $(this).text($(this).text());
                //         }
                //     });
                //     pageCurr=curr;
                //
                // }
            });
        })
    })
}

HTML部分

<!DOCTYPE html>
<html  xmlns:th="http://www.thymeleaf.org"
       xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head th:include="layout :: htmlhead" th:with="title='用户管理'"></head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
    <!--头-->
    <div th:replace="fragments/head :: header"></div>
    <div class="layui-body" style="margin: 1%">

        <form id="userSearch" class="layui-form layui-form-pane" method="post" action="" style="margin-top: 20px;">
            <div class="layui-font-20">选择设备资产
                <button type="button" class="layui-btn layui-btn-sm" onclick="replaceDoc()" style="float: right">刷新</button></div>
            <table id="getMonitor" lay-filter="userTable" style="height: 20px" ></table>

        </form>

        <select name="city" lay-verify="">
            <option value="">网络连接白名单</option>
             <option value="010">服务端口白名单</option>
             <option value="021">关键文件/目录清单</option>
             <option value="0571">存在光驱设备检测周期</option>
            <option value="0571">非法端口检测周期</option>
            <option value="0571">危险操作命令清单</option>

        </select>

            <table id="whitel" lay-filter="userTable"  ></table>



    </div>




    <!--底部-->
    <div th:replace="fragments/footer :: footer"></div>
<!--    <script src="/js/dateUtils.js"></script>-->
    <script src="/js/getMonitor.js"></script>
    <script src="/js/whitelist.js"></script>

</div>
</body>
</html>

原文链接：https://blog.csdn.net/weixin_60265082/article/details/121990426