<hr>
<h2>Sort Table by Clicking the Headers</h2>
<p>Click the headers to sort the table.</p>
<p>Click "Name" to sort by names, and "Country" to sort by country.</p>
<p>The first time you click, the sorting direction is ascending (A to Z).</p>
<p>Click again, and the sorting direction will be descending (Z to A):</p><table class="w3-table-all w3-margin-top" id="myTable2"> <tr>
<th onclick="sortTable2(0)" style="cursor:pointer" id="typeClick">Type</th>
<th onclick="sortTable2(1)" style="cursor:pointer" id="lastnmClick">LastNm</th>
<th onclick="sortTable2(2)" style="cursor:pointer" id="fullnmClick">Fullnm</th>
<th onclick="sortTable2(3)" style="cursor:pointer" id="intakeClick">Intake</th>
<th onclick="sortTable2(4)" style="cursor:pointer" id="appdtClick">Appdt</th>
<th onclick="sortTable2(5)" style="cursor:pointer" id="apptmClick">AppTm</th>
<th onclick="sortTable2(6)" style="cursor:pointer" id="seqClick">Sequence</th>
<th onclick="sortTable2(7)" style="cursor:pointer" id="lotClick">Lot</th>
<th onclick="sortTable2(8)" style="cursor:pointer" id="signdtClick">Signdt</th>
</tr><tr>
<td>R</td>
<td>Camacho</td>
<td>Antonio Castro Camacho</td>
<td>Dededo</td>
<td>12/2/1995</td>
<td>8:00 AM</td>
<td>1</td>
<td>Tract 14119, Block 1, Lot 9, Mangilao containing an area of 1,210 +/- Sq. M.</td>
<td>1/23/1997</td>
</tr>
<tr>
<td>R</td>
<td>Quinata</td>
<td>Gregory Anthony Quinata</td>
<td>Yona</td>
<td>12/2/1995</td>
<td>8:01 AM</td>
<td>1</td>
"<td>Lot 09, Block 04, Tract 9210 (Phase - 1), Yigo</td>"
<td>1/23/1997</td>
</tr>
<tr>
<td>A</td>
<td>McDonald</td>
<td>Maria Santos Yatar McDonald</td>
<td>Merizo</td>
<td>12/2/1995</td>
<td>8:02 AM</td>
<td>1</td>
<td>Lot 472-R2, Agat containing an area of 9.36 acres</td>
<td>6/5/1997</td>
</tr>
<tr>
<td>R</td>
<td>Acfalle</td>
<td>Yvonne Leopold Acfalle</td>
<td>Dededo</td>
<td>12/2/1995</td>
<td>8:02 AM</td>
<td>2</td>
<td>Lot 7, Block 9, Tract 9210 (Phase - 1), Yigo containing an area of 929+/- square meters</td>
<td>1/23/1997</td>
</tr>
<tr>
<td>R</td>
<td>Camacho</td>
<td>Roseanna Marie Camacho</td>
<td>Yona</td>
<td>12/2/1995</td>
<td>8:03 AM</td>
<td>2</td>
<td>Lot 22, Block 17, Tract 9210 (Phase - 1), Yigo containing an area of 929+/- square meters</td>
<td>1/23/1997</td>
</tr>
<tr>
<td>R</td>
<td>Santos</td>
<td>Derrick Anthony Reyes Santos</td>
<td>Merizo</td>
<td>12/2/1995</td>
<td>8:03 AM</td>
<td>2</td>
<td>Lot 10122-45, Dededo containing an area of 1,808+/- square meters as shown on Subdivision Master Plan No. 2015-M05-15</td>
<td>1/23/1997</td>
</tr>
<tr>
<td>R</td>
<td>Hernandez</td>
<td>Georgiana Benavente Hernandez</td>
<td>Astumbo</td>
<td>12/2/1995</td>
<td>8:04 AM</td>
<td>1</td>
<td>Lot 10125-23, Dededo containing an area of 2,171+/- square meters</td>
<td>6/1/2002</td>
</tr>
<tr>
<td>R</td>
<td>Baldwin</td>
<td>Jean A. Baldwin</td>
<td>Yona</td>
<td>12/2/1995</td>
<td>8:04 AM</td>
<td>3</td>
<td>Lot 278-13-1, Umatac containing an area of 1,956+/- square meters</td>
<td>9/5/2014</td>
</tr>
<tr>
<td>R</td>
<td>Quinata</td>
<td>Teresita D. Quinata</td>
<td>Merizo</td>
<td>12/2/1995</td>
<td>8:04 AM</td>
<td>3</td>
<td>Lot 1NEW, Block 1, Tract 319, Agat containing an area of 929+/- square meters as shown on Subdivision Master Plan No. 2015-M02-4</td>
<td>1/23/1997</td>
</tr>
<tr>
<td>R</td>
<td>Starr</td>
<td>Jesusa Camacho Starr</td>
<td>Dededo</td>
<td>12/2/1995</td>
<td>8:04 AM</td>
<td>3</td>
<td>Lot 5, Block 20, Tract 9210 (Phase - 1), Yigo</td>
<td>1/23/1997</td>
</tr>
</table><script>
function sortTable2(n) {
var table, rows, switching, i, x, y, shouldSwitch, dir, switchcount = 0;
table = document.getElementById("myTable2");
switching = true;
//Set the sorting direction to ascending:
dir = "asc";
/*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.getElementsByTagName("TR");
/*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")[n];
y = rows[i + 1].getElementsByTagName("TD")[n];
/*check if the two rows should switch place,
based on the direction, asc or desc:*/
if (dir == "asc") {
if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) {
//if so, mark as a switch and break the loop:
shouldSwitch= true;
break;
}
} else if (dir == "desc") {
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;
//Each time a switch is done, increase this count by 1:
switchcount ++;
} else {
/*If no switching has been done AND the direction is "asc",
set the direction to "desc" and run the while loop again.*/
if (switchcount == 0 && dir == "asc") {
dir = "desc";
switching = true;
}
} }
}
</script>