Flask使用datatables插件的html模板,插件的汉化、添加“复制、导出excel”功能按钮和调整控件显示位置的总结

终于搞定了datatables插件,调成了我想要的样子。后端路由函数在render_template时,要带上table_title,table_head(列名),table_body(数值)。值得一提的是datatables的设置,确实非常灵活多变。调整控件的位置的方法:"dom" //l - Length changing 改变每页显示多少条数据的控件 默认左上角显示...
摘要由CSDN通过智能技术生成

终于搞定了datatables插件,调成了我想要的样子。
后端路由函数在render_template时,要带上table_title,table_head(列名),table_body(数值)。

值得一提的是datatables的设置,确实非常灵活多变。

调整控件的位置的方法:"dom"
        //l - Length changing 改变每页显示多少条数据的控件   默认左上角显示
        //f - Filtering input 即时搜索框控件                                 默认右上角显示
        //t - The Table 表格本身                 
        //i - Information 表格相关信息控件                                 默认左下角显示
        //p - Pagination 分页控件                                               默认右下角显示
        //r - pRocessing 加载等待显示信息
        //B - Buttons 额外的按钮信息,按插件支持拷贝、打印、导出excel,csv,pdf等
默认直接把B加入dom中的时候,显示上导致控件不在一行上,需要把想放在一行中显示的控件用div和col调整成在一行显示。也可随意更改控件的位置了。
在这里卡了一段时间,刚开始没理解dom的设置规则,后来才明白过来。

"dom": '<"row"<"col-lg-3"l><"col-lg-3"B><"col-lg-6"f>>t<"row"<"col-lg-6"i><"col-lg-6"p>>',   
// 默认的“dom”:<"H"lfr > t <"F"ip > 或 'lfrtip'


添加Buttons控件后,可以选择默认样式,也可改良
                    //buttons: ['copy', 'excel', 'csv',],   //默认按钮,若需要pdf和print功能,只需再加入对应的css和js即可
                    //改良button显示的方法,加入fa图标
                    buttons: [
                        {
                            text: '<i class="fa fa-clipboard" aria-hidden="true" title="复制到剪贴板"> 复制</i>',
                            extend: 'copy'
                        }, {
                            text: '<i class="fa fa-download" aria-hidden="true" title="另存为excel"> EXCEL</i>',
                            extend: 'excel'
                        },
                    ],

调整右上角搜索框的宽度:打开dataTables.bootstrap.min.css,在div.dataTables_filter input添加min-width: 300px;即可。

显示如下:
在这里插入图片描述
模板代码:(datatables插件所需js、css均可到官网下载)

{#% block table %#}
{% if table_head %}
    {% if table_body %}
        <!-- Page-Level Plugin CSS - Tables -->
        <link href="{
    { url_for('static', filename='css/plugins/dataTables/dataTables.bootstrap.min.css') }}" rel="stylesheet">
        <!-- Tables buttons Plugin CSS - Tables -->
        <link href="{
    { url_for('static', filename='css/plugins/dataTables/buttons.dataTables.min.css') }}" rel="stylesheet">
        <link href="{
    { url_for('static', filename='css/plugins/dataTables/buttons.bootstrap.min.css') }}" rel="stylesheet">
        <!-- Page-Level Plugin Scripts - Tables -->
        <
  • 3
    点赞
  • 17
    收藏
    觉得还不错? 一键收藏
  • 7
    评论
要在Flask中从数据库中查询数据并使用pandas将其导出Excel,需要安装pandas和openpyxl库,以及一个适合您使用的数据库驱动程序库(例如pymysql或psycopg2)。可以按照以下步骤进行操作: 1. 在Flask项目中导入必要的库: ```python from flask import Flask, render_template, make_response import pandas as pd from io import BytesIO import pymysql # 或者其他的数据库驱动程序库 ``` 2. 创建一个视图函数来从数据库中查询数据并将其导出Excel: ```python @app.route('/export_excel') def export_excel(): # 连接数据库 conn = pymysql.connect(host='localhost', user='root', password='password', database='mydatabase') # 查询数据 sql = 'SELECT * FROM mytable' df = pd.read_sql(sql, conn) # 关闭数据库连接 conn.close() # 将数据写入Excel文件 output = BytesIO() writer = pd.ExcelWriter(output, engine='openpyxl') df.to_excel(writer, index=False, sheet_name='Sheet1') writer.save() output.seek(0) # 将文件作为response返回给客户端 response = make_response(output.getvalue()) response.headers['Content-Disposition'] = 'attachment; filename=export.xlsx' response.headers['Content-Type'] = 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' return response ``` 3. 在模板添加一个链接来触发视图函数: ```html <a href="{{ url_for('export_excel') }}">导出Excel</a> ``` 这样,当用户点击链接时,Flask将调用视图函数并将从数据库中查询到的数据导出Excel文件,然后将该文件作为响应返回给客户端,客户端会自动下载该文件。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 7
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值