我使用分页扩展将Pandas数据帧分解为离散部分。 Pagination.info的格式类似于pagination example,但.links显示为项目符号!
前言我是一名前端新手。
蟒:
@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>
答案 0 :(得分:1)
您需要包含Bootstrap的CSS。