[DATATABLE] CodePen Home DataTable 2 Card view (ok)
https://codepen.io/RedJokingInn/pen/bGoppqP
C:\xampp\htdocs\wpclidemo\index.php
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="apple-touch-icon" type="image/png" href="https://cpwebassets.codepen.io/assets/favicon/apple-touch-icon-5ae1a0698dcc2402e9712f7d01ed509a57814f994c660df9f7a952f3060705ee.png">
<meta name="apple-mobile-web-app-title" content="CodePen">
<link rel="shortcut icon" type="image/x-icon" href="https://cpwebassets.codepen.io/assets/favicon/favicon-aec34940fbc1a6e787974dcd360f2c6b63348d4b1f4e06c77743096d55480f33.ico">
<link rel="mask-icon" type="image/x-icon" href="https://cpwebassets.codepen.io/assets/favicon/logo-pin-8f3771b1072e3c38bd662872f6b673a722f4b3ca2421637d5596661b4e2132cc.svg" color="#111">
<title>Card View DataTable</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.12/css/dataTables.bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.2.2/css/buttons.bootstrap.min.css">
<style>
body {
margin: 2em;
}
.table-bordered.card {
border: 0 !important;
}
.card thead {
display: none;
}
.card tbody tr {
float: left;
width: 25em;
margin: 0.5em;
border: 1px solid #bfbfbf;
border-radius: 0.5em;
background-color: transparent !important;
box-shadow: 0.25rem 0.25rem 0.5rem rgba(0, 0, 0, 0.25);
}
.card tbody tr td {
display: block;
border: 0;
}
p {
text-align: center;
color: limegreen;
font-size: 1.5em;
font-weight: bold;
text-shadow: 1px 1px 2px #000;
margin-bottom: 1.2em;
}
</style>
<script>
window.console = window.console || function(t) {};
</script>
<script>
if (document.location.search.match(/type=embed/gi)) {
window.parent.postMessage("resize", "*");
}
</script>
</head>
<body translate="no">
<p>Klik the CARD VIEW button to change the datatable view</p>
<a class="btn btn-success" style="float:left;margin-right:20px;" href="https://codepen.io/collection/XKgNLN/" target="_blank">Other examples on Codepen</a>
<div id="example_wrapper" class="dataTables_wrapper form-inline dt-bootstrap no-footer">
<div class="dt-buttons">
<div class="dt-buttons btn-group"><a class="btn btn-default buttons-collection buttons-colvis" tabindex="0" aria-controls="example" href="#"><span>Column visibility</span></a><a class="btn btn-default buttons-copy buttons-html5" tabindex="0" aria-controls="example" href="#"><span>Copy</span></a><a class="btn btn-default buttons-csv buttons-html5" tabindex="0" aria-controls="example" href="#"><span>CSV</span></a><a class="btn btn-default buttons-excel buttons-html5" tabindex="0" aria-controls="example" href="#"><span>Excel</span></a><a class="btn btn-default buttons-pdf buttons-html5" tabindex="0" aria-controls="example" href="#"><span>PDF</span></a><a class="btn btn-default buttons-print" tabindex="0" aria-controls="example" href="#"><span>Print</span></a><a id="cv" class="btn btn-primary" href="#">CARD VIEW</a></div>
<div id="example_filter" class="dataTables_filter"><label>Search:<input type="search" class="form-control input-sm" placeholder="" aria-controls="example"></label></div>
</div>
<div class="clear"></div>
<div class="dataTables_length" id="example_length"><label>Show <select name="example_length" aria-controls="example" class="form-control input-sm">
<option value="10">10</option>
<option value="25">25</option>
<option value="50">50</option>
<option value="100">100</option>
</select> entries</label></div>
<div class="dataTables_info" id="example_info" role="status" aria-live="polite">Showing 1 to 9 of 9 entries</div>
<table id="example" class="table table-striped table-bordered dataTable no-footer card" cellspacing="0" width="100%" aria-describedby="example_info" role="grid" style="width: 100%;">
<thead>
<tr role="row">
<th class="sorting_asc" tabindex="0" aria-controls="example" rowspan="1" colspan="1" aria-sort="ascending" aria-label="Header 1: activate to sort column descending" style="width: 0px;">Header 1</th>
<th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1" aria-label="Header 2: activate to sort column ascending" style="width: 0px;">Header 2</th>
<th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1" aria-label="Header 3: activate to sort column ascending" style="width: 0px;">Header 3</th>
<th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1" aria-label="Header 4: activate to sort column ascending" style="width: 0px;">Header 4</th>
<th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1" aria-label="Header 5: activate to sort column ascending" style="width: 0px;">Header 5</th>
</tr>
</thead>
<tbody>
<tr role="row" class="odd">
<td class="sorting_1"><span class="colHeader">Header 1:</span>Row:1 Cell:1</td>
<td><span class="colHeader">Header 2:</span>Row:1 Cell:2</td>
<td><span class="colHeader">Header 3:</span>Row:1 Cell:3</td>
<td><span class="colHeader">Header 4:</span>Row:1 Cell:4</td>
<td><span class="colHeader">Header 5:</span>Row:1 Cell:5</td>
</tr>
<tr role="row" class="even">
<td class="sorting_1"><span class="colHeader">Header 1:</span>Row:2 Cell:1</td>
<td><span class="colHeader">Header 2:</span>Row:2 Cell:2</td>
<td><span class="colHeader">Header 3:</span>Row:2 Cell:3</td>
<td><span class="colHeader">Header 4:</span>Row:2 Cell:4</td>
<td><span class="colHeader">Header 5:</span>Row:2 Cell:5</td>
</tr>
<tr role="row" class="odd">
<td class="sorting_1"><span class="colHeader">Header 1:</span>Row:3 Cell:1</td>
<td><span class="colHeader">Header 2:</span>Row:3 Cell:2</td>
<td><span class="colHeader">Header 3:</span>Row:3 Cell:3</td>
<td><span class="colHeader">Header 4:</span>Row:3 Cell:4</td>
<td><span class="colHeader">Header 5:</span>Row:3 Cell:5</td>
</tr>
<tr role="row" class="even">
<td class="sorting_1"><span class="colHeader">Header 1:</span>Row:4 Cell:1</td>
<td><span class="colHeader">Header 2:</span>Row:4 Cell:2</td>
<td><span class="colHeader">Header 3:</span>Row:4 Cell:3</td>
<td><span class="colHeader">Header 4:</span>Row:4 Cell:4</td>
<td><span class="colHeader">Header 5:</span>Row:4 Cell:5</td>
</tr>
<tr role="row" class="odd">
<td class="sorting_1"><span class="colHeader">Header 1:</span>Row:5 Cell:1</td>
<td><span class="colHeader">Header 2:</span>Row:5 Cell:2</td>
<td><span class="colHeader">Header 3:</span>Row:5 Cell:3</td>
<td><span class="colHeader">Header 4:</span>Row:5 Cell:4</td>
<td><span class="colHeader">Header 5:</span>Row:5 Cell:5</td>
</tr>
<tr role="row" class="even">
<td class="sorting_1"><span class="colHeader">Header 1:</span>Row:6 Cell:1</td>
<td><span class="colHeader">Header 2:</span>Row:6 Cell:2</td>
<td><span class="colHeader">Header 3:</span>Row:6 Cell:3</td>
<td><span class="colHeader">Header 4:</span>Row:6 Cell:4</td>
<td><span class="colHeader">Header 5:</span>Row:6 Cell:5</td>
</tr>
<tr role="row" class="odd">
<td class="sorting_1"><span class="colHeader">Header 1:</span>Row:7 Cell:1</td>
<td><span class="colHeader">Header 2:</span>Row:7 Cell:2</td>
<td><span class="colHeader">Header 3:</span>Row:7 Cell:3</td>
<td><span class="colHeader">Header 4:</span>Row:7 Cell:4</td>
<td><span class="colHeader">Header 5:</span>Row:7 Cell:5</td>
</tr>
<tr role="row" class="even">
<td class="sorting_1"><span class="colHeader">Header 1:</span>Row:8 Cell:1</td>
<td><span class="colHeader">Header 2:</span>Row:8 Cell:2</td>
<td><span class="colHeader">Header 3:</span>Row:8 Cell:3</td>
<td><span class="colHeader">Header 4:</span>Row:8 Cell:4</td>
<td><span class="colHeader">Header 5:</span>Row:8 Cell:5</td>
</tr>
<tr role="row" class="odd">
<td class="sorting_1"><span class="colHeader">Header 1:</span>Row:9 Cell:1</td>
<td><span class="colHeader">Header 2:</span>Row:9 Cell:2</td>
<td><span class="colHeader">Header 3:</span>Row:9 Cell:3</td>
<td><span class="colHeader">Header 4:</span>Row:9 Cell:4</td>
<td><span class="colHeader">Header 5:</span>Row:9 Cell:5</td>
</tr>
</tbody>
</table>
<div class="dataTables_paginate paging_simple_numbers" id="example_paginate">
<ul class="pagination">
<li class="paginate_button previous disabled" id="example_previous"><a href="#" aria-controls="example" data-dt-idx="0" tabindex="0">Previous</a></li>
<li class="paginate_button active"><a href="#" aria-controls="example" data-dt-idx="1" tabindex="0">1</a></li>
<li class="paginate_button next disabled" id="example_next"><a href="#" aria-controls="example" data-dt-idx="2" tabindex="0">Next</a></li>
</ul>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.2.2/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.2.2/js/buttons.colVis.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.2.2/js/buttons.html5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.2.2/js/buttons.print.min.js"></script>
<script src="https://cdn.datatables.net/1.10.12/js/dataTables.bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.2.2/js/buttons.bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js"></script>
<script src="https://cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/pdfmake.min.js"></script>
<script src="https://cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/vfs_fonts.js"></script>
<script id="rendered-js">
$(document).ready(function() {
//Only needed for the filename of export files.
//Normally set in the title tag of your page.
document.title = "Card View DataTable";
// DataTable initialisation
$("#example").DataTable({
dom: '<"dt-buttons"Bf><"clear">lirtp',
paging: true,
autoWidth: true,
buttons: [
"colvis",
"copyHtml5",
"csvHtml5",
"excelHtml5",
"pdfHtml5",
"print"
],
initComplete: function(settings, json) {
$(".dt-buttons .btn-group").append(
'<a id="cv" class="btn btn-primary" href="#">CARD VIEW</a>');
$("#cv").on("click", function() {
if ($("#example").hasClass("card")) {
$(".colHeader").remove();
} else {
var labels = [];
$("#example thead th").each(function() {
labels.push($(this).text());
});
$("#example tbody tr").each(function() {
$(this).
find("td").
each(function(column) {
$("<span class='colHeader'>" + labels[column] + ":</span>").prependTo(
$(this));
});
});
}
$("#example").toggleClass("card");
});
}
});
});
//# sourceURL=pen.js
</script>
</body>
</html>
Last updated
