时间戳

首页 > 解决方案 > 引导表 4 图标未正确显示

javascript - 引导表 4 图标未正确显示

问题描述

我在我的烧瓶应用程序中制作了一个引导表，其中包含文档中显示的一些扩展。一切正常，除了不显示图标的按钮，使它们对用户不友好。问题在浏览器（谷歌浏览器和 safari）以及应用程序中是一致的，无论它是在本地部署还是在云上（应用程序引擎）

这是我的标题：

<!DOCTYPE html>
<html lang="en">
  <head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <title>Walrus</title>

  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <link href="https://unpkg.com/bootstrap-table@1.15.5/dist/bootstrap-table.min.css" rel="stylesheet">
  <link rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.15.5/dist/extensions/sticky-header/bootstrap-table-sticky-header.css">
  <link rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.15.5/dist/extensions/fixed-columns/bootstrap-table-fixed-columns.css">
  <link rel='stylesheet' type=text/css href="{{ url_for('static', filename='styles.css') }}"/>
   <!-- jQuery first, then Popper.js, then Bootstrap JS -->    
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
  <script src="https://unpkg.com/tableexport.jquery.plugin/tableExport.min.js"></script>
  <script src="https://unpkg.com/tableexport.jquery.plugin/libs/jsPDF/jspdf.min.js"></script>
  <script src="https://unpkg.com/tableexport.jquery.plugin/libs/jsPDF-AutoTable/jspdf.plugin.autotable.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script> 
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" ></script>
  <script src="https://unpkg.com/bootstrap-table@1.15.5/dist/bootstrap-table.min.js"></script>
  <script src="https://unpkg.com/bootstrap-table@1.15.5/dist/extensions/toolbar/bootstrap-table-toolbar.min.js"></script>     
  <script src="https://unpkg.com/bootstrap-table@1.15.5/dist/extensions/export/bootstrap-table-export.min.js"></script>  
  <script src="https://unpkg.com/bootstrap-table@1.15.5/dist/extensions/multiple-sort/bootstrap-table-multiple-sort.js"></script>       
  <script src="https://unpkg.com/bootstrap-table@1.15.5/dist/extensions/fixed-columns/bootstrap-table-fixed-columns.js"></script>
  <script src="https://unpkg.com/bootstrap-table@1.15.5/dist/extensions/sticky-header/bootstrap-table-sticky-header.min.js"></script>
   </head>

这是生成表格的脚本：

<div class="main">

              <table class='table table-hover table-bordered'
            id="table"
            data-search='true'
            data-advanced-search="true"
            data-id-table="advancedTable" 
            data-show-columns='true'
            data-show-multi-sort="true"
            data-toolbar="#toolbar"
            data-show-export="true"
            >
            </table> 

                 <script>
                $('#table').bootstrapTable({
                    columns: [
                        {% for c in my_cols %}
                        {
                    field: '{{c}}',
                    title: '{{c}}',
                    sortable: true
                    },
                    {% endfor %}
                      ],
                    data: {{my_records|safe}},
                    pagination: true,
                    sortable: true,
                    fixedColumns: true,
                    fixedNumber: 5,
                    width: "900"
                  })
                </script>

这是我的按钮的样子：快照

知道如何解决吗？提前致谢！

标签： javascriptjquerybootstrap-4bootstrap-table

解决方案

推荐阅读