How can I sort all table rows using the first table data value using jQuery?

Question

I have an JavaScript object defined as below :

<tr class="GridUnSelectedRow" grid_id="00000000-0000-0000-0000-000000000000" ondblclick="dblClick(); ">
<td class="GridRow">Dorothy Allen</td>
<td class="GridRow">3</td>
<td class="GridRow">3</td>
<td class="GridRow">&nbsp;</td>
<td class="GridRow">Not Set</td>
<td class="GridRow">&nbsp;</td>
<td class="GridRow">Consultant</td>
<td class="GridRow">Exceptional</td>
<td class="GridRow">High</td>
<td class="GridRow">DF855EC2-C04F-487A-85DE-9FBEFC0527BF</td>
</tr>

<tr class="GridUnSelectedRow" grid_id="00000000-0000-0000-0000-000000000000" ondblclick="dblClick(); ">
<td class="GridRow">Keith  Austin</td>
<td class="GridRow">3</td>
<td class="GridRow">3</td>
<td class="GridRow">&nbsp;</td>
<td class="GridRow">Not Set</td>
<td class="GridRow">&nbsp;</td>
<td class="GridRow">Senior Telesales</td>
<td class="GridRow">Exceptional</td>
<td class="GridRow">High</td>
<td class="GridRow">3FDEE46E-EC02-448C-A709-E9284712B796</td>
</tr>

<tr class="GridUnSelectedRow" grid_id="00000000-0000-0000-0000-000000000000" ondblclick="dblClick(); ">
<td class="GridRow">​Margaret Fatania</td>
<td class="GridRow">3</td>
<td class="GridRow">3</td>
<td class="GridRow">&nbsp;</td>
<td class="GridRow">Not Set</td>
<td class="GridRow">&nbsp;</td>
<td class="GridRow">Consultant</td>
<td class="GridRow">Exceptional</td>
<td class="GridRow">High</td>
<td class="GridRow">DF855EC2-C04F-487A-85DE-9FBEFC0527BF</td>
</tr>

<tr class="GridUnSelectedRow" grid_id="00000000-0000-0000-0000-000000000000" ondblclick="dblClick(); ">
<td class="GridRow">Ahmed Zia</td>
<td class="GridRow">3</td>
<td class="GridRow">3</td>
<td class="GridRow">&nbsp;</td>
<td class="GridRow">Not Set</td>
<td class="GridRow">&nbsp;</td>
<td class="GridRow">Senior Telesales</td>
<td class="GridRow">Exceptional</td>
<td class="GridRow">High</td>
<td class="GridRow">3FDEE46E-EC02-448C-A709-E9284712B796</td>
</tr>

<tr class="GridUnSelectedRow" grid_id="00000000-0000-0000-0000-000000000000" ondblclick="dblClick(); ">
<td class="GridRow">Francis Becker</td>
<td class="GridRow">3</td>
<td class="GridRow">3</td>
<td class="GridRow">&nbsp;</td>
<td class="GridRow">Not Set</td>
<td class="GridRow">&nbsp;</td>
<td class="GridRow">Consultant</td>
<td class="GridRow">Exceptional</td>
<td class="GridRow">High</td>
<td class="GridRow">DF855EC2-C04F-487A-85DE-9FBEFC0527BF</td>
</tr>

<tr class="GridUnSelectedRow" grid_id="00000000-0000-0000-0000-000000000000" ondblclick="dblClick(); ">
<td class="GridRow">Richard  Henry</td>
<td class="GridRow">3</td>
<td class="GridRow">3</td>
<td class="GridRow">&nbsp;</td>
<td class="GridRow">Not Set</td>
<td class="GridRow">&nbsp;</td>
<td class="GridRow">Senior Telesales</td>
<td class="GridRow">Exceptional</td>
<td class="GridRow">High</td>
<td class="GridRow">3FDEE46E-EC02-448C-A709-E9284712B796</td>
</tr>

I need to be able to sort this object so that the TR rows appear sorted alphabetically ideally by surname then forename.

