layui table隐藏某行数据，前端过滤数据

##前端界面效果图

前端代码

<style type="text/css">
    .nav-tabs li {
        width: 15%;
        text-align: center;
    }

    .ui.button {
        cursor: pointer;
        display: inline-block;
        min-height: 1em;
        outline: 0;
        border: none;
        vertical-align: baseline;
        background: #E0E1E2;
        color: rgba(0,0,0,.6);
        font-family: 'Microsoft Yahei',Lato,'Helvetica Neue',Arial,Helvetica,sans-serif;
        margin: 0 .25em 0 0;
        padding: .78571429em 1.5em;
        text-transform: none;
        text-shadow: none;
        font-weight: 700;
        line-height: 1em;
        font-style: normal;
        text-align: center;
        text-decoration: none;
        border-radius: .28571429rem;
        box-shadow: 0 0 0 1px transparent inset, 0 0 0 0 rgba(34,36,38,.15) inset;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        -webkit-transition: opacity .1s ease,background-color .1s ease,color .1s ease,box-shadow .1s ease,background .1s ease;
        transition: opacity .1s ease,background-color .1s ease,color .1s ease,box-shadow .1s ease,background .1s ease;
        will-change: '';
        -webkit-tap-highlight-color: transparent;
    }

    .remove.circle.icon {
        color: #39f;
        position: absolute;
        right: 18px;
        top: 18px;
        font-size: 18px;
        cursor: pointer;
    }

    .ft {
        border-top: 1px dashed #ccc;
        padding: 10px 25px;
    }


    .btnCode {
        padding: 5px !important;
        font-size: 12px !important;
    }

    .orderTimes {
        margin-left: 20px;
    }

    .waitReplay {
        text-align: right;
        margin-right: 10px;
    }

        .waitReplay p {
            margin-top: 5px;
            color: #ff7675;
        }

    .t-condition-detail {
        margin: 14px 0;
        color: #666;
    }

        .t-condition-detail h3 {
            background-color: #eee;
            padding: 10px 20px;
            font-size: 16px;
            font-weight: 400;
            margin: 0;
        }

        .t-condition-detail .content {
            padding: 12px 0;
        }

        .t-condition-detail ul li {
            border: 1px solid #ccc;
            position: relative;
            margin-bottom: 20px;
            margin-right: 18px;
        }

            .t-condition-detail ul li .title {
                color: #777;
                padding: 16px 20px;
                background-color: #eee;
            }

        .t-condition-detail .content {
            margin: 0 20px;
        }

        .t-condition-detail ul li .orderName {
            width: 84px;
            height: 84px;
            background-color: #ff9b9b;
            float: left;
            color: #fff;
            border-radius: 50%;
            padding: 4px;
            margin: 25px 0 0 16px;
        }

        .t-condition-detail ul li .cancel {
            width: 89px;
            height: 89px;
            background-color: #ff9b9b;
            float: left;
            color: #fff;
            border-radius: 50%;
            padding: 4px;
            margin: 25px 0 0 16px;
        }

            .t-condition-detail ul li .cancel span {
                width: 100%;
                height: 100%;
                background-color: #fa4e4e;
                border-radius: 50%;
                display: block;
                text-align: center;
                font-size: 14px;
            }

            .t-condition-detail ul li .cancel strong {
                font-size: 22px;
            }

            .t-condition-detail ul li .cancel .time_all {
                line-height: 80px;
            }

        .t-condition-detail ul li .orderName span {
            width: 100%;
            height: 100%;
            background-color: #fa4e4e;
            border-radius: 50%;
            display: block;
            text-align: center;
            font-size: 14px;
        }

        .t-condition-detail ul li .orderName strong {
            font-size: 22px;
        }

    .right {
        margin: 10px 0 0 136px;
        position: relative;
    }

    .tag-info-gray, .tag-info-orange {
        background-color: #fdeee3;
        padding: 0 10px;
        border-radius: 20px;
        color: #a6a4a3;
    }

    .tag-info-gray {
        background-color: #e8e8e8;
    }

    .orderState {
        margin-left: 26px;
        padding: 2px 5px;
        border: 1px solid #db2828;
        color: #db2828;
        border-radius: 16px;
        font-size: 12px;
    }

    .orderState_Delivery {
        margin-left: 26px;
        padding: 2px 5px;
        border: 1px solid #db2828;
        color: #db2828;
        border-radius: 16px;
        font-size: 12px;
    }

    .ui.right {
        margin: 50px 0;
    }

    .grayFont {
        color: #dedede !important;
    }

    .orange {
        color: #f60 !important;
    }

    .replay-msg p {
        text-align: right;
    }

    .ui.form textarea:not([rows]) {
        height: 8em;
    }

    .replay-msg {
        margin: 0 80px 0 110px;
    }

    .replayBtn {
        background-color: #2a96ff !important;
        padding: 10px 40px !important;
    }

    .replayBtns {
        background-color: #009688 !important;
        margin-left: 12px !important;
    }

    .fixedBtn {
        position: absolute;
        right: -6px;
        bottom: 0;
    }

        .fixedBtn a {
            margin-left: 12px;
        }

    .disabled {
        background-color: #ccc !important;
        color: #666 !important;
    }

    .right .comment {
        margin-bottom: 12px;
    }

        .right .comment .info {
            float: right;
            width: auto;
        }

            .right .comment .info strong {
                color: #666;
            }

        .right .comment span {
            width: 80px;
            display: inline-block;
            color: #999;
        }

    .ui.tabular.menu {
        border-color: #2a96ff;
        border-bottom-width: 2px;
    }

    .info-mag {
        position: absolute;
        right: 20px;
    }

        .info-mag a {
            margin: 0 10px;
            position: relative;
        }

    .circle-info {
        width: 8px;
        height: 8px;
        background-color: red;
        border-radius: 50%;
        display: block;
        position: absolute;
        right: 0;
        top: 0;
    }

    .pick-tickets {
        width: 100%;
        padding: 0 20px;
        height: 33px;
    }

        .pick-tickets .left {
            float: left;
            margin-top: 12px;
        }

        .pick-tickets .right {
            float: right;
        }

    .printBtn {
        color: #333;
        margin-left: 10px;
    }

        .printBtn:hover {
            color: #2a96ff;
            text-decoration: underline;
        }

    .ui.form .field {
        margin-bottom: 0;
    }

    .redColor {
        color: #db2828 !important;
    }

    .inlineRadio {
        display: inline-block;
        vertical-align: middle;
        padding-right: 10px;
    }

        .inlineRadio input {
            margin-right: 5px;
            display: inline-block;
            vertical-align: middle;
        }

    .redBg {
        background-color: #ff9b9b !important;
    }

        .redBg span {
            background-color: #fa4e4e !important;
        }

    .orangeBg {
        background-color: #f26202 !important;
    }

    .greenBg {
        background-color: #21ba45 !important;
    }

    .yellowBg {
        background-color: #FFD700 !important;
    }

    .grayBg {
        background-color: #bbb !important;
    }

        .grayBg span {
            background-color: #999 !important;
        }

    .none-data {
        width: 100%;
        height: 400px;
        line-height: 400px;
        text-align: center;
    }

        .none-data img {
            vertical-align: middle;
        }

    .Verification-box {
        height: 76px;
        padding-top: 20px;
    }

        .Verification-box .ui.input {
            width: 275px;
        }

        .Verification-box .verificationCode {
            background-color: #2a96ff;
            margin-left: 20px;
            padding: 11px 20px;
        }

        .Verification-box .errorMsg {
            color: #db2828;
            padding-top: 5px;
        }

    .verificationAlert .result_b {
        padding-bottom: 20px;
        border-bottom: 1px solid #dfdfdf;
        text-align: center;
        margin-bottom: 20px;
    }

        .verificationAlert .result_b .check.circle.icon {
            font-size: 56px;
            color: #21ba45;
        }

        .verificationAlert .result_b .result_t {
            font-size: 20px;
            margin: 6px 0;
        }

        .verificationAlert .result_b .tip {
            font-size: 14px;
            color: #666;
        }

    .verificationAlert .succ_result {
        padding: 0 20px 30px;
    }

        .verificationAlert .succ_result p {
            display: inline-block;
            vertical-align: top;
            width: 90%;
        }

            .verificationAlert .succ_result p span {
                padding-right: 25px;
                line-height: 25px;
            }

    .title button {
        cursor: pointer;
        display: inline-block;
        min-height: 1em;
        outline: 0;
        border: none;
        vertical-align: baseline;
        background: #E0E1E2;
        color: rgba(0,0,0,.6);
        font-family: 'Microsoft Yahei',Lato,'Helvetica Neue',Arial,Helvetica,sans-serif;
        margin: 0 .25em 0 0;
        padding: .78571429em 1.5em;
        text-transform: none;
        text-shadow: none;
        font-weight: 700;
        line-height: 1em;
        font-style: normal;
        text-align: center;
        text-decoration: none;
        border-radius: .28571429rem;
        box-shadow: 0 0 0 1px transparent inset, 0 0 0 0 rgba(34,36,38,.15) inset;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        -webkit-transition: opacity .1s ease,background-color .1s ease,color .1s ease,box-shadow .1s ease,background .1s ease;
        transition: opacity .1s ease,background-color .1s ease,color .1s ease,box-shadow .1s ease,background .1s ease;
        will-change: '';
        -webkit-tap-highlight-color: transparent;
        box-shadow: 0 0 0 1px #2185D0 inset !important;
        color: #2185D0 !important;
        background: 0 0 !important;
        font-weight: 400;
        border-radius: .28571429rem;
        text-transform: none;
        text-shadow: none !important;
        padding: 5px !important;
        font-size: 12px !important;
    }

    .blue {
        color: #fff !important;
    }

    .t-condition-detail ul li .orderName .time_all {
        line-height: 80px;
    }

    .copy {
        cursor: pointer;
    }

    .Complaint_dd {
        float: right;
        background: 0 0;
        color: #4183C4;
        text-decoration: none;
        cursor: pointer;
        display: inline-block;
    }

    .Rejection {
        color: #4183C4;
        cursor: pointer;
    }

    .BeginWithEndTime {
        float: left;
    }

    .search-bottom {
        margin-left: 60px;
    }

    .order-warn {
        margin: 10px 20px;
        padding: 10px 20px;
        background: rgba(247,108,108,.1);
        border: 1px solid rgba(247,108,108,.2);
        border-radius: 2px;
        font-size: 14px;
        line-height: 1.42857143;
    }

    .jd_healthy {
        color: #6495ED;
    }


    .jindong {
        color: red;
    }

    .jindong_centerstore {
        color: #009688;
    }

    .pinduoduo {
        color: red;
    }

    .ali_health {
        color: green;
    }

    .meituan {
        color: #F89800;
    }

    .ele {
        color: #007AFF;
    }

    .youzan {
        color: #8B0000;
    }

    .grid-demo-bg1 {
        background-color: #576173 !important;
    }

    .order_count dd {
        float: left;
        margin-left: 20px;
    }
