首页 > 解决方案 > 在 Dash 中使用下拉框过滤数据表

问题描述

我有一个大数据框,我已经将它变成了一个可以与回调一起使用的数据表。然后我制作了带有过滤选项的下拉框,并制作了一个基于下拉框进行过滤的回调,代码如下:

app.layout = html.Div([
    html.Div(className='Filters', children=[
        dcc.Tabs(id='filters', children=[
            dcc.Tab(label='Control Panel', children=[
                 dcc.Dropdown(
                    id='FromJobdropdown',
                    clearable = False,
                    options = [{'label': i, 'value': i} for i in data['fromJobtitle'].unique()],
                    placeholder = 'Choose a sender job title'
                ),
                 dcc.Dropdown(
                    id='toJobdropdown',
                    clearable = False,
                    options = [{'label': i, 'value': i} for i in data['toJobtitle'].unique()],
                    placeholder = 'Choose a recipient job title'
                ),
                dcc.DatePickerRange(
                    id='date-picker-range',
                    min_date_allowed=date(1998, 11, 12),
                    max_date_allowed=date(2002, 6, 20),
                    initial_visible_month=date(1998, 11, 12),
                    end_date=date(2002, 6, 20)
                ),
                dash_table.DataTable(
                    id='table',
                    columns=[{"name": i, "id": i} for i in data.columns],
                    data=data.to_dict('record'),
                    editable = True,
                )
            ]),
    ]),
])
])


@app.callback(
    Output('table', 'data'),
    [Input('FromJobDropdown','value'),
    Input('ToJobDropdown','value'),
    Input('date-picker-range','start_date'),
    Input('date-picker-range','end_date')]
)
def update_table(FromJob,ToJob,start_time,end_time):
    filtration= ( (data['fromJobtitle'] == FromJob) & 
  (data['toJobtitle'] == ToJob) &
 (data['date'] >= start_time) & 
(data['date']<= end_time))
    filtered_df = data[filtration]
    return filtered_df.to_dict('record')

它应该在您更改下拉框中的单个参数时更新数据表,但我的只是保持静态。即使转到下一页也无济于事。我可以就可能发生的事情寻求帮助吗?

标签: dataframefilterdatatableplotly-dash

解决方案


推荐阅读