BEGIN:

1 JS 和 CSS引用

將js和css檔案下載到本地並引用：

<script src="{{ theme_static('js/jquery-1.8.0.min.js') }}"></script>
<script src="{{ theme_static('js/jquery.dataTables.min.js') }}"></script>

<link rel="stylesheet" href="{{ theme_static('css/dataTables.min.css') }}">

下載地址：

jQuery：

jquery-1.8.0：

連結：https://pan.baidu.com/s/1AzmjF2rs87GN5IQPnMWSjg
提取碼：6xwf

其他版本jQuery：http://www.jq22.com/jquery-info122

jquery.dataTables.min.js:

官網下載：https://datatables.net/

網盤連結：

連結：https://pan.baidu.com/s/1t2r3DjP2yGko5jpCuWkq0A
提取碼：xgp1

jquery.dataTables.min.css:

官網下載：https://datatables.net/

網盤連結：

連結：https://pan.baidu.com/s/1SgxP7l4x_YgVQ1YmClSxhA

或直接引用:

CSS:

//cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css

JS:

//cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js

2 HTML

<table id="example" class="table table-striped table-bordered"></table>

3 JS

<script type="text/javascript" charset="utf-8">
$(document).ready(
 
function () {
 var columns = [{
     title: 'ID',
     target: 0,
     data: function (item) {
         return item.id;
     }
 },{
     title:'使用者名稱',
     target: 1,
     data:function (item) {
         return item.name;
     }
 },{
     title:'建立時間',
     target: 2,
     data: function (item) {
         return item.created_time;
     }
 },{
     title: '操作',
     target: 3,
     data:function (item) {
       return "<td><a href='/admin/user/"+item.id+ " '>編輯</a><td>";
     }
 }];

 var table = $('#example').DataTable({
     "language": {
        url:"{{ theme_static('json/zh_CN.json') }}"
     },
     "processing":true,
     "serverSide":true,
     "ajax":"{{ url_for('admin.users_data') }}",
     "columns":columns
 });

});
</script>

ps: data裡面的item.id中的id是與view.py中mData對應

4 python -flask

安裝datatables

pip install sqlalchemy-datatables

view.py

from flask import Blueprint, request, jsonify
from flask_login import login_required
from ..extensions import db
from ..decorators import admin_required
from ..user import User
from ..utils import render_theme
from datatables import ColumnDT, DataTables

@admin.route('/users')
@login_required
@admin_required
def users():
    return render_theme('admin/users.html', active='users')

@admin.route('/users_data')
@login_required
@admin_required
def users_data():
    """Return server side data."""
    # defining columns
    columns = [
        ColumnDT(User.id, mData='id'),
        ColumnDT(User.name,mData='name'),
        ColumnDT(User.created_time, mData='created_time')
    ]
    # defining the initial query depending on your purpose
    query = db.session.query().select_from(User)
    # GET parameters
    params = request.args.to_dict()
    # instantiating a DataTable for the query and table needed
    rowTable = DataTables(params, query, columns)
    # returns what is needed by DataTable
    return jsonify(rowTable.output_result())

END.