2023-12-18 15:29:58 +01:00
|
|
|
<!doctype html>
|
|
|
|
|
<html>
|
2024-05-18 19:00:08 +08:00
|
|
|
<head>
|
2023-12-18 15:29:58 +01:00
|
|
|
<meta charset="utf-8" />
|
|
|
|
|
<title>{{title}}</title>
|
2024-05-18 19:00:08 +08:00
|
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" />
|
|
|
|
|
<link href="https://unpkg.com/bootstrap-table@1.22.1/dist/bootstrap-table.min.css" rel="stylesheet" />
|
|
|
|
|
<style>
|
|
|
|
|
.text-toggle, .full-text { cursor: pointer; }
|
|
|
|
|
th:nth-child(1), td:nth-child(1) { width: 5%; }
|
|
|
|
|
th:nth-child(2), td:nth-child(2),
|
|
|
|
|
th:nth-child(3), td:nth-child(3) { width: 30%; }
|
|
|
|
|
th, td {
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
text-overflow: ellipsis;
|
|
|
|
|
}
|
|
|
|
|
h2 {
|
|
|
|
|
margin-top: 10px;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
2023-12-18 15:29:58 +01:00
|
|
|
<div class="container-fluid">{{table}}</div>
|
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>
|
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
|
|
|
|
|
<script src="https://unpkg.com/bootstrap-table@1.22.1/dist/bootstrap-table.min.js"></script>
|
2024-05-18 19:00:08 +08:00
|
|
|
<script>
|
|
|
|
|
$(document).ready(function() {
|
|
|
|
|
$('table.table td').each(function() {
|
|
|
|
|
var cell = $(this);
|
|
|
|
|
if (cell.text().length > 100) {
|
|
|
|
|
var originalText = cell.text();
|
|
|
|
|
var displayText = originalText.substring(0, 100) + '...';
|
|
|
|
|
cell.html('<span class="text-toggle">' + displayText + '</span><span class="full-text" style="display: none;">' + originalText + '</span>');
|
|
|
|
|
cell.append('<a href="#" class="toggle-link">Show More</a>');
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
$('body').on('click', '.toggle-link', function(e) {
|
|
|
|
|
e.preventDefault();
|
|
|
|
|
var link = $(this);
|
|
|
|
|
var textSpan = link.siblings('.full-text');
|
|
|
|
|
var toggleSpan = link.siblings('.text-toggle');
|
|
|
|
|
if (textSpan.is(':visible')) {
|
|
|
|
|
link.text('Show More');
|
|
|
|
|
textSpan.hide();
|
|
|
|
|
toggleSpan.show();
|
|
|
|
|
} else {
|
|
|
|
|
link.text('Show Less');
|
|
|
|
|
textSpan.show();
|
|
|
|
|
toggleSpan.hide();
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
</script>
|
|
|
|
|
</body>
|
2023-12-18 15:29:58 +01:00
|
|
|
</html>
|
