CODEWITHSUNDEEP
javascriptjquerysortingappend
roshambo
roshambo

Reputation: 2794

AppendTo tbody after sort() function

Hi I would like to append tr/td data back to tbody in a table after I have done a sort of table row - table cell dates from a dynamically populated list.

This follows on from my question here: JavaScript Sort by Date on table not working where I have successfully sorted dates.

Thanks 

var dates = jQuery('tr.Entries').find('td.event-date > a').map(function() {
             return jQuery(this).text();
          }).get();
dates.sort(function(a,b){
var dateA = a;
dateA = dateA.replace(/(..)\/(..)\/(....)/, '$2-$1-$3');
var dateB = b;
dateB = dateB.replace(/(..)\/(..)\/(....)/, '$2-$1-$3');

return new Date(dateA).getTime() - new Date(dateB).getTime();
});
jQuery.each(dates, function (index, value) {
     //how to append back to tbody?
     console.log(value);
});

Here are some entries (there are alot more - dynamically populated rows)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<table class="event clearfix">
  <thead>
    <tr>
      <td>Date</td>
      <td>Event</td>
      <td>Location</td>
      <td>Ticket</td>
    </tr>
    <tr class="space"></tr>
  </thead>
  <tbody>
    <tr class="Entries">
      <td class="event-date">
        <a href="#">25/08/2017</a>
      </td>
      <td class="event-title">
        <a href="#">Live N Local Winter Music Festival</a> 
      </td>
      <td class="event-location">
        <a href="#">Pause Bar, Balaclava</a>
      </td>
      <td class="event-ticket-link">
        <a href="#" class="button button-normal">BUY TICKET</a> 
      </td>
    </tr>
    <tr class="Entries">
      <td class="event-date">
        <a href="#">15/04/2017</a>
      </td>
      <td class="event-title">
        <a href="#">Reggae, Seggae &amp; Sega Night</a>
      </td>
      <td class="event-location">
        <a href="#">Bar Open, Fitzroy Melbourne</a>
      </td>
      <td class="event-ticket-link">
        <a href="#" class="button button-normal">BUY TICKET</a>
      </td>
    </tr>
    <tr class="Entries">
      <td class="event-date">
        <a href="#">06/05/2016</a>
      </td>
      <td class="event-title">
        <a href="#">The Sunraysia Multicultural Festival</a>
      </td>
      <td class="event-location">
        <a href="#">Nowingi Place, Mildura Victoria</a>
      </td>
      <td class="event-ticket-link">
        <a href="#" class="button button-normal">BUY TICKET</a>
      </td>
    </tr>
  </tbody>
</table>

Upvotes: 0

Views: 188

Answers (2)

Andreas
Andreas

Reputation: 21881

Sort the rows directly instead of the dates.
You can then pass the sorted rows to .append() and jQuery will add them all "at once".

var dateRx = /(..)\/(..)\/(....)/,
  replaceFormat = "$2-$1-$3",
  rows = jQuery('tr.Entries')
          .get()
          .sort(function(rowA, rowB) {
            var dateA = $(rowA).find("td:first a").text().replace(dateRx, replaceFormat),
                dateB = $(rowB).find("td:first a").text().replace(dateRx, replaceFormat);

            return new Date(dateA) - new Date(dateB);
          });

jQuery("table.event tbody").append(rows);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<table class="event clearfix">
  <thead>
    <tr><td>Date</td><td>Event</td></tr>
    <tr class="space"></tr>
  </thead>
  <tbody>
    <tr class="Entries">
      <td class="event-date"><a href="#">25/08/2017</a></td>
      <td class="event-title"><a href="#">Live N Local Winter Music Festival</a></td>
    </tr>
    <tr class="Entries">
      <td class="event-date"><a href="#">15/04/2017</a></td>
      <td class="event-title"><a href="#">Reggae, Seggae &amp; Sega Night</a></td>
    </tr>
    <tr class="Entries">
      <td class="event-date"><a href="#">06/05/2016</a></td>
      <td class="event-title"><a href="#">The Sunraysia Multicultural Festival</a></td>
    </tr>
  </tbody>
</table>

Upvotes: 2

user4691348
user4691348

Reputation:

I would do this:

  • Assign an id attribute to <tbody>
  • before the jQuery.each() loop i would use .remove() to delete all <tr> entries from <tbody>
  • inside the loop i would use .append() to add back again sorted elements to <tbody> identiefied by id attribute

Upvotes: 0

Related Questions