</style>
<form class="layui-form" action="">
    <div class="layui-form-item grid-demo-bg1">
        <div class="layui-row">
            <div class="layui-col-xs6 layui-col-md4">
                <div class="grid-demo grid-demo-bg1">
                    <label class="layui-form-label">状态</label>
                    <div class="layui-input-inline" style="color:black" id="storename">
                        <select name="quiz" lay-filter="college">
                            <option value="">全部</option>
                            <option value="1">已回复</option>
                            <option value="2">未回复</option>
                        </select>
                    </div>
                </div>
                <div style="color:white !important;margin-left: 20px;">
                    <dl class="order_count">
                        @*<dd>
                    售后单数：<span class="totalordercount" style="font-size: 20px;line-height: 0px;">0</span>
                </dd>*@
                    </dl>
                    @*<div class="layui-btn layui-btn-normal testprint" onclick="printpage('http://localhost:56181/orders/export/printOrder?orderIds=65166410655024826&timestamp=1558666684&tempsign=30f8e2b4d1cbc2f4e6fb78bdca61f13e', '65166410655024826');">打印</div>*@
                </div>
            </div>
            <div class="layui-col-xs6 layui-col-md8">
                <div class="grid-demo grid-demo-bg1">
                    <div class="layui-input-block">
                        <input type="button" class="layui-btn layui-btn-normal" value="搜索" style="float: right;background-color: #009688 !important;" id="search_orderid" />
                        <input type="text" name="title" lay-verify="required" autocomplete="off"id="search" placeholder="搜索客户名称、订单号、客户手机号" class="layui-input searchorderid" style="width: 400px;float: right;">
                     
                    </div>
                </div>
            </div>
        </div>
    </div>
