终于搞定了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 -->
<