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.