flask利用ajax分页,Flask DataTables后台数据实时传送---分页查询和search过滤

BEGIN:

1 JS 和 CSS引用

将js和css文件下载到本地并引用：

下载地址：

jQuery：

链接：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://pan.baidu.com/s/1SgxP7l4x_YgVQ1YmClSxhA

提取码：dddf

或直接引用:

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

3 JS

$(document).ready(function() {varcolumns=[{

title:'ID',

target:0,

data:function(item) {returnitem.id;

}

},{

title:'用户名',

target:1,

data:function(item) {returnitem.name;

}

},{

title:'创建时间',

target:2,

data:function(item) {returnitem.created_time;

}

},{

title:'操作',

target:3,

data:function(item) {return "

编辑";

}

}];vartable=$('#example').DataTable({"language": {

url:"{{ theme_static('json/zh_CN.json') }}"},"processing":true,"serverSide":true,"ajax":"{{ url_for('admin.users_data') }}","columns":columns

});

});

ps: data里面的item.id中的id是与view.py中mData对应

4 python -flask

安装datatables

pip install sqlalchemy-datatables

view.py

from flask importBlueprint, request, jsonifyfrom flask_login importlogin_requiredfrom ..extensions importdbfrom ..decorators importadmin_requiredfrom ..user importUserfrom ..utils importrender_themefrom datatables importColumnDT, DataTables

@admin.route('/users')

@login_required

@admin_requireddefusers():return render_theme('admin/users.html', active='users')

@admin.route('/users_data')

@login_required

@admin_requireddefusers_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.