how to reorder table rows based on a column?

Question

So i have table being echoed using php. i take data from the database and i populate the table. now i have data coming not in order. so my table is not in order. here is the table like

product | quantity | amount
===========================
Samosa  |   2      | 20
Shwarma |   1      | 50
Fries   |   1      | 30

i want to reorder the table using any method javascript,jquery,php. i want the amount to be in descending order like this

product | quantity | amount
===========================
Shwarma |   1      | 50
Fries   |   1      | 30
Samosa  |   2      | 20

things to note that 1) i calculate the amount after i fetch the data so i can't order it using mysql ORDER BY 2) i fetch and populate the data using an ajax request.

how do i do that?

Answer 1

You can do it with PHP using uasort:

uasort($data, function ($a, $b) {
    return $a['quantity '] > $b['quantity '];
});

Answer 2

May below code is work for you. As per your requirement I am code some line.

$myData = array(
    array(
        'product' => 'Samosa',
        'quantity' => '2',
        'amount' => '20',
    ),
    array(
        'product' => 'Shwarma',
        'quantity' => '1',
        'amount' => '50',
    ),
    array(
        'product' => 'Fries',
        'quantity' => '1',
        'amount' => '30',
    )
);
echo '<pre>';
print_r($myData);
uasort($myData, function($a, $b) {
    return $a['amount'] < $b['amount'];
});

print_r($myData);
die;

output of code is

input

Array
(
    [0] => Array
        (
            [product] => Samosa
            [quantity] => 2
            [amount] => 20
        )

    [1] => Array
        (
            [product] => Shwarma
            [quantity] => 1
            [amount] => 50
        )

    [2] => Array
        (
            [product] => Fries
            [quantity] => 1
            [amount] => 30
        )

)

result :

Array
(
    [0] => Array
        (
            [product] => Shwarma
            [quantity] => 1
            [amount] => 50
        )

    [1] => Array
        (
            [product] => Fries
            [quantity] => 1
            [amount] => 30
        )

    [2] => Array
        (
            [product] => Samosa
            [quantity] => 2
            [amount] => 20
        )

)

Answer 3

this function worked for me.

function sortTable() {
  var table, rows, switching, i, x, y, shouldSwitch;
  table = document.getElementById("myTable");
  switching = true;
  /* Make a loop that will continue until
  no switching has been done: */
  while (switching) {
    // Start by saying: no switching is done:
    switching = false;
    rows = table.rows;
    /* Loop through all table rows (except the
    first, which contains table headers): */
    for (i = 1; i < (rows.length - 1); i++) {
      // Start by saying there should be no switching:
      shouldSwitch = false;
      /* Get the two elements you want to compare,
      one from current row and one from the next: */
      x = rows[i].getElementsByTagName("TD")[0];
      y = rows[i + 1].getElementsByTagName("TD")[0];
      // Check if the two rows should switch place:
      if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) {
        // If so, mark as a switch and break the loop:
        shouldSwitch = true;
        break;
      }
    }
    if (shouldSwitch) {
      /* If a switch has been marked, make the switch
      and mark that a switch has been done: */
      rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
      switching = true;
    }
  }
}