Ajax Bootstrap列表动态渲染数据及点击事件，数据筛选渲染表格

1 效果图

点击后点击隐藏同级元素，再次点击恢复：

点击数据后，表格重新ajax获取筛选数据，再次渲染效果图：

原始表

点击后：

2 代码

  $.each(data.sideBar["Data Type"],function (key,value){//获取Map类型
                $('<a class="list-group-item dataType"  ><span class="badge">'+value+'</span>'+key+'</a>').appendTo($('#data_type'));
            })

    var timer ;//定时器
    var wait = 0 ; //等待时间
    var db_datatype='';
    $('.dataType').each(function (){//class元素点击事件
        $(this).click(function (){
            db_datatype = event.currentTarget.childNodes[1].data;//获取当前点击元素数据
            event.currentTarget.style.backgroundColor = '#D9D9D9';
            onclick();
            $(this).siblings().hide();//同级元素隐藏
            $(this).click(function (){//再次点击同级元素恢复显示
                event.currentTarget.style.backgroundColor = 'white';
                $(this).siblings().show();
            })
        })

    })

   
//原理是用的防抖的原理，但是不能立即执行，有点拉跨，先试试，会有更好的优化办法
    function onclick(){
        wait+=800;//设置每个列表点击时间，若想筛选单个数据在bootstrapTable表示，即点击一次。若想筛选多个数据，则在时间范围内连点。
        if (wait==4000){
            wait=0;
        }
        if(timer){
            clearTimeout(timer);
        }
        timer=setTimeout(()=>{
            // $('example').bootstrapTable().empty();
            $.ajax({
                type:"POST",
                url:"url?dataType="+db_datatype,
                // contentType:'application/json',
                async:false,
                cache: false,
                dataType:"json",
                beforeSend: function (XMLHttpRequest) {XMLHttpRequest.setRequestHeader("Access-Control-Allow-Origin", "*");},
                success:function (data){
                    db_datatype='';//清空赋值数据
                    // $('#example').bootstrapTable('removeAll');
                    $('#example').bootstrapTable('destroy');//销毁表格，重新渲染

                    $('#example').bootstrapTable({
                        data:data.result,
                        cache: false,
                        pageNumber:1,
                        pagination:'client',
                        pageSize: 25,
                        pageList:[ 20, 50, 100, 200 ],
                        search:true,
                        // search:true,
                        // searchAlign:"left",
                        // sortable: true,
                        columns:[{
                            title:"Sample ID",
                            sortable:true,
                            align : 'center',
                            // width:100,
                            formatter:linkFormatter
                        },{
                            align: "center",
                            sortable:true,
                            title: "Data Type",
                            // width:100,
                        },{
                            align : 'center',
                            sortable:true,
                            title: "Species",
                            // width:140
                        },{

                            align : 'center',
                            sortable:true,
                            title: "Layout",
                            // width:80,
                        },{
                            align : 'center',
                            sortable:true,
                            title: "Organisms",
                            // width:150

                        },{
                            field:"Description",
                            align : 'center',
                            sortable:true,
                            title: "Description",
                            // width:180
                        },{
                            align : 'center',
                            sortable:true,
                            title: "Tissue",
                            // width:100
                        },{
                            align: "center",
                            title: "Region Number",
                            sortable:true,
                            // width:130
                        },{
                            align : 'center',
                            sortable:true,
                            title: "Runs",
                            // width:120
                        }]
                    });
                    $('#example').bootstrapTable('hideLoading');  //取消Loading
                    $('#example').bootstrapTable('hideColumn','Description');

                    function linkFormatter(value,row,index){
                        return "<a href='search/analysis_gene_cell.html?sampleID="+value+"' target='_blank'>"+value+"</a>"
                    }




                }

            })
        },wait)
    }