How sort my table automatically? when loading the page?

I would like to be able to automatically load my table in the order of the first column which is composed of words, then from a to z

I use this code:

$return .= '<table  border="0" id="myTable" onl oad="function(sortTable)">';

this code is in the php, I don't cert to write the correct onload="......

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;
    }
  }
}

<table  border="0" id="myTable" onl oad="function(sortTable)">
  <thead>
    <tr>
      <th>title1</th>
      <th>year</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>z</td>
      <td>2022</td>
    </tr>
    <tr>
      <td>Abeti</td>
      <td>2010</td>
    </tr>
    <tr>
      <td>Acquasanta</td>
      <td>2008</td>
    </tr>
    <tr>
      <td>Giuseppe</td>
      <td>2011</td>
    </tr>
    <tr>
      <td>Alessandro</td>
      <td></td>
    </tr>
    <tr>
      <td>Alberto</td>
      <td>2022</td>
    </tr>
    <tr>
      <td>Akhmarova</td>
      <td>2010</td>
    </tr>
  </tbody>
</table>

CodePudding user response：

Without seeing your full code it is difficult to know how to advise. However, from what you have posted, there are two possible answers:

1. Update your JavaScript

Wherever you have declared the sortTable function (I'm assuming there must be a script tag somewhere on the page), you can also call the function there

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;
    }
  }
}

//we add an event listener so that we can be sure the page (and table) have loaded before we call our function
window.addEventListener('load', sortTable);

<table  border="0" id="myTable" onl oad="function(sortTable)">
  <thead>
    <tr>
      <th>title1</th>
      <th>year</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>z</td>
      <td>2022</td>
    </tr>
    <tr>
      <td>Abeti</td>
      <td>2010</td>
    </tr>
    <tr>
      <td>Acquasanta</td>
      <td>2008</td>
    </tr>
    <tr>
      <td>Giuseppe</td>
      <td>2011</td>
    </tr>
    <tr>
      <td>Alessandro</td>
      <td></td>
    </tr>
    <tr>
      <td>Alberto</td>
      <td>2022</td>
    </tr>
    <tr>
      <td>Akhmarova</td>
      <td>2010</td>
    </tr>
  </tbody>
</table>

-- OR --

2. Update your PHP

It looks like you are generating the content of the page by appending HTML to the $return variable. If so, you could also add a script to sort the table there

$return .= '<table  border="0" id="myTable">';
//...
//code to generate the rest of the table
//...
$return .= '</table>';

//new stuff here
$return .= '<script>';
$return .= 'window.addEventListener("load", sortTable);'
$return .= '</script>';

However, this is not as "nice" as doing it directly from the JavaScript, and it's generally better to avoid having to call javascript from php in this manner unless there's no other way to avoid it