Basic Datatable

No search, nor sortable

by jmeile

HTML

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.datatables.net/v/dt/dt-2.0.5/r-3.0.2/datatables.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/v/dt/dt-2.0.5/r-3.0.2/datatables.min.css">
<table class="cell-border compact hover stripe jm_people_table" style="width:100%">
  <thead>
    <tr>
      <th>
        Name
      </th>
      <th class="desktop tablet-l">Office</th>
      <th class="desktop tablet-l">Phone</th>
      <th class="desktop tablet-l">Email</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John Smith</td>
      <td>New York</td>
      <td>+1 212-555-1234</td>
      <td>john.smith@sample_company.com</td>
    </tr>
    <tr>
      <td>Jane Doe</td>
      <td>London</td>
      <td>+44 20 7123 4567</td>
      <td>jane.doe@sample_company.com</td>
    </tr>
    <tr>
      <td>Emily Johnson</td>
      <td>Chicago</td>
      <td>+1 312-555-7890</td>
      <td><span class="jm-liame">[email protected]</span></td>
    </tr>
    <tr>
      <td>Michael Lee</td>
      <td>Los Angeles</td>
      <td>+1 213-555-2468</td>
      <td>michael.lee@sample_company.com</td>
    </tr>
    <tr>
      <td>Sophia Rodriguez</td>
      <td>Miami</td>
      <td>+1 305-555-5678</td>
      <td>sophia.rodriguez@sample_company.com</td>
    </tr>
    <tr>
      <td>William Brown</td>
      <td>Houston</td>
      <td>+1 713-555-9876</td>
      <td>william.brown@sample_company.com</td>
    </tr>
    <tr>
      <td>Olivia Müller</td>
      <td>Zürich</td>
      <td>+41 44 123 4567</td>
      <td>olivia.muller@sample_company.com</td>
    </tr>
    <tr>
      <td>Takashi Yamamoto</td>
      <td>Tokyo</td>
      <td>+81 3 4567 8901</td>
      <td>takashi.yamamoto@sample_company.com</td>
    </tr>
    <tr>
      <td>Andrés Rodríguez</td>
      <td>Bogota</td>
      <td>+57 1 234 5678</td>
      <td>andres.rodriguez@sample_company.com</td>
    </tr>
    <tr>
      <td>Natalia Petrov</td>
     ...

CSS

/* Begin of jmpeople.css */

/* People table */

/* Column widths: all of them should sum 100% */

/* Name column */
.jm_people_table tr > *:nth-child(1) {
  width: 30% !important; 
}

/* Office column */
.jm_people_table tr > *:nth-child(2) {
  width: 10% !important;
}

/* Phone column */
.jm_people_table tr > *:nth-child(3) {
  width: 12% !important;
}

/* E-Mail column */
.jm_people_table tr > *:nth-child(4) {
  width: 50% !important;
}
/* End of jmpeople.css */

JavaScript

$(document).ready(function() {
  var my_table = $('.jm_people_table').DataTable( {
    info: false,
    ordering: false,
    paging: false,
    responsive: {
      details: {
        display: $.fn.dataTable.Responsive.display.childRowImmediate
      }
    },
    layout: {
      topEnd: null,
    },
  } );
  
  $(".jm-liame").each(function(){
    var t = $(this).text();
    var e = t.split("").reverse().join("");
    $(this).html('<a hr' + 'ef="ma' + 'ilto:' + e + '">' + e + '</a>');
  });
} );