Original implementation is no longer live and can only be viewed using via archive.org. It has been later improved by Loren Maxwell, see his latest post and demonstration.
I improved and cleaned up the code to make it more generic. Please see the example below for code and demonstration.
Hi Michael and All,
I tried to copy the code and it doesn’t appear the card selection. All other working well.
The full code is as follows
<!DOCTYPE html>
<html>
<head>
<link href=”https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css” rel=”stylesheet” type=”text/css” />
<link href=”https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css” rel=”stylesheet” type=”text/css” />
<link href=”https://nightly.datatables.net/css/jquery.dataTables.css” rel=”stylesheet” type=”text/css” />
<style>
.cards tbody tr {
float: left;
width: 19rem;
margin: 0.5rem;
border: 0.0625rem solid rgba(0, 0, 0, .125);
border-radius: .25rem;
box-shadow: 0.25rem 0.25rem 0.5rem rgba(0, 0, 0, 0.25);
}
.cards tbody td {
display: block;
}
.cards thead {
display: none;
}
.cards td:before {
content: attr(data-label);
position: relative;
float: left;
color: #808080;
min-width: 4rem;
margin-left: 0;
margin-right: 1rem;
text-align: left;
}
tr.selected td:before {
color: #CCC;
}
.table .avatar {
width: 50px;
}
.cards .avatar {
width: 150px;
margin: 15px;
}
</style>
<script type=”text/javascript” language=”javascript” src=”https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js”></script>
<script type=”text/javascript” language=”javascript” src=”https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js”></script>
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js”></script>
<script type=”text/javascript” language=”javascript” src=”https://cdn.datatables.net/1.10.24/js/jquery.dataTables.min.js”></script>
<script>
$(document).ready(function () {
var table = $(‘#example’).DataTable({
‘dom’:
“<‘row'<‘col-sm-12 col-md-6’l><‘col-sm-12 col-md-6′<‘float-md-right ml-2’B>f>>” +
“<‘row'<‘col-sm-12’tr>>” +
“<‘row'<‘col-sm-12 col-md-5’i><‘col-sm-12 col-md-7’p>>”,
‘ajax’: ‘https://gyrocode.github.io/files/jquery-datatables/objects.json’,
‘buttons’: [ ‘csv’, {
‘text’: ‘<i class=”fa fa-id-badge fa-fw” aria-hidden=”true”></i>’,
‘action’: function (e, dt, node) {
$(dt.table().node()).toggleClass(‘cards’);
$(‘.fa’, node).toggleClass([‘fa-table’, ‘fa-id-badge’]);
dt.draw(‘page’);
},
‘className’: ‘btn-sm’,
‘attr’: {
‘title’: ‘Change views’,
}
}],
‘select’: ‘single’,
‘columns’: [
{
‘orderable’: false,
‘data’: null,
‘className’: ‘text-center’,
‘render’: function(data, type, full, meta){
if (type === ‘display’){
data = ‘<i class=”fa fa-user fa-fw”></i>’;
data = ‘<img src=”https://api.adorable.io/avatars/150/’ + encodeURIComponent(full[‘name’]) + ‘.png” class=”avatar border rounded-circle”>’;
}
return data;
}
},
{
‘data’: ‘name’
},
{
‘data’: ‘position’
},
{
‘data’: ‘salary’,
‘class’: ‘text-right’
},
{
‘data’: ‘start_date’,
‘class’: ‘text-right’
},
{
‘data’: ‘office’
},
{
‘data’: ‘extn’
}
],
‘drawCallback’: function (settings) {
var api = this.api();
var $table = $(api.table().node());
if ($table.hasClass(‘cards’)) {
// Create an array of labels containing all table headers
var labels = [];
$(‘thead th’, $table).each(function () {
labels.push($(this).text());
});
// Add data-label attribute to each cell
$(‘tbody tr’, $table).each(function () {
$(this).find(‘td’).each(function (column) {
$(this).attr(‘data-label’, labels[column]);
});
});
var max = 0;
$(‘tbody tr’, $table).each(function () {
max = Math.max($(this).height(), max);
}).height(max);
} else {
// Remove data-label attribute from each cell
$(‘tbody td’, $table).each(function () {
$(this).removeAttr(‘data-label’);
});
$(‘tbody tr’, $table).each(function () {
$(this).height(‘auto’);
});
}
}
})
.on(‘select’, function (e, dt, type, indexes) {
var rowData = table.rows(indexes).data().toArray()
$(‘#row-data’).html(JSON.stringify(rowData));
})
.on(‘deselect’, function () {
$(‘#row-data’).empty();
})
});
</script>
</head>
<body>
<div class=”container”>
<h4>
<a href=”https://www.gyrocode.com/articles/”>jQuery DataTables: Card view</a>
</h4>
<hr>
<div class=”alert alert-primary” role=”alert”>
Row data: <span id=”row-data”></span>
</div>
<table id=”example” class=”table table-sm table-hover” cellspacing=”0″ width=”100%”>
<thead>
<tr>
<th></th>
<th>Name</th>
<th>Position</th>
<th>Salary</th>
<th>Start</th>
<th>Office</th>
<th>Extn</th>
</tr>
</thead>
</table>
<hr><a href=”https://www.gyrocode.com/articles/tag/jquery-datatables/”>See more articles about jQuery DataTables</a> on <a href=”https://www.gyrocode.com/articles/”>Gyrocode.com</a>
</div>
</body>
</html>