0

I have a table cell within my HTML table which contains information - amongst that information is a price (class .amount). I want to sort the table rows by that class using jQuery when the page loads.

Example.

<table>
<tr>
    <td>data</td> <td>data</td> <td>data</td> <td>info info html <span class="amount">10</span></td>
</tr>

<tr>
    <td>data</td> <td>data</td> <td>data</td> <td>info info html <span class="amount">40</span></td>
</tr>

<tr>
    <td>data</td> <td>data</td> <td>data</td> <td>info info html <span class="amount">30</span></td>
</tr>

<tr>
    <td>data</td> <td>data</td> <td>data</td> <td>info info html <span class="amount">16</span></td>
</tr>

etc

I do not require client side table sorting. I just want the table to be pre-arranged for the user so I would like not to use a library.

if you would like to see the page in question please use a popular mobile useragent and visit http://mobilereactor.co.uk/shop/mobile-phones/samsung-galaxy-a3-black-deals/ under contracts tab.

15
  • I don't see id="amount" anywhere
    – HenryDev
    Apr 5, 2016 at 2:35
  • sorry I meant to say class Apr 5, 2016 at 2:36
  • 1
    "I want to sort the table rows by that class" Sort by what variable ? What is expected result ? "I just want the table to be pre-arranged for the user so I would like not to use a library" What is purpose of including jquery tag ? Apr 5, 2016 at 2:40
  • 1
    "I want to sort the table by the variable .class amount" html at Question contains one .amount element . Sort how ? What is expected result ? Apr 5, 2016 at 2:48
  • 1
    @Scott Can you describe how the sort should be performed ? Should greatest number be first ? Should least number be last ? Apr 5, 2016 at 2:50

2 Answers 2

3

Loop through all rows and get the values in the amount field, then sort the array and replace all the rows in the new order:

$(document).ready(function(e) {
  var dataRows = [];

  //Create an array of all rows with its value (this assumes that the amount is always a number.  You should add error checking!!  Also assumes that all rows are data rows, and that there are no header rows.  Adjust selector appropriately.
  $('tr').each(function(i,j) {
    dataRows.push({'amount': parseFloat($(this).find('.amount').text().replace(/[^\d\.\-]/g, '')), 'row': $(this)});
  })

  //Sort the data smallest to largest
  dataRows.sort(function(a, b) {
   return a.amount - b.amount;
  });

  //Remove existing table rows.  This assumes that everything should be deleted, adjust selector if needed :).
  $('table').empty();

  //Add rows back to table in the correct order.
  dataRows.forEach(function(ele) {
    $('table').append(ele.row);
  })
})
3
-1

One more solution. Replace the index comparer(3) here to sort by other columns. (Note: 0 based index)

var table =  $('table');   
var rows = table.find('tr:gt(0)').toArray().sort(comparer(3)) ;     
for (var i = 0; i < rows.length; i++) {
  table.append(rows[i])
}

function comparer(index) {  
  return function(a, b) {      
    var valA = getCellValue(a, index),
      valB = getCellValue(b, index);    
    return $.isNumeric(valA) && $.isNumeric(valB) ?  valA - valB  : valA.localeCompare(valB)  
  }
}

function getCellValue(row, index) {
  return $(row).children('td').eq(index).html();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>info info html <span class="amount">10</span>
    </td>
  </tr>

  <tr>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>info info html <span class="amount">40</span>
    </td>
  </tr>

  <tr>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>info info html <span class="amount">30</span>
    </td>
  </tr>

  <tr>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>info info html <span class="amount">16</span>
    </td>
  </tr>
</table>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.