JSFiddle - React, Tailwind, and code Playground

by Yusuf SAYITA

HTML

<link rel="stylesheet" href="//cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css">
<script src="//cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<body>
  <table class="toDataTable" id="MasterTable_13dbe964-da4f-42af-929d-f4befdcd6c1c">
    <thead>
      <tr>
        <th style="display:none;"></th>
        <th>G&#246;nderici</th>
        <th>Alıcı</th>
        <th>İrsaliye Tarihi</th>
        <th>İrsaliye No</th>
      </tr>
    </thead>
    <tbody>
      <tr style="position:relative;">
        <td style="display:none;">94_13dbe964-da4f-42af-929d-f4befdcd6c1c</td>
        <td>Test 1</td>
        <td>Test 4</td>
        <td>13.06.2016</td>
        <td>898989899</td>
      </tr>
      <tr style="position:relative;">
        <td style="display:none;">88_13dbe964-da4f-42af-929d-f4befdcd6c1c</td>
        <td>Test 1</td>
        <td>Test 4</td>
        <td>30.05.2016</td>
        <td>313131</td>
      </tr>
      <tr style="position:relative;">
        <td style="display:none;">89_13dbe964-da4f-42af-929d-f4befdcd6c1c</td>
        <td>Test 4</td>
        <td>Test 4</td>
        <td>30.05.2016</td>
        <td>pworğeqwroq</td>
      </tr>
      <tr style="position:relative;">
        <td style="display:none;">90_13dbe964-da4f-42af-929d-f4befdcd6c1c</td>
        <td>Test 1</td>
        <td>Test 4</td>
        <td>30.05.2016</td>
        <td>rwqerqrq</td>
      </tr>
      <tr style="position:relative;">
        <td style="display:none;">85_13dbe964-da4f-42af-929d-f4befdcd6c1c</td>
        <td>Test 1</td>
        <td>Test 4</td>
        <td>29.05.2016</td>
        <td>2131321312</td>
      </tr>
      <tr style="position:relative;">
        <td style="display:none;">86_13dbe964-da4f-42af-929d-f4befdcd6c1c</td>
        <td>Test 1</td>
        <td>Test 4</td>
        <td>29.05.2016</td>
        <td>t356346363</td>
      </tr>
      <tr style="position:relative;">
        <td style="display:none;">87_13dbe964-da4f-42af-929d-f4befdcd6c1c</td>
       ...

JavaScript

$('.toDataTable').each(function() {
  var table = $(this).DataTable({
    rowId: 0,
    "dom": '<l<"DataTableSearch"f><t>ip>',
    scrollY: '60vh',
    scrollCollapse: true,
    paging: true,
    "order": [
      [3, "desc"]
    ]
  });
  table.rows().every(function() {
  console.log( this.id() );
    var id = this.id();
    id = "DetailRow_" + id.toString();
    var div = document.getElementById(id);
    if (div != null) {
      this.child($(div).html().toString());
      $(div).empty();
    }
  });
  $($(table.rows().nodes()).children("td:not(:last-child)")).click(function () {
    var child = table.row($(this).parent()).child;
    if (child.isShown()) {
      child.hide('slow');
    } else {
      child.show('slow');
    }
  });
});