Please, check out my code and let me know why button export and pagination does not work? I cannot see the list of exportTypes and data-page-list. I am using Flask to run the page. I believe that the issue is related to libraries I am using but I have no idea what to change.
Any advice from you guys would be super useful.
var $table = $('#table')
$(function() {
$('#toolbar').find('select').change(function () {
$table.bootstrapTable('destroy').bootstrapTable({
exportDataType: $(this).val(),
exportTypes: ['json', 'xml', 'csv', 'txt', 'sql', 'excel', 'pdf'],
columns: [
{
field: 'state',
checkbox: true,
visible: $(this).val() === 'selected'
},
{
field: 'id',
title: 'ID'
}, {
field: 'name',
title: 'Item Name'
}, {
field: 'price',
title: 'Item Price'
}
]
})
}).trigger('change')
})#header_class {
position: relative;
background: url(../static/main_bg.jpg) no-repeat center top;
margin-top: -70px;
padding-top: 250px;
text-align:center;
background-attachment: relative;
background-position: center center;
min-height: 650px;
width: 100%;
-webkit-background-size: 100%;
-moz-background-size: 100%;
-o-background-size: 100%;
background-size: 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Content repository</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.18.3/dist/bootstrap-table.min.css">
<link rel="stylesheet" href="https://kit-free.fontawesome.com/releases/latest/css/free.min.css">
<link rel="shortcut icon" href="{{url_for('static', filename='logo.jpg')}}">
</head>
<body>
<!-- Static navbar -->
<nav class="navbar fixed-top navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand"><img src="{{ url_for('static', filename='PATHFINDER23_basic WO RGB.png') }}"
width="150" height="25" alt="logo"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<!--EXPAND MENU-->
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto mx-auto">
<li class="nav-item">
<a class="nav-link" href="{{ url_for('home') }}">Home page</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="{{ url_for('table') }}">Table</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{{ url_for('logout') }}">Log out</a>
</li>
</ul>
</div>
</nav>
<div id="header_class">
<div class="container">
<div class="content">
</div>
<h1>Header</h1>
</div>
</div>
<!-- Page Content -->
<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 id="table"
data-show-export="true"
data-pagination="true"
data-side-pagination="server"
data-page-list="[10, 25, 50, 100, all]"
data-click-to-select="true"
data-toolbar="#toolbar"
data-show-toggle="true"
data-show-columns="true"
data-show-footer="true"
data-url="https://examples.wenzhixin.net.cn/examples/bootstrap_table/data">
</table>
<!-- End Page Content -->
</body>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://unpkg.com/bootstrap-table@1.18.3/dist/bootstrap-table.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/tableexport.jquery.plugin@1.10.21/tableExport.min.js"></script>
<script src="https://unpkg.com/bootstrap-table@1.18.3/dist/extensions/export/bootstrap-table-export.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/tableexport.jquery.plugin@1.10.21/libs/jsPDF-AutoTable/jspdf.plugin.autotable.js"></script>
</html>