plotly / dash-table-experiments

NO LONGER SUPPORTED - use https://github.com/plotly/dash-table instead
MIT License
174 stars 57 forks source link

Some Problem in Multi-Page Apps. #19

Closed soloblack closed 6 years ago

soloblack commented 6 years ago
app.layout = html.Div([
    dcc.Location(id='url'),
    html.Div(id='page-content'),
])

index_page = html.Div([
    dcc.Link('a', href='/HLIndex'),
    html.Br(),
    dcc.Link('b', href='/VolFundFace'),
])

@app.callback(Output('page-content', 'children'),
              [Input('url', 'pathname')])
def display_page(pathname):
    print pathname
    if pathname =='/':
        return index_page
    elif pathname == '/VolFundFace':
        return HL_View_VolFundFace.layout_
    elif pathname == '/HLIndex':
        return HL_View_HLIndex.layout
    else:
        return '404'
HL_View_VolFundFace.layout_ = html.Div([
    html.Div([
            html.Div([
                dcc.Dropdown(
                    id='xaxis-column',
                    options=[{'label': i, 'value': i} for i in available_indicators],
                    value=u'资金面'
                ),
            ],
            style={'width': '48%', 'display': 'inline-block'}),
            html.Div([
                dcc.Dropdown(
                    id='yaxis-column',
                    options=[{'label': i, 'value': i} for i in available_indicators],
                    value=u'波动率(20日)'
                ),
            ],style={'width': '48%', 'float': 'right', 'display': 'inline-block'})
        ]),
    dcc.Graph(id='indicator-graphic'),
    dt.DataTable(
        rows=table_data,
        columns=table_columns,
        row_selectable=True,
        filterable=True,
        sortable=True,
        selected_row_indices=[],
        id='datatable-gapminder'
    ),
    html.Div(id='selected-indexes'),
    ], className="container")

I have a Multi-Page Apps routing like this, and in this way the HL_ViewVolFundFace.layout cannot be shown well.

But if i do like this

elif pathname == '/VolFundFace':
        app.layout = HL_View_VolFundFace.layout_

it can shown well

chriddyp commented 6 years ago

@soloblack - See https://community.plot.ly/t/display-tables-in-dash/4707/40?u=chriddyp for a solution and discussion of this.

hscspring commented 6 years ago

I met the same issue..

it works when i used single page, but doesn't when multi-pages...
i used https://github.com/plotly/dash-table-experiments/blob/master/usage.py,
and also with the solution you recommend, but still issues...

i got a response of server, but the page show nothing....

i get it, thanks very much for your code.
it's really cool!


Addtion:

Remember to add html.Div(dt.DataTable(rows=[{}]), style={'display': 'none'} to your app.layout in run.py, for u to run your page correctly.