Question

I have a table in database that has 2 columns Name | Age, I display it in a HTML page.

I want to sort the table in HTML page based on a field when the user clicks on it.

I have a PHP function to do the sorting based on a field.

But after obtaining the rows in sorted order in PHP, I’m looking for ways by which I can update the HTML table without navigating away from the page.

Answer 1

You can do sorting in javascript, without having to communicate with the server. For example, this code will sort a table based on the content of the Nth column:

function sortTable(table, column, skipHeader) {
  // Stick each row into an array.
  var rows = [];
  for (var i = skipHeader ? 1 : 0; i < table.rows.length; i++) {
    rows.push(table.rows[i]);
  }

  // Sort the array based on the innerText of the column'th cell in each row
  rows.sort(function(a, b){ 
    a = a.cells[column].innerText;
    b = b.cells[column].innerText;
    return a < b ? -1 : (b < a ? 1 : 0);
  });

  // Re-order the rows by removing/appending in the sort order
  for (var i = 0; i < rows.length; i++) {
    var row = rows[i];
    var container = row.parentElement;
    container.removeChild(row);
    container.appendChild(row);
  }
}

For example, to sort the first table in the document, on the first column, and skip the header row:

sortTable(document.getElementsByTagName('table')[0], 0, true);

Obviously you’ll want to modify this to suit your own tastes, especially the sorting, but it’s a lot simpler than having to post the data back to the server, which I think is what you’re proposing.