前端使用js模糊搜索

最新推荐文章于 2025-09-24 08:44:09 发布

原创最新推荐文章于 2025-09-24 08:44:09 发布 · 276 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#js #layui

运维同时被 2 个专栏收录

12 篇文章

订阅专栏

html

1 篇文章

订阅专栏

该博客介绍了如何使用layui前端UI框架实现数据表格的搜索和刷新功能。通过监听搜索框的输入事件，实现了按指定列进行搜索，并在回车或点击搜索按钮时调整返回数据的数量。同时，提供了刷新按钮来重新加载表格数据。代码中展示了layui的table、layer和form模块的使用，以及如何处理和展示数据。

成品

4手机端

前端UI使用layui的数据表格，代码如下

    function load(){
        var table = layui.table;
        var layer = layui.layer;
        var form = layui.form;
        var $ = layui.$;
        var cacheData = []; //列表缓存数据
        var tempData = []; //搜索出来的数据
        var secols = ['channelName', 'description', 'idName', 'urls']; //只搜索指定列,默认搜索台号列
		//var secols = ['channelName', 'urls']; //手机端使用，只搜索指定列
        table.render({
            elem: '#demo'
            , id: 'demoid'
            , url: '/api/getchsOfStatus?status=-1&allchs=' + $("#allshow").prop("checked")
            , method: 'get'
            , limit: 30
            , page: true
            , cols: [[
                { type: 'numbers' }
                , { field: 'channelId', title: '台号', width: 54, sort: true }
                , { field: 'channelName', title: '频道名', align: 'left', width: 200, sort: true }
                , { field: 'duration', title: '持续', sort: true, align: 'left', width: 100, templet: '<div>{{ SecFormat(d.duration)}}</div>' }
                , { field: 'bitRate', title: '码率', align: 'left', width: 60, sort: true }
                , { field: 'transCodeEnable', title: '⇅', align: 'left', sort: true, width: 26, templet: '<div>{{ CodecFormat(d)}}</div>' }
                , { field: 'platform', title: '', align: 'left', width: 26, templet: '<div>{{ PlatFormat(d.platform)}}</div>' }
                , { field: 'streamCodec', title: '格式', align: 'left', width: 180 }
                , { field: 'description', title: '备注', align: 'left', width: 160 }
                , { field: 'idName', title: '频道ID', align: 'left', width: 80 }
                , { field: 'urls', title: 'URls', align: 'left', templet: '<div>{{ UrlsFormat(d)}}</div>' }
                , { fixed: 'right', title: '操作', width: 100, toolbar: '#barDemo' }
            ]]
            , done: function (d) {
                $('#channeltotalNum').text("频道数：" + d.count);
                cacheTable = this;
                if (this.url.length > 5) {
                    cacheData = table.cache['demoid'];
                    var j = 0;
                    for (var i = 0; i < cacheData.length; i++) {
                        if (cacheData[i].status == 0) {
                            j++;
                        }
                    }
                    $('#offNum').text(j);
                }
            }
        });
        //搜索框输入,默认返回20条，回车键返回100条，点击搜索按钮返回全部
        $("#s_title").on('keyup', function (event) {
            var demoReload = $('#s_title').val();
            //keyCode=13是回车键
            if (event.keyCode === 13) {
                Search(demoReload, 100);
            } else {
                Search(demoReload, 20);
            }
        });
        //点击搜索
        $("#mysearch").click(function () {
            var st = $('#s_title').val();
            if (st.length > 0) {
                Search(st, 1000);
            }
        });
        //刷新
        $("#myrefresh").click(function () {
            Tbreload(false);
        });
        //搜索
        function Search(value, num) {
            tempData = [];//清空临时数据
            if (value) {
                if (cacheData.length > 0) {
                     if (/^\d+$/.test(value)) {
                    for (index = 0; index < cacheData.length; index++) {
                        if (String(cacheData[index]["channelId"]).indexOf(value) == 0) {
                            tempData.push(cacheData[index]);
                            if (tempData.length >= num) {
                                break;
                            }
                        }
                    }
                }
                else {
                    value = "^.*?" + value.trim().toLowerCase() + ".*?$";
                    let re = new RegExp(value.replace(" ", ".*?"));
                    let str = '';
                    for (index = 0; index < cacheData.length; index++) {
                        for (j = 0; j < secols.length; j++) {
                            str = String(cacheData[index][secols[j]]).toLowerCase();
                            if (re.test(str)) {
                                tempData.push(cacheData[index]);
                                break;
                            }
                        }
                        if (tempData.length >= num) {
                            break;
                        }
                    }
                }
            }
            } else {
                tempData = cacheData;
            }
            Tbreload(true);
        }
        //表格重新载入数据
        function Tbreload(isCache) {
            if (isCache) {
                table.reload('demoid', {
                    page: { curr: 1 }
                    , url: ''
                    , data: tempData
                });
            } else {
                table.reload('demoid', { url: '/api/getchsOfStatus?status=-1&allchs=' + $("#allshow").prop("checked") });
            }
        }
}