Datatables插件的使用（从前台到后台完整流程）

下载并引入Datatables插件Datatables 中文网http://datatables.club/

<script src="../static/jquery/dist/jquery.min.js">script>
<script src="../static/js/jquery.dataTables.min.js">script>
<link rel="stylesheet" href="../static/css/dataTables.bootstrap.min.css">

前端中使用

<div class="box-body">
    <table class="table table-bordered table-striped table-vcenter"       style="width:100%"></table>
</div>
 
<script>
    var columns = [
        {
            title: 'name',
            target: 0,
            data: function (item) {
                return item.name;
            }
        },
        {
            title: 'age',
            target: 1,
            data: function (item) {
                return item.age;
            }
        },
    ];
 
    main.initDataTables($(".table"), {
    "ajax": '127.0.0.1:8000/index/data'
    "columns": columns
        });
    });
</script>

在这里我是使用ajax向后台发送请求获取数据。columns表示每列展示的数据。前端就处理完毕，接下来处理后端请求数据即可。

后端

需要注意的是，后端我是在flask框架中进行编写的。可以使用datatables模块快速对数据进行处理

安装datatables

pip install sqlalchemy-datatables

简单使用

from datatables import ColumnDT, DataTables
from flask import  jsonify, request
from .models.user import User    # 模型
@blueprint.route('/index/data')
def index_data():
    columns = [
        ColumnDT(User.name, mData='name'),
        ColumnDT(User.age, mData='age'),
    ]   # 表示每列展示的数据
    query = db.session.query().select_from(User).group_by(User.id)  # 表示数据的来源
    params = request.args.to_dict() # 表示查询的参数
    tables = DataTables(params, query, columns) # 对数据进行处理成表格需要的
    return jsonify(tables.output_result())  # 将处理后的数据输出结果转为json格式并返回

 select_from方法表示需要查询的模型。group_by表示排序

多表查询

• 方法1 outerjoin

from datatables import ColumnDT, DataTables
from flask import jsonify, request
from .models.user import User    # 模型
from .models.category import Category    # 模型
 
@blueprint.route('/index/data')
def index_data():
    columns = [
        ColumnDT(User.name, mData='name'),
        ColumnDT(User.age, mData='age'),
        ColumnDT(Category.name, mData='gender'),
    ]  # 表示每列展示的数据
    query = db.session.query().select_from(User)\
        .outerjoin(Category, Category.id == User.id).group_by(User.id)  # 表示数据的来源
    params = request.args.to_dict()  # 表示查询的参数
    tables = DataTables(params, query, columns)  # 对数据进行处理成表格需要的
    return jsonify(tables.output_result())  # 将处理后的数据输出结果转为json格式并返回

outerjoin表示连接查询。

• 方法2 执行查询表达式

from datatables import ColumnDT, DataTables
from flask import jsonify, request
from sqlalchemy import distinct, func
from .models.user import User
from .models.category import Category
 
 
@blueprint.route('/index/data')
def index_data():
    columns = [
        ColumnDT(User.name, mData='name'),
        ColumnDT(User.age, mData='age'),
        ColumnDT(func.group_concat(distinct(Category.query.filter_by(id=User.id)[0].name)),
                 mData='gender'),
    ]  # 表示每列展示的数据
    query = db.session.query().select_from(User).group_by(User.id) # 表示数据的来源
    params = request.args.to_dict()  # 表示查询的参数
    tables = DataTables(params, query, columns)  # 对数据进行处理成表格需要的
    return jsonify(tables.output_result())  # 将处理后的数据输出结果转为json格式并返回

如果在查询过程中遇到了多个模型名相同的情况时，则可以使用flask模块中的aliased方法，表示给这个模型起一个别名。

多对多关系查询

由于在flask中，多对多关系是使用到的中间表的方法实现的，所以在使用中也依次连接即可

from datatables import ColumnDT, DataTables
from flask import jsonify, request
from sqlalchemy import distinct, func
from .models.user import User
from .models.testItemsApparatus import TestItemsApparatus
from .models.apparatus import Apparatus
 
 
@blueprint.route('/index/data')
def index_data():
    columns = [
        ColumnDT(User.name, mData='name'),
        ColumnDT(User.age, mData='age'),
        ColumnDT(func.group_concat(distinct(Apparatus.name)), global_search=False, mData='gender'),
        ColumnDT(Apparatus.name),  # 只用于过滤
    ]  # 表示每列展示的数据
    query = db.session.query().select_from(User).outerjoin(TestItemsApparatus).outerjoin(Apparatus).group_by(
        User.id)  # 表示数据的来源
    params = request.args.to_dict()  # 表示查询的参数
    tables = DataTables(params, query, columns)  # 对数据进行处理成表格需要的
    return jsonify(tables.output_result())  # 将处理后的数据输出结果转为json格式并返回

global_search=False参数表示该字段在搜索中不会使用到该字段，默认为True