Flask Pagination链接格式不正确

时间:2016-01-22 17:20:29

标签: python html css flask pagination

我使用分页扩展将Pandas数据帧分解为离散部分。 Pagination.info的格式类似于pagination example,但.links显示为项目符号!

enter image description here

前言我是一名前端新手。

蟒:

@app.route('/')
def show_tables():
    data = pd.read_csv('dbO18_2015.csv',index_col=0)

    # Formatting and preprocessing
    pd.options.display.float_format = '{:20,.2f}'.format
    data['depth']=data['depth'].astype(int)
    data.index +=1

    # will be user input eventually...
    PER_PAGE = 100
    cols = ['lat','lon','depth','temp','sal','d18o','dD','year','month','ref']

    # pagination example
    search = False
    q = request.args.get('q')
    if q:
        search = True
    try:
        page = int(request.args.get('page', 1))
    except ValueError:
        page = 1

    pagination = Pagination(page=page, total=len(data), search=search, record_name='records',per_page=PER_PAGE)

    return render_template('view.html',tables=data[(page-1)*PER_PAGE:page*PER_PAGE][cols].to_html(classes='niceTable'),
      titles = 'D18O',pagination=pagination)

CSS:

body            { font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;}
a, h1, h2       { color: #377ba8; }
h1, h2          { margin: 0; }
h1              { border-bottom: 2px solid #eee; }
h2              { font-size: 1.2em; }


.pagination-page-info {
    padding: .6em;
    padding-left: 0;
    width: 40em;
    margin: .5em;
    margin-left: 0;
    font-size: 12px;
}
.pagination-page-info b {
    color: black;
    background: #6aa6ed;
    padding-left: 2px;
    padding: .1em .25em;
    font-size: 150%;
}

table.dataframe, .dataframe th, .dataframe td {
  border: none;
  border-bottom: 1px solid #C8C8C8;
  border-collapse: collapse;
  text-align:left;
  padding: 10px;
  margin-bottom: 40px;
  font-size: 0.9em;
}

.niceTable th {
    background-color: #6aa6ed;
    color: white;
}

tr:nth-child(odd)       { background-color:#eee; }
tr:nth-child(even)  { background-color:#fff; }
tr:hover            { background-color: #ffff99;}

HTML:

<!doctype html>
<title>Simple tables</title>
<link rel=stylesheet type=text/css href="{{ url_for('static', filename='style.css') }}">
<div class=page>
<h1>Global Seawater Oxygen-18</h1>

<h2>{{titles}}</h2>
{{ pagination.info }}
{{ pagination.links }}
<div class="table-responsive">
    <table class="table table-hover">
        {{ tables|safe }}
    </table>
</div>
{{ pagination.links }}

</div>

1 个答案:

答案 0 :(得分:1)

您需要包含Bootstrap的CSS。