【发布时间】: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