I have seen plenty examples if the TR rows are inside a table and tbody elements using jQuery sort.

However I'm not sure how to do this using the object above.

The fullname is the first TD element of each row, eg 'Dorothy Allen'.

Answer 1

Here's a fiddle that should solve what you want.

Concepts used:

• JavaScript array
• JavaScript sort
• jQuery append

Relevant bits here:

$(document).ready(function() {

  // Here's a JavaSript array of objects that represent the data you have in your HTML table.
  var data = [{
    name: 'Dorothy Allen',
    num1: 3,
    num2: 3,
    set: 'Not Set',
    role: 'Consultant',
    ability: 'Exceptional',
    level: 'High',
    id: 'DF855EC2-C04F-487A-85DE-9FBEFC0527BF'
  }, {
    name: 'Keith Austin',
    num1: 3,
    num2: 3,
    set: 'Not Set',
    role: 'Senior Telesales',
    ability: 'Exceptional',
    level: 'High',
    id: '3FDEE46E-EC02-448C-A709-E9284712B796'
  }, {
    name: 'AAA AAAA',
    num1: 3,
    num2: 3,
    set: 'Not Set',
    role: 'Senior Telesales',
    ability: 'Exceptional',
    level: 'High',
    id: '3FDEE46E-EC02-448C-A709-E9284712B796'
  },
  {
    name: 'ZZZ ZZZZ',
    num1: 3,
    num2: 3,
    set: 'Not Set',
    role: 'Senior Telesales',
    ability: 'Exceptional',
    level: 'High',
    id: '3FDEE46E-EC02-448C-A709-E9284712B796'
  }];

  // sort will alter the array in place. 
  //  No need to return/cache it off.
  data.sort(function(a, b) {
    var aName = a.name.split(' '),
      bName = b.name.split(' ');
    var aForename = aName[0].toUpperCase(),
      aSurname = aName[1].toUpperCase(),
      bForename = bName[0].toUpperCase(),
      bSurname = bName[1].toUpperCase();

    if (aSurname < bSurname) return -1;
    if (aSurname > bSurname) return 1;
    if (aSurName === bSurname) {
      if (aForename < bForename) return -1;
      if (aForename > bForename) return 1;
      return 0; // They're equal.
    }
  });

  // Loop through each item (sorted now), and create HTML <tr>
  //  Append created <tr> to table in HTML.
  data.forEach(function(item) {
    var itemHtml = '<tr class="GridUnSelectedRow" grid_id="00000000-0000-0000-0000-000000000000" ondblclick="dblClick();">' + '<td class="GridRow">' + item.name + '</td><td class="GridRow">' + item.num1 + '</td><td class="GridRow">' + item.num2 + '</td><td class="GridRow">&nbsp;</td><td class="GridRow">' + item.set + '</td><td class="GridRow">&nbsp;</td><td class="GridRow">' + item.role + '</td><td class="GridRow">' + item.ability + '</td><td class="GridRow">' + item.level + '</td><td class="GridRow">' + item.id + '</td></tr>';

    $('table > tbody').append(itemHtml);
  });
});

Answer 2

Thanks for your help.

I managed to fix it using the code snippet below.

        // Sort the list in alphabetical order (surname first, then forename)
        function sortEmployees(list){
            var rows = list;

            rows.sort(function(a, b) {
                // Get 'TD' element
                var A = $(a).children('td').eq(0).text().toUpperCase();
                var B = $(b).children('td').eq(0).text().toUpperCase();

                //Split Full Name
                var aName = A.split(' ');
                var bName = B.split(' ');

                // Get Forename and Surname
                var aForename = aName[0];
                var aSurname = aName[1];
                var bForename = bName[0];
                var bSurname = bName[1];

                //Comparisons
                if (aSurname < bSurname) return -1;

                if (aSurname > bSurname) return 1;

                if (aSurname === bSurname) {
                  if (aForename < bForename) return -1;
                  if (aForename > bForename) return 1;
                  return 0; // They're equal.
                }

            });

            return rows;
        }