Flask DataTables后台数据实时传送---分页查询和search过滤

BEGIN:

1 JS 和 CSS引用

将js和css文件下载到本地并引用（ps：根据实际情况正常引用就好）：

<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
提取码：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

<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())

 附：

zh_CN.json

{
      "sProcessing": "处理中...",

      "sLengthMenu": "显示 _MENU_ 项结果",

      "sZeroRecords": "没有匹配结果",

      "sInfo": "显示第 _START_ 至 _END_ 项结果，共 _TOTAL_ 项",

      "sInfoEmpty": "显示第 0 至 0 项结果，共 0 项",

      "sInfoFiltered": "(由 _MAX_ 项结果过滤)",

      "sInfoPostFix": "",

      "sSearch": "搜索:",

      "sUrl": "",

      "sEmptyTable": "表中数据为空",

      "sLoadingRecords": "载入中...",

      "sInfoThousands": ",",

      "oPaginate": {

          "sFirst": "首页",

          "sPrevious": "上页",

          "sNext": "下页",

          "sLast": "末页"

      }

  }

 

 

END.