troubleshooting Question

Sort table by data attribute instead of text

Avatar of tonelm54
tonelm54 asked on
1 Comment1 Solution8 ViewsLast Modified:

Im trying to sort a table but by using a data attribute not values of cells, so I structured the following code:-

function sortTable(name, direction) {
  $("#tblSearchResults tbody").find('tr').sort(function(a, b) {
     let firstname = $(this).data('firstname');
    let surname = $(this).data('surname');
     console.log(firstname + "-" + surname);
    if (name === 'Firstname' & direction === 'Ascending') {
      return $(firstname, a).text().localeCompare($(firstname, b).text());
    } else if (name === 'Surname' & direction === 'Ascending') {
      return $(surname, a).text().localeCompare($(surname, b).text());
    } else if (name === 'Firstname' & direction === 'Descending') {
      return $(firstname, b).text().localeCompare($(firstname, a).text());
    } else if (name === 'Surname' & direction === 'Descending') {
      return $(surname, b).text().localeCompare($(surname, a).text());
  }).appendTo("#tblSearchResults tbody");

Open in new window

Im trying it on a test dataset as:-

<table id="tblSearchResults">
  <tr data-firstname='Herman' data-surname='Madden'><td>Herman Madden</td><td>Herman</td><td>Madden</td></tr>
  <tr data-firstname='Kasper' data-surname='Norris'><td>Kasper Norris</td><td>Kasper</td><td>Norris</td></tr>
  <tr data-firstname='Curran' data-surname='Hampton'><td>Curran Hampton</td><td>Curran</td><td>Hampton</td></tr>
  <tr data-firstname='Fuller' data-surname='Frost'><td>Fuller Frost</td><td>Fuller</td><td>Frost</td></tr>
  <tr data-firstname='Sigourney' data-surname='Morales'><td>Sigourney Morales</td><td>Sigourney</td><td>Morales</td></tr>
  <tr data-firstname='Inga' data-surname='Gardner'><td>Inga Gardner</td><td>Inga</td><td>Gardner</td></tr>
  <tr data-firstname='Jonas' data-surname='Zimmerman'><td>Jonas Zimmerman</td><td>Jonas</td><td>Zimmerman</td></tr>
  <tr data-firstname='Hiroko' data-surname='England'><td>Hiroko England</td><td>Hiroko</td><td>England</td></tr>
  <tr data-firstname='Whilemina' data-surname='Figueroa'><td>Whilemina Figueroa</td><td>Whilemina</td><td>Figueroa</td></tr>
  <tr data-firstname='Shafira' data-surname='Brennan'><td>Shafira Brennan</td><td>Shafira</td><td>Brennan</td></tr>

Open in new window

And then to sort the tables, I put a couple of buttons on, like:-

<button onclick="sortTable('FirstName', 'Ascending');">Firstname ASC</button>
<button onclick="sortTable('Surname', 'Ascending');">Surname ASC</button>
<button onclick="sortTable('FirstName', 'Descending');">Firstname DES</button>
<button onclick="sortTable('Surname', 'Descending');">Surname DES</button>

Open in new window

I dont understand why its not working, its not doing anything, even though its going through. Any suggestions of where Im going wrong?

Ive put my code on jsFiddle in the hope someone can help me :-S

Log in to continue reading
Become an EE member today7-DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform for $9.99/mo
View membership options
Unlock 1 Answer and 1 Comment.
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
See how we're fighting big data
The Value of Experts Exchange in My Daily IT Life

Experts Exchange (EE) has become my company's go-to resource to get answers. I've used EE to make decisions, solve problems and even save customers. OutagesIO has been a challenging project and... Keep reading >>


Owner of Outages.IO
Phoenix, Arizona, United States
Member Since 2016
Join a full scale community that combines the best parts of other tools into one platform.
Unlock 1 Answer and 1 Comment.
View membership options
“All of life is about relationships, and EE has made a virtual community a real community. It lifts everyone's boat.”
William Peck

Member since 2004