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

最新推荐文章于 2024-05-07 10:28:42 发布

原创

最新推荐文章于 2024-05-07 10:28:42 发布 · 2k 阅读

17 ·

CC 4.0 BY-SA版权

文章标签：

#datatables #Flask

本文总结了如何在Flask应用中使用datatables插件，包括汉化处理、添加复制和导出Excel功能按钮，以及自定义搜索框宽度等操作。在后端路由中传入table_title、table_head和table_body参数，并通过配置实现插件的个性化设置。

终于搞定了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 -->
        <script src="{
    
    { url_for('static'

最低0.47元/天解锁文章