1

d3 で作成した html テーブルがあり、入力ボックスのテキストに基づいて結果をフィルタリングしようとしています。

今私は持っています:

    filterFunc:(toFilter,model)->
    for column in @columns
        if model.get(column)
            if model.get(column).indexOf(toFilter) != -1
                return true
    return false

renderTable:()=>
    @table =    d3.select("#search-results-area").append("table").attr("id",@tableId).attr("class","visualization-panel")
    @thead = @table.append("thead")
    @tbody = @table.append("tbody")
    @input = @table.append("input").attr("id",@inputId).on("keydown",(d)=>
        toFilter = $(@input[0][0]).val() 
        window.setTimeout((()=> 
            toFilter = $(@input[0][0]).val() 
            @rows.filter((d)=>
                    console.log "toFilter"
                    console.log toFilter
                    if @filterFunc(toFilter,d)
                        console.log d
                        return d 
                )

            console.log toFilter
            ),1000)

        )

    @columns = @json["Columns"]
    @initializeSortingFunctionManager(@columns)
    @thead.append("tr").selectAll("th").data(@columns).enter().append("th").text((col)-> return col).on("click",(d)=>@tbody.selectAll("tr").sort(@sortingFunctionManager[d]))
    @tbody.selectAll("tr").attr("class","spacing center-text")
    @renderTableBody()

renderTableBody:()=>
    @rows = @tbody.selectAll("tr").data(@collection.models).enter().append("tr")
    cells = @rows.selectAll("td").data((model)=>
        return @columns.map((column)=>
            return { column : column, val : model.get(column)}
            )
        ).enter().append("td").text((d)=> 
            for column in @columns
                if d.column == column
                    return d.val
        )
    $("#" + @tableId).dataTable({
        "bScrollInfinite" : true,
        "bScrollCollapse" : true,
        "sScrollY" : "80%",
        "sScrollX" : "80%",
        "bFilter" : false,
        "bInfo" : false

    })

テーブルが再レンダリングされ、フィルター関数の条件を満たす行のみが表示されるようにするにはどうすればよいですか?

4

1 に答える 1