---
description: https://codepen.io/RedJokingInn/pen/bGoppqP
---

# \[DATATABLE] CodePen Home DataTable 2 Card view (ok)

<figure><img src="https://2726517656-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M1E4Gk2ppVKb4olmnun%2Fuploads%2F7MaM0dMpFqtmAat3VO38%2Fimage.png?alt=media&#x26;token=de0c44eb-d692-48ae-b9c1-eca1a979437d" alt=""><figcaption></figcaption></figure>

C:\xampp\htdocs\wpclidemo\index.php

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

```
