Sort table

Sort tables

by Imri Paloja

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css">
<div class="container">

<table class="AnalyticsTable platform">
				<caption>Operating System(<b>2043</b>)</caption>
		<tbody>
	
        <tr>
            <th onclick="sortTable('platform', 0)"><small>String</small></th>
            <th onclick="sortTable('platform', 1)"><small>#</small></th>
        </tr>		<tr>
			<td title="Ubuntu">Ubuntu</td>
			<td title="1701">1701</td>
		</tr>
		<tr>
			<td title="Linux">Linux</td>
			<td title="26">26</td>
		</tr>
		<tr>
			<td title="unknown">unknown</td>
			<td title="10">10</td>
		</tr>
		<tr>
			<td title="Android">Android</td>
			<td title="11">11</td>
		</tr>
		<tr>
			<td title="Win10">Win10</td>
			<td title="5">5</td>
		</tr>
		<tr>
			<td title="macOS">macOS</td>
			<td title="288">288</td>
		</tr>
		<tr>
			<td title="iOS">iOS</td>
			<td title="2">2</td>
		</tr>
		</tbody>
	</table>
  <table class="AnalyticsTable Page">
				<caption>Page(<b>2043</b>)</caption>
		<tbody>
	
        <tr>
            <th onclick="sortTable('Page', 0)"><small>String</small></th>
            <th onclick="sortTable('Page', 1)"><small>#</small></th>
        </tr>		<tr>
			<td title="/">/</td>
			<td title="150">150</td>
		</tr>
		<tr>
			<td title="/favicon.ico">/favicon.ico</td>
			<td title="986">986</td>
		</tr>
		<tr>
			<td title="/admin/">/admin/</td>
			<td title="28">28</td>
		</tr>
		<tr>
			<td title="/admin">/admin</td>
			<td title="74">74</td>
		</tr>
		<tr>
			<td title="/admin/login">/admin/login</td>
			<td title="152">152</td>
		</tr>
		<tr>
			<td title="/admin/Files">/admin/Files</td>
			<td title="94">94</td>
		</tr>
		<tr>
			<td title="/admin/user">/admin/user</td>
			<td title="2">2</td>
		</tr>
		<tr>
			<td title="/users/imri/avatar">/users/imri/avatar</td>
			<td title="1">1</td>
		</tr>
		<tr>
			<td...

CSS

table {
  width: 100%;
}

JavaScript

function sortTable(tableClass, n) {
    var table, rows, switching, i, x, y, shouldSwitch, dir, switchcount = 0;

    table = document.getElementsByClassName(tableClass)[0];
    switching = true;
    dir = "asc";
    while (switching) {
        switching = false;
        rows = table.getElementsByTagName("tr");
        for (i = 1; i < (rows.length - 1); i++) {
            shouldSwitch = false;
            x = rows[i].getElementsByTagName("td")[n];
            y = rows[i + 1].getElementsByTagName("td")[n];
            var xContent = (isNaN(x.innerHTML))
                ? (x.innerHTML.toLowerCase() === '-')
                    ? 0 : x.innerHTML.toLowerCase()
                : parseFloat(x.innerHTML);
            var yContent = (isNaN(y.innerHTML))
                ? (y.innerHTML.toLowerCase() === '-')
                    ? 0 : y.innerHTML.toLowerCase()
                : parseFloat(y.innerHTML);
            if (dir == "asc") {
                if (xContent > yContent) {
                    shouldSwitch= true;
                    break;
                }
            } else if (dir == "desc") {
                if (xContent < yContent) {
                    shouldSwitch= true;
                    break;
                }
            }
        }
        if (shouldSwitch) {
            rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
            switching = true;
            switchcount ++;
        } else {
            if (switchcount == 0 && dir == "asc") {
                dir = "desc";
                switching = true;
            }
        }
    }
}