fastadmin自定义Tab选项卡筛选数据

页面中的全部,在线,离线的筛选为自定义的样式,如何和后台交互呢

前端代码

<section class="flex flex-col sm:flex-row items-start sm:items-center gap-4 mb-6 animate-down delay-5">
        <div class="relative">
            <i class="fas fa-search absolute left-3 top-1/2 -translate-y-1/2 text-sm" style="color: #94A3B8;"></i>
            <input type="text" class="search-box" placeholder="搜索设备名称、编号或患者..." id="searchInput" oninput="filterDevices()" aria-label="搜索设备">
        </div>
        <div class="flex items-center gap-2 flex-wrap filter-row" role="tablist" aria-label="状态筛选">
            <button class="filter-btn active" data-filter="all" data-value="all" role="tab" aria-selected="true">全部</button>
            <button class="filter-btn" data-filter="online" data-value="1" role="tab" aria-selected="false">在线</button>
            <button class="filter-btn" data-filter="offline" data-value="0" role="tab" aria-selected="false">离线</button>
            <!-- <button class="filter-btn" data-filter="warning" data-value="all" role="tab" aria-selected="false">低电量</button> -->
        </div>
    </section>

//筛选
            $(document).on("click", ".filter-btn", function () {
                var value = $(this).data('value');
                console.log(value)
                var options = table.bootstrapTable('getOptions');
                options.pageNumber = 1;
                options.queryParams = function(params){
                    var filter = {};
                    var op= {};
                    if(value != 'all'){
                        filter['is_online'] = value;
                        op['is_online']= "=";
                    }
                    params.filter = JSON.stringify(filter);
                    params.op = JSON.stringify(op);
                    return params
                };
                table.bootstrapTable('refresh',{});
                return false
			});