jamesL
jamesL

Reputation: 85

sorting <table> with JavaScript (jQuery)

Hi could someone help me understand why this script only works on safari, it's meant to oder the table from newest to oldest but I can't understand why it only functions correctly in safari

Obviously I'd like it to work with Chrome, firefox and edge

I've tried every jquery version but it's only working for safari

$('tr.Entries').each(function() {
  var $this = $(this),
    t = this.cells[1].textContent.split('-');
  $this.data('_ts', new Date(t[2], t[1] - 1, t[0]).getTime());
}).sort(function(a, b) {
  return $(a).data('_ts') > $(b).data('_ts');
}).appendTo('tbody');
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table-bordered" border="1">
  <thead>
    <tr class="Headers">
      <th>Number</th>
      <th>uploaded</th>
      <th>file</th>
    </tr>
  </thead>
  <tbody>
    <tr class="Entries" data-id="13">
      <td data-field-type="string">1234</td>
      <td data-field-type="date">01/04/2015 03:21:44pm</td>
      <td>9393939828282</td>
    </tr>
    <tr class="Entries" data-id="24">
      <td data-field-type="string">1352</td>
      <td data-field-type="date">04/10/2012 12:31:09pm</td>
      <td>1238383</td>
    </tr>
    <tr class="Entries" data-id="8">
      <td data-field-type="string">1124</td>
      <td data-field-type="date">13/05/2014 02:51:12pm</td>
      <td>0934899</td>
    </tr>
    <tr class="Entries" data-id="23">
      <td data-field-type="string">1652</td>
      <td data-field-type="date">07/11/2013 08:19:59pm</td>
      <td>929474900</td>
    </tr>
    <tr class="Entries" data-id="23">
      <td data-field-type="string">1652</td>
      <td data-field-type="date">04/12/2013 07:21:43pm</td>
      <td>8837483</td>
    </tr>
  </tbody>
</table>

Upvotes: 1

Views: 99

Answers (1)

mplungjan
mplungjan

Reputation: 177685

Perhaps you meant to do this?

const re = /(\d{2})\/(\d{2})\/(\d{4}) (\d{2})\:(\d{2})\:(\d{2})(\w{2})/

const makeDate = ($tr) => {
  const [, dd, mm, yyyy, hh, mi, ss, mer] = $("[data-field-type=date]", $tr).eq(0).text()
    .match(re);
  const dString = `${mm}/${dd}/${yyyy} ${hh}:${mi}:${ss} ${mer.toUpperCase()}`;
  return new Date(dString).getTime()
};
const tbSort = tableId => {
  const $tb = $("#" + tableId + " tbody");
  $tb.append(
    $('tr.Entries', $tb).sort((a, b) => makeDate($(b)) - makeDate($(a))) // descending
  );
};

tbSort("table1")
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table-bordered" id="table1" border="1">
  <thead>
    <tr class="Headers">
      <th>Number</th>
      <th>uploaded</th>
      <th>file</th>
    </tr>
  </thead>
  <tbody>
    <tr class="Entries" data-id="13">
      <td data-field-type="string">1234</td>
      <td data-field-type="date">01/04/2015 03:21:44pm</td>
      <td>9393939828282</td>
    </tr>
    <tr class="Entries" data-id="24">
      <td data-field-type="string">1352</td>
      <td data-field-type="date">04/10/2012 12:31:09pm</td>
      <td>1238383</td>
    </tr>
    <tr class="Entries" data-id="8">
      <td data-field-type="string">1124</td>
      <td data-field-type="date">13/05/2014 02:51:12pm</td>
      <td>0934899</td>
    </tr>
    <tr class="Entries" data-id="23">
      <td data-field-type="string">1652</td>
      <td data-field-type="date">07/11/2013 08:19:59pm</td>
      <td>929474900</td>
    </tr>
    <tr class="Entries" data-id="23">
      <td data-field-type="string">1652</td>
      <td data-field-type="date">04/12/2013 07:21:43pm</td>
      <td>8837483</td>
    </tr>
  </tbody>
</table>

Upvotes: 1

Related Questions