</form>
<div class="layui-tab layui-tab-card" lay-filter="ordertab">

    <table class="layui-hide" id="demo" lay-filter="test"></table>
</div>

页面脚本代码

<script type="text/html" id="barDemo">
//判断后面的回复按钮是否显示
    {{# if(d.Operator == "暂无"){ }}
    <a class="layui-btn layui-btn-primary layui-btn-xs " id="reply" lay-event="reply">回复</a>
    {{# }else{ }}
            已回复
    {{# } }}

    @*<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>
<script>
    layui.use(['laydate', 'laypage', 'layer', 'table', 'carousel', 'upload', 'element', 'slider'], function () {
        var laydate = layui.laydate //日期
            , laypage = layui.laypage //分页
            , layer = layui.layer //弹层
            , table = layui.table //表格
            , carousel = layui.carousel //轮播
            , upload = layui.upload //上传
            , element = layui.element //元素操作
            , slider = layui.slider //滑块
            , $ = layui.$
        var form = layui.form;
        var condition = "ALL";
        var search = ""; 
        //窗体加载时执行
        layer.ready(function () {
           
        });
        form.on('select(college)', function (data) {
            var message = $("select[name=quiz").val();
            if (message == "1") {
                condition = "已处理"
                table.reload('detailpage');
            } else if (message == "2") {
                condition = "暂无"
                table.reload('detailpage');
            } else {
                condition = "ALL"
                table.reload('detailpage');
            }
        });
        $("#search_orderid").click(function () {
             search = $("#search").val();
            table.reload('detailpage');
        });
        //监听Tab切换
        element.on('tab(demo)', function (data) {
            layer.tips('切换了 ' + data.index + '：' + this.innerHTML, this, {
                tips: 1
            });
        });

        //执行一个 table 实例
        table.render({
            elem: '#demo'
            , height: 420
            , url: '请求催单信息的接口' //数据接口
            , id: "detailpage"
            , title: '催单数据'
            , page: true //开启分页
            , toolbar: 'default' //开启工具栏，此处显示默认图标，可以自定义模板，详见文档
            , totalRow: false //开启合计行
            , cols: [[ //表头
                { type: 'checkbox', fixed: 'left' }
                , { field: 'orderid', title: '订单id', sort: true, fixed: 'left', style: "text-align:center", align: "center"}
                , { field: 'CuiTime', title: '催单时间', sort: true, style: "text-align:center", align: "center" }
                , { field: 'StoreName', title: '商店名称', style: "text-align:center", align: "center" }
                , { field: 'Delivery', title: '配送平台',  style: "text-align:center", align: "center" }
                , { field: 'UserName', title: '联系人名称',  style: "text-align:center", align: "center"}
                , { field: 'Tel', title: '联系电话',  style: "text-align:center", align: "center" }
                , { field: 'rid', title: '催单id',  style: "text-align:center", align: "center", hide: true }
                , { field: 'Operator', title: '操作人员',  style: "text-align:center", align: "center", hide: true  }
                , { field: 'Recovery_time', title: '操作时间',  sort: true, style: "text-align:center", align: "center", hide: true   }
                , { field: 'ReplyContent', title: '回复内容', sort: true, style: "text-align:center", align: "center", hide: true  }
                , { fixed: 'right', title: '操作',  align: 'center', toolbar: '#barDemo' }
            ]]
            , done: function (res, curr, count) {
                console.log(res.data);

                var that = this.elem.next();
                console.log(this.elem)
                console.log(that)
                res.data.forEach(function (item, index) {
                //下拉框选择“全部”
                    if (condition === "ALL") {
                        //隐藏操作列
                        $("[data-field='right']").removeClass('layui-hide');
                        //操作人员信息
                        $("[data-field='Operator']").addClass('layui-hide');
                        $("[data-field='Recovery_time']").addClass('layui-hide');
                        $("[data-field='ReplyContent']").addClass('layui-hide');
                        if (search != "") {
                        //判断table的某列内容中是否包含搜索框输入的内容
                            if (item.orderid.search(search) == -1 && item.Tel.search(search) == -1 && item.UserName.search(search) == -1 ) {
                                var tr = that.find(".layui-table-box tbody tr[data-index='" + index + "']");
                                tr.css("display", "none");
                                tr.find(".laytable-cell-1-0-9").css("display", "none");
                            }
                        }//
                    } else if (condition === "暂无") {
                        //隐藏操作列
                        $("[data-field='right']").removeClass('layui-hide');
                        //操作人员信息
                        $("[data-field='Operator']").addClass('layui-hide');
                        $("[data-field='Recovery_time']").addClass('layui-hide');
                        $("[data-field='ReplyContent']").addClass('layui-hide');
                        if (search != "") {
                            if (item.orderid.search(search) == -1 && item.Tel.search(search) == -1 && item.UserName.search(search) == -1) {
                                var tr = that.find(".layui-table-box tbody tr[data-index='" + index + "']");
                                tr.css("display", "none");
                                tr.find(".laytable-cell-1-0-9").css("display", "none");
                            }
                        }
                        //如果操作人员列不等于“暂无”就隐藏，也就是说显示已经回复过的数据
                        if (item.Operator != "暂无") {
                            var tr = that.find(".layui-table-box tbody tr[data-index='" + index + "']");
                            tr.css("display", "none");
                            tr.find(".laytable-cell-1-0-9").css("display", "none");
                        }
                    } else if (condition === "已处理") {
                        
                        if (search != "") {
                            if (item.orderid.search(search) == -1 && item.Tel.search(search) == -1 && item.UserName.search(search) == -1) {
                            //隐藏此行数据
                                var tr = that.find(".layui-table-box tbody tr[data-index='" + index + "']");
                                tr.css("display", "none");
                                tr.find(".laytable-cell-1-0-9").css("display", "none");
                            }
                        }
                        if (item.Operator === "暂无") {
                            var tr = that.find(".layui-table-box tbody tr[data-index='" + index + "']");
                            tr.css("display", "none");
                            tr.find(".laytable-cell-1-0-9").css("display", "none");
                        }
                    }
                });
            }
        });

        //监听头工具栏事件
        table.on('toolbar(test)', function (obj) {
            var checkStatus = table.checkStatus(obj.config.id)
                , data = checkStatus.data; //获取选中的数据
            switch (obj.event) {
                case 'add':
                    layer.msg('添加');
                    break;
                case 'update':
                    if (data.length === 0) {
                        layer.msg('请选择一行');
                    } else if (data.length > 1) {
                        layer.msg('只能同时编辑一个');
                    } else {
                        layer.alert('编辑 [id]：' + checkStatus.data[0].id);
                    }
                    break;
                case 'delete':
                    if (data.length === 0) {
                        layer.msg('请选择一行');
                    } else {
                        layer.msg('删除');
                    }
                    break;
            };
        });
//回复方法
        function Reply(data, replyType, reolyContent) {
            var nr = {
                delivery: data.Delivery,
                order_id: data.orderid,
                remind_id: data.rid,
                reply_id: replyType,
                reply_content: reolyContent,
            }
            $.get("/order/get_Reminder_reply", nr, function (rel) {
                layer.msg(rel);
            });
        }
        //监听行工具事件
        table.on('tool(test)', function (obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            var data = obj.data //获得当前行数据
                , layEvent = obj.event; //获得 lay-event 对应的值
            if (layEvent === 'reply') {
            //弹出框html
                var div = '<form class="layui-form" action="">'+
                    '<div class="layui-form-item">'+
                       ' <div class="layui-inline">'+
                           ' <label class="layui-form-label">配送状态</label>'+
                           ' <div class="layui-input-inline" style="width: 240px">'+
                             ' <select name="zt" id="LX" >'+
                                   ' <option value="">请选择</option>'+
                                    '<option value="1">商品准备配送，请耐心等候！</option>'+
                                   ' <option value="2">送货员已上路，马上就到啦！</option>'+
                                    '<option value="3">天气恶劣，送货员狂奔中！</option>'+
                                    '<option value="4">其他</option>'+
                                '</select>'+
                           ' </div>'+
                       ' </div>'+
                    '</div>'+
                   ' <div class="layui-form-item layui-form-text">'+
                       ' <label class="layui-form-label">回复内容</label>'+
                        '<div class="layui-input-block">'+
                           ' <textarea placeholder="请输入内容" class="layui-textarea" Id="NR"></textarea>'+
                       ' </div>'+
                    '</div>'+
               ' </form>'
                layer.open({
                    title: '回复催单', //头显示名称
                    type: 1, //Page层类型
                    area: ['450px', '300px'], //宽高
                    content: div, //弹窗内的html
                    success: function (layero, index) { form.render('select');},
                    btn: ['发送'] //按钮，可以给多个，按钮还有种类以及排列方式，可在layer官方文档中找到
                    , yes: function (index, layero) { //第一个按钮的回调函数
                        var txtReason = $('#receiveNum').val(); //可以获取到id为receiveNum的input框内输入的内容
                         //可以获取到弹出层中id为dataType的select框的选中option的value
                        //var sel =$("#dataType option:selected").text(); //可以获取到弹出层中id为dataType的select框的选中option的文本
                       
                        var replyType = $("select[name=zt").val();
                        if (replyType == "") {
                                layer.msg('请选择配送状态');
                            }
                            else {
                            var reolyContent = $("#NR").val();
                                Reply(data,replyType, reolyContent);
                            }
                    }
                });
            } else if (layEvent === 'del') {
                layer.confirm('真的删除行么', function (index) {
                    obj.del(); //删除对应行（tr）的DOM结构
                    layer.close(index);
                    //向服务端发送删除指令
                });
            } else if (layEvent === 'edit') {
                layer.msg('编辑操作');
            }
        });
        //分页
        laypage.render({
            elem: 'pageDemo' //分页容器的id
            , count: 100 //总页数
            , skin: '#1E9FFF' //自定义选中色值
            //,skip: true //开启跳页
            , jump: function (obj, first) {
                if (!first) {
                    layer.msg('第' + obj.curr + '页', { offset: 'b' });
                }
            }
        });
    })
</script>