Я хотел бы отобразить свои DataTables в формате Card View, но понятия не имею, что делать.
Я пытался ссылаться на эти два веб-сайта о том, как преобразовать DataTable в представление карты, но все еще не могне заставить его работать.
Код:
<head>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.20/js/dataTables.jqueryui.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.6.0/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.6.0/js/buttons.jqueryui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"></script>
<script src="https://cdn.datatables.net/buttons/1.6.0/js/buttons.html5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.6.0/js/buttons.print.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.6.0/js/buttons.colVis.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"></link>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.20/css/dataTables.jqueryui.min.css"></link>
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.6.0/css/buttons.jqueryui.min.css"></link>
<style>
.cards tbody img {
height: 100px;
}
.cards tbody tr {
float: left;
margin: 10px;
border: 1px solid #aaa;
box-shadow: 3px 3px 6px rgba(0,0,0,0.25);
background-color: white;
}
.cards tbody td {
display: block;
width: 330px;
overflow: hidden;
text-align: left;
}
</style>
<form id="myform">
<button id ="btToggleDisplay" class="btn btn-info">CARD</button>
<table id="itineraryTable" class="display" style="width:100%"></table>
</form>
<script>
var itineraryTable = $('#itineraryTable').DataTable({
'ajax': {
"type" : "GET",
"url" : "http://localhost:8080/Test-war/webresources/itinerary/getallitinerary",
"dataSrc": ""
},
'columns': [
{title : "Caption", "data" : "caption"},
{title : "Title", "data" : "title"},
{title : "Duration", "data" : "duration"},
{title : "Start Date", "data" : "startDate", "render" : function(data) {
var date = new Date(data);
var month = date.getMonth() + 1;
return (month.toString().length > 1 ? month : "0"
+ month) + "/" + date.getDate() + "/" + date.getFullYear();
}},
{title : "End Date", "data" : "endDate", "render" : function(data) {
var date = new Date(data);
var month = date.getMonth() + 1;
return (month.toString().length > 1 ? month : "0"
+ month) + "/" + date.getDate() + "/" + date.getFullYear();
}},
{title : "Created Date", "data" : "createdDate" , "render" : function(data) {
var date = new Date(data);
var month = date.getMonth() + 1;
return (month.toString().length > 1 ? month : "0"
+ month) + "/" + date.getDate() + "/" + date.getFullYear();
}},
],
});
</script>
Я пытался использовать, но не смог заставить его работать. Мне нужен совет о том, как я могу использовать .toggleClass('cards') в моих кодах выше. Спасибо.
$('#btToggleDisplay').on('click', function () {
$("#itineraryTable").toggleClass('cards')
$("#itineraryTable thead").toggle()
})
Вот изображение текущей таблицы данных: 