jQuery DataTables: Card view

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.


You May Also Like


  1. 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>



    <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” />


    .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;



    <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>


    $(document).ready(function () {

       var table = $(‘#example’).DataTable({


                “<‘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) {


                   $(‘.fa’, node).toggleClass([‘fa-table’, ‘fa-id-badge’]);



                ‘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 () {



                   // 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);


                } else {

                   // Remove data-label attribute from each cell

                   $(‘tbody td’, $table).each(function () {



                   $(‘tbody tr’, $table).each(function () {






          .on(‘select’, function (e, dt, type, indexes) {

             var rowData = table.rows(indexes).data().toArray()



          .on(‘deselect’, function () {







    <div class=”container”>


           <a href=”https://www.gyrocode.com/articles/”>jQuery DataTables: Card view</a>



       <div class=”alert alert-primary” role=”alert”>

       Row data: <span id=”row-data”></span>


       <table id=”example” class=”table table-sm table-hover” cellspacing=”0″ width=”100%”>













       <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>




Leave a Reply to zxc Cancel reply


This site uses Akismet to reduce spam. Learn how your comment data is processed.