Bootstrap Возможность экспорта плагина таблиц - PullRequest
Новая
       120

Bootstrap Возможность экспорта плагина таблиц

2 голосов
/ 03 августа 2020

Я использую плагины 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>

Но нет возможности увидеть кнопку экспорта, мне не хватает каких-то зависимостей или чего-то такого? Я могу включить свое рабочее дерево, но опять же, это базовое c Django дерево приложений, поскольку все ресурсы выглядят так, как будто они загружаются из URL-адресов, и даже верхние URL-адреса из официального примера https://examples.bootstrap-table.com/index.html#extensions / export .html # view-source не помогите ...

Заранее благодарим за любую помощь, которую вы могли оказать

1 Ответ

3 голосов
/ 03 августа 2020

Как я вижу, вы забыли добавить много библиотек из примера. См. Больше во фрагменте. 

<!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>
...