DataTable前(Python)后(JQuery)端实现

来源：互联网发布：帧率显示软件编辑：程序博客网时间：2024/06/05 05:35

后端（Python）：

安装：

pip install datatables

使用：

models.py

class Game(db.Model):    __tablename__ = 'games'    id = db.Column(db.Integer, primary_key=True)    name = db.Column(db.String(256))    screen_url = db.Column(db.String(256))    client_url = db.Column(db.String(256))    duration = db.Column(db.Integer)    def get_url(self):        return url_for('api.get_game', id=self.id, _external=True)    def to_json(self, short=False):        data = {            'name': self.name,            'id': self.id,            "screen_url": self.screen_url,            "client_url": self.client_url,            "duration": self.duration        }        return data    def from_json(self, data):        self.name = data['name']        self.screen_url = data['screen_url']        self.client_url = data['client_url']        return self    def modify_with(self, data):        for attr in ['name', 'screen_url', 'client_url', 'duration']:            _try_set(self, data, attr)        return self    def __repr__(self):        return '<Game: %d, %s, screen_ulr: %s, client_url: %s>' % (            self.id, self.name, self.screen_url, self.client_url)

views.py

from datatables import DataTable@api.route('/games/schedules')@auth.login_required@cache.cached(timeout=DEFAULT_API_CACHE_TIMEOUT, key_prefix=cache_key_prefix)@json@Trace(write=api_logger.debug)def get_all_game_schedules():    if not g.current_user.theater:        return {}    def format_created(gameSchedule):        return datefilter(gameSchedule.dragon_time, 'time')    def get_game_name(gameSchedule):        game = Game.query.get_or_404(gameSchedule.game_id)        return game.name    def get_game_duration(gameSchedule):        game = Game.query.get_or_404(gameSchedule.game_id)        return game.duration    def search(query, value):        return query.filter(GameSchedule.game_id.like('%' + value + '%'))    filter = GameSchedule.theater_id == g.current_user.theater.id    args = request.args    if 'start_date' in args:        start_date = str2datetime(args['start_date'])        filter = and_(filter, GameSchedule.dragon_time > start_date)    if 'end_date' in args:        end_date = str2datetime(args['end_date'])        filter = and_(filter, GameSchedule.dragon_time < end_date)    table = DataTable(        args,        GameSchedule,        GameSchedule.query.filter(filter),        [            ('dragon_time', format_created),            ('game_name', get_game_name),            ('game_duration', get_game_duration),            ('id', 'id'),        ]    )    table.searchable(search)    return table.json()

前端（JQuery.dataTables）：

HTML:

<table class="table table-hover display compact" id="dataTable2"></table>

JS ajax方式:

$("#dataTable2").DataTable({    serverSide: true,    processing: true,    order: [0, 'desc'],    searchDelay: 1500,    ajax: url2,    pagingType: "full_numbers",    columns: [        { "title": "场次信息", "data": "dragon_time" },        { "title": "游戏名称", "data": "game_name" },        { "title": "游戏时间(sec)", "data": "game_duration" },        { "title": "", "data": "id" }    ],    "columnDefs": [        {            "targets": 3,            "render": function (data, type, full, meta) {                return ('<a class="del" data-id=' + data + ' data-type="game"' +                    'data-toggle="modal" data-target="#demo" ' +                    'href="#!"><i class="fa fa-trash-o"></i></a>')            },        },        {            "targets": [1, 2, 3],            "orderable": false        },        {            "targets": 2,            "render": function (data) {                return parseInt(data)/1000;            }        }    ]});

效果：

这里写图片描述

0 0