Change datatables to bootstrap-table in select

This commit is contained in:
2023-06-07 00:32:33 +02:00
parent 3b458eab08
commit f0c8d51682
4 changed files with 30 additions and 53 deletions

View File

@@ -7,17 +7,22 @@
</div> </div>
</div> </div>
<table id="file-table" <table id="file-table"
class="table table-striped table-hover table-bordered"> class="table table-striped table-hover table-bordered bg-light"
data-toggle="table"
data-sticky-header="true"
data-sticky-header-offset-y="50"
data-sortable="true"
data-search="true">
<thead> <thead>
<tr class="table-primary"> <tr class="bg-primary text-white">
<th>Model</th> <th data-field="model" data-sortable="true">Model</th>
<th>Metric</th> <th data-field="metric" data-sortable="true">Metric</th>
<th>Platform</th> <th data-field="platform" data-sortable="true">Platform</th>
<th>Date</th> <th data-field="date" data-sortable="true">Date</th>
<th>Time</th> <th data-field="time" data-sortable="true">Time</th>
<th>Stratified</th> <th data-field="stratified" data-sortable="true">Stratified</th>
<th>Title</th> <th data-field="title" data-sortable="true">Title</th>
<th>Score</th> <th data-field="score" data-sortable="true">Score</th>
<th> <th>
<button class="btn btn-primary btn-small btn-danger" <button class="btn btn-primary btn-small btn-danger"
onclick="setCheckBoxes(false)"> onclick="setCheckBoxes(false)">
@@ -37,9 +42,9 @@
<td>{{ parts[2] }}</td> <td>{{ parts[2] }}</td>
<td>{{ parts[1] }}</td> <td>{{ parts[1] }}</td>
<td>{{ parts[3] }}</td> <td>{{ parts[3] }}</td>
<td>{{ parts[4] }}</td> <td class="text-center">{{ parts[4] }}</td>
<td>{{ parts[5] }}</td> <td class="text-center">{{ parts[5] }}</td>
<td>{{ 'True' if stratified =='1' else 'False' }}</td> <td class="text-center">{{ 'True' if stratified =='1' else 'False' }}</td>
<td>{{ "%s" % data["title"] }}</td> <td>{{ "%s" % data["title"] }}</td>
<td class="text-end">{{ "%.6f" % data["score"] }}</td> <td class="text-end">{{ "%.6f" % data["score"] }}</td>
<td> <td>

View File

@@ -10,15 +10,6 @@
{% endblock %} {% endblock %}
{% block content %} {% block content %}
{% include "_table_report.html" %} {% include "_table_report.html" %}
<table data-url="https://examples.wenzhixin.net.cn/examples/bootstrap_table/data">
<thead>
<tr>
<th data-field="id">ID</th>
<th data-field="name">Item Name</th>
<th data-field="price" data-sortable="true">Item Price</th>
</tr>
</thead>
</table>
{% endblock %} {% endblock %}
{% block jscript %} {% block jscript %}
{{ super() }} {{ super() }}

View File

@@ -2,16 +2,19 @@
{% block styles %} {% block styles %}
{{ super() }} {{ super() }}
<link rel="stylesheet" <link rel="stylesheet"
href="https://cdn.datatables.net/1.10.25/css/jquery.dataTables.min.css"> href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.2/font/bootstrap-icons.css">
<link rel="stylesheet"
href="https://unpkg.com/bootstrap-table@1.21.4/dist/bootstrap-table.min.css">
<link href="https://unpkg.com/bootstrap-table@1.21.4/dist/extensions/sticky-header/bootstrap-table-sticky-header.css"
rel="stylesheet">
{% endblock %} {% endblock %}
{% block content %} {% block content %}
{% include "_table_select.html" %} {% include "_table_select.html" %}
{% endblock %} {% endblock %}
{% block jscript %} {% block jscript %}
{{ super() }} {{ super() }}
<script src="https://cdn.datatables.net/1.10.25/js/jquery.dataTables.min.js"></script> <script src="https://unpkg.com/bootstrap-table@1.21.4/dist/bootstrap-table.min.js"></script>
<script rel="stylesheet" <script src="https://unpkg.com/bootstrap-table@1.21.4/dist/extensions/sticky-header/bootstrap-table-sticky-header.min.js"></script>
href="https://cdn.datatables.net/1.13.4/js/dataTables.bootstrap5.min.js"></script>
<script src="{{ url_for('static', filename="js/select.js") }}"></script> <script src="{{ url_for('static', filename="js/select.js") }}"></script>
<script src="{{ url_for('static', filename="js/excelFiles.js") }}"></script> <script src="{{ url_for('static', filename="js/excelFiles.js") }}"></script>
{% endblock %} {% endblock %}

View File

@@ -1,33 +1,11 @@
$(document).ready(function () { $(document).ready(function () {
var table = $("#file-table").DataTable({
paging: true,
searching: true,
ordering: true,
info: true,
"select.items": "row",
pageLength: 25,
columnDefs: [
{
targets: 8,
orderable: false,
},
],
//"language": {
// "lengthMenu": "_MENU_"
//}
});
$('#file-table').on( 'draw.dt', function () {
enable_disable_best_buttons();
} );
// Check if row is selected // Check if row is selected
$("#file-table tbody").on("click", "tr", function () { $('#file-table tbody').on('click', 'tr', function () {
if ($(this).hasClass("selected")) { if ($(this).hasClass('selected')) {
$(this).removeClass("selected"); $(this).removeClass('selected');
} else { } else {
table $('#file-table tbody tr.selected').removeClass("selected")
.$("tr.selected") $(this).addClass('selected');
.removeClass("selected");
$(this).addClass("selected");
} }
}); });
// Show file with doubleclick // Show file with doubleclick