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.
To use card view by default, add cards class to the table element.
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>
jquery
https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js
Hi…
Thanks…
Hello,
It worked perfectly only with a small problem that is after switching to card view the table only appears as one column. I could not figure out the solution. Any idea?
Best regards.