Python Flask SQLAlchemy Pagination - Datatable bootstap
#app.py
from flask import Flask, render_template, flash, redirect, url_for, request
from flask_sqlalchemy import SQLAlchemy
app = Flask(__name__)
app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///blog.db'
app.config['SECRET_KEY'] = 'cairocoders-ednalan'
db = SQLAlchemy(app)
class Employees(db.Model):
id = db.Column(db.Integer, primary_key=True)
fullname = db.Column(db.String(150))
position = db.Column(db.String(150))
office = db.Column(db.String(150))
age = db.Column(db.Integer)
startdate = db.Column(db.String(150))
salary = db.Column(db.String(150))
@app.route('/employees/')
def employees(page_num):
employees = Employees.query.paginate(per_page=5, page=page_num, error_out=True)
return render_template('index.html', employees=employees)
if __name__ == '__main__':
app.run(debug=True)
//index.hmtl
<html>
<head>
<title>Python Flask SQLAlchemy Pagination</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<p><h2>Python Flask SQLAlchemy Pagination - Datatable bootstap</h2> </p>
<table id="example" class="table table-striped table-bordered" style="width:100%">
<thead>
<tr>
<th><input type="checkbox" onclick="checkAll(this)"></th>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
{% for employee in employees.items %}
<tr>
<td><input type="checkbox" name=""></td>
<td>{{ employee.fullname}}</td>
<td>{{ employee.position}}</td>
<td>{{ employee.office}}</td>
<td>{{ employee.age}}</td>
<td>{{ employee.startdate}}</td>
<td>{{ employee.salary}}</td>
</tr>
{% endfor %}
</tbody>
<tfoot>
<tr>
<th></th>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
</table>
</div>
<ul class="pagination">
{% if employees.has_prev %}
<li class="page-item"><a class="page-link" href="{{ url_for('employees', page_num=employees.prev_num) }}">Previous</a></li>
{% else %}
<li class="page-item disabled"><span class="page-link">Previous</span>
{% endif %}
</li>
{% for page in employees.iter_pages(left_edge=3, right_edge=3) %}
{% if page %}
<li class="page-item"><a class="page-link" href="{{ url_for('employees', page_num=page) }}">{{ page }}</a></li>
{% else %}
<li class="page-item disabled" id="example_ellipsis"><a href="#" class="page-link">…</a></li>
{% endif %}
{% endfor %}
{% if employees.has_next %}
<li class="page-item"><a class="page-link" href="{{ url_for('employees', page_num=employees.next_num) }}">Next</a></li>
{% else %}
<li class="page-item disabled"><span class="page-link">Next</span>
{% endif %}
</ul>
</div>
<style>
table{
width:100%;
}
#example_filter{
float:right;
}
#example_paginate{
float:right;
}
label {
display: inline-flex;
margin-bottom: .5rem;
margin-top: .5rem;
}
.page-item.disabled .page-link {
color: #6c757d;
pointer-events: none;
cursor: auto;
background-color: #fff;
border-color: #dee2e6;
}
</style>
<script>
function checkAll(bx) {
var cbs = document.getElementsByTagName('input');
for(var i=0; i < cbs.length; i++) {
if(cbs[i].type == 'checkbox') {
cbs[i].checked = bx.checked;
}
}
}
</script>
</body>
</html>
