1

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>
jamesL
  • 85
  • 6
  • 1
    This is not java. Please keep in mind, java and javascript are entirely different things, like car and carpet are. https://stackoverflow.com/questions/245062/whats-the-difference-between-javascript-and-java – Clijsters Jul 01 '20 at 10:48
  • Can you open your web console in - say - chrome and tell us what you see there? May it be that you see Content Security Policy issues? – Marek Puchalski Jul 01 '20 at 10:52
  • @MarekPuchalski three messages appear but the only 'error' that also appears on my site is "DevTools failed to load SourceMap: Could not load content for http://jsfiddle.net/js/createStream.js.map: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE" so it would seem I need to add a normalize.min.css.map – jamesL Jul 01 '20 at 10:58
  • @Clijsters yes sorry typo I'll correct the title – jamesL Jul 01 '20 at 10:59
  • 1
    That is an error from a plugin. I have that all the time – mplungjan Jul 01 '20 at 11:43

1 Answers1

1

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>
mplungjan
  • 169,008
  • 28
  • 173
  • 236
  • Comments are not for extended discussion; this conversation has been [moved to chat](https://chat.stackoverflow.com/rooms/217054/discussion-on-answer-by-mplungjan-sorting-table-with-javascript-jquery). – Samuel Liew Jul 02 '20 at 02:51