【问题标题】:Bootstrap Table Plugin export option引导表插件导出选项
【发布时间】:2020-08-03 14:12:37
【问题描述】:

我正在使用https://bootstrap-table.com/ 插件进行搜索,进行分页,在我的 HTML 页面中对表格进行排序,除导出功能外,所有功能都可以使用。我已经在论坛上潜伏了几个小时,唯一可行的答案就是使用另一个插件,但在我看来,Bootstrap 表对眼睛来说真的更友好。 我已经运行并添加了插件本身的要求,并添加了https://github.com/hhurz/tableExport.jquery.plugin 要求,但我找不到获得此结果https://live.bootstrap-table.com/example/extensions/export.html 的方法,即使使用另一个在线编辑器它也会失败,尽管我可以'看不到任何正在本地加载的资源... 目前我的 HTML 页面看起来像这样(如果有任何问题,我正在使用 Django):

<!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">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <!-- Loading main stylesheets -->
    <link rel="stylesheet" type="text/css" href="{% static 'main/main.css' %}">
    <!-- Loading icon -->
    <link rel="shortcut icon" type="image/png" href="{% static 'favicon.ico' %}"/>
  </head>
  <body>
    <div class="container-fluid">
      <div id="toolbar">
        <select class="form-control">
          <option value="">Export Basic</option>
          <option value="all">Export All</option>
          <option value="selected">Export Selected</option>
        </select>
      </div>
      <table class="table" id="table"
        data-toggle="table"
        data-toolbar="#toolbar"
        data-show-export="true"
        data-pagination="true"
        data-search="true"
        data-side-pagination="server"
        data-click-to-select="true"
        data-toolbar="#toolbar"
        data-show-toggle="true"
        data-show-columns="true"
        >
        <thead>
          <tr>
            <th scope="col">#</th>
            <th scope="col">First</th>
            <th scope="col">Last</th>
            <th scope="col">Handle</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <th scope="row">1</th>
            <td>Mark</td>
            <td>Otto</td>
            <td>@mdo</td>
          </tr>
          <tr>
            <th scope="row">2</th>
            <td>Jacob</td>
            <td>Thornton</td>
            <td>@fat</td>
          </tr>
          <tr>
            <th scope="row">3</th>
            <td>Larry</td>
            <td>the Bird</td>
            <td>@twitter</td>
          </tr>
        </tbody>
      </table>
    </div>
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" integrity="sha512-bLT0Qm9VnAYZDflyKcBaQ2gg0hSYNQrJ8RilYldYQ1FxQYoCLtUjuuRuZo+fjqhx/qtq/1itJ0C2ejDxltZVFg==" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
    <script src="https://unpkg.com/bootstrap-table@1.17.1/dist/bootstrap-table.min.js"></script>
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.17.1/dist/bootstrap-table.min.css">
    <!-- Latest compiled and minified JavaScript -->
    <script src="https://unpkg.com/bootstrap-table@1.17.1/dist/bootstrap-table.min.js"></script>
    <!-- Latest compiled and minified Locales -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.17.1/locale/bootstrap-table-en-US.min.js"></script>
  </body>
</html>

但是看不到导出按钮,是我缺少一些依赖项还是什么? 我可以包含我的工作树,但同样,它是一个基本的 Django 应用程序树,因为所有资源看起来都是从 URL 加载的,甚至官方示例 https://examples.bootstrap-table.com/index.html#extensions/export.html#view-source 中的顶级 URL 也无济于事......

提前感谢您提供的任何帮助

【问题讨论】:

    标签: html twitter-bootstrap bootstrap-4 bootstrap-table tableexportjs


    【解决方案1】:

    如我所见,您忘记在示例中添加很多库。在 sn-p 中查看更多信息。

    <!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">
    
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.js"></script>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" />
        <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/js/bootstrap.min.js"></script>
    
        
        <!-- just added all required libraries from your example site -->
        <link href="https://unpkg.com/bootstrap-table@1.17.1/dist/bootstrap-table.min.css" rel="stylesheet">
        <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://unpkg.com/bootstrap-table@1.17.1/dist/bootstrap-table.min.js"></script>
        <script src="https://unpkg.com/bootstrap-table@1.17.1/dist/extensions/export/bootstrap-table-export.min.js"></script>
        
    
      </head>
      <body>
        <div class="container-fluid">
          <div id="toolbar" class="select">
            <select class="form-control">
              <option value="">Export Basic</option>
              <option value="all">Export All</option>
              <option value="selected">Export Selected</option>
            </select>
          </div>
          <table class="table" id="table"
            data-toggle="table"
            data-toolbar="#toolbar"
            data-show-export="true"
            data-pagination="true"
            data-search="true"
            data-side-pagination="server"
            data-click-to-select="true"
            data-toolbar="#toolbar"
            data-show-toggle="true"
            data-show-columns="true"
            >
            <thead>
              <tr>
                <th scope="col">#</th>
                <th scope="col">First</th>
                <th scope="col">Last</th>
                <th scope="col">Handle</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <th scope="row">1</th>
                <td>Mark</td>
                <td>Otto</td>
                <td>@mdo</td>
              </tr>
              <tr>
                <th scope="row">2</th>
                <td>Jacob</td>
                <td>Thornton</td>
                <td>@fat</td>
              </tr>
              <tr>
                <th scope="row">3</th>
                <td>Larry</td>
                <td>the Bird</td>
                <td>@twitter</td>
              </tr>
            </tbody>
          </table>
        </div>
        
      </body>
    </html>

    【讨论】:

    • 非常感谢,我已经尝试了所有这些库,但听起来很愚蠢,我想我读过某处将 JS 脚本放在 body 标签中,但将它们放在 head 标签之间似乎解决了我的问题问题...
    猜你喜欢
    • 1970-01-01
    • 2015-02-04
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2017-03-13
    • 2017-06-07
    • 2014-06-22
    • 1970-01-01
    相关资源
    最近更新 更多