How to Rank in a List, The Most Accessed Table Link

Question

I am creating a dynamic table in Javascript to represent a set of favorite links that will be managed through HTML document.

Example

document.getElementById('resultado').innerHTML =[
'<table>',
 '<tr>',
'<th>ID</th>',
'<th>RESULTADO</th>',
'</tr>',
'<tr>',
'<td>1</td>',
'<td id="cel1">http://www.br.ask.com</td>',
'</tr>',
'<tr>',
'<td>2</td>',
'<td id="cel1">http://www.google.com</td>',
'</tr>',
'<tr>',
'<td>3</td>',
'<td  id="cel3">http://www.yahoo.com</td>',
'</tr>',
'<tr>',
'<td>4</td>',
'<td id="cel4">https://www.bing.com/</td>',
'</tr>',
'<tr>',
'<td>5</td>',
'<td id="cel5">http://www.likata.com/</td>',
'</tr>',
'</table>'
].join('\n');


var text_01 = document.getElementById('cel1').innerHTML;

var text_02 = document.getElementById('cel3').innerHTML;

var conta = 0;

var clic = document.getElementById('cel3');

clic.onclick = function() 
{  
if(conta == 4) conta = pos();

conta++;
}

pos = function()
{
document.getElementById('cel1').innerHTML = text_02;
document.getElementById('cel3').innerHTML = text_01;
}

table{
width: 100%;
border: thin solid silver;
color: white;
}
th{
background-color: black;
color: white;
}
tr td{
background-color: white;
color: black;
}

<span id="resultado"></span>

   

The links that receive the highest number of clicks, go up to the first lines

Note Figures 1 and 2 below:

Before

In this illustrative example, since the user clicked countless times about the Link - "www.yahoo.com" and soon this rises to the top places. See:

Afterward

I will make a brief comparison to illustrate. Let’s see:

Here in the pt.stackoverflow where it says:

"The best responses receive positive votes and rise to the top"

In that same line of thinking, I mention:

"The links that receive the highest number of clicks/visits, go up to the first lines"

But for the "Link" most accessed appear between the first lines, it is necessary to create the script with techniques to improve classification.

CITO Sources reference on part of the subject:

html-e-javascript-swapping-two-elements-position-swap

Implementing a list of objects with the option to change their positions in the list

I need to change the value of a column in a table with javascript. How to do?

Answer 1

The algorithm described is quite different from page-rank.

It seems to me a matter of implementing a build up with weight in time for each page per user.

Each time the user views a page, you go in the pertinent record to that page and add a weight, which compared to the weights of other pages says in what order it is.

The value to be added becomes bigger and bigger with the passage of time, so it has to be a kind of floating point. It looks like this:

adicionar = Math.pow(2, (new Date()).getTime() * 3.17098e-11 - 46);
pagina.peso += adicionar;

Thus, pages visited a long time ago lose relevance compared to other recently visited pages.

In the example above, what I did was this::

• (new Date()).getTime() - takes an absolute time on Javascript... is the number of milliseconds since 1970 I think... a thing like this, what matters is that it is absolute.
• ... * 3.17098e-11 - i want to control the loss of relevance in years, so multiply the value of milliseconds so that’s the amount of years in a millisecond (fractional value).
• ...- 46 - I’m taking away the years passed since 1970, to be small the number, since I will use the number as exponent.
• Math.pow(2, ...) - I raise 2 to the number previously obtained, which makes the value of a visit double each year that passes. If you want it to triple, just use a 3, quadruple a 4, and so on.

About persistence, no matter if persistence is done in cookie... where you think best, it can be local-Torage, on a server itself, or in javascript memory.

Example

I’ll give you an example using only the standard features of modern browsers. (works on Chrome 51):

• I will store the data in Javascript memory, so there will be no persistence between page loads... for this it is possible to use localstorage
• I will rebuild the table each time it is necessary
• I will double the base note every 24 hours instead of 365 days to make the effect more easily noticeable

var nota;
var data = [{
  id: 1,
  link: "www.google.com",
  nota: 0
}, {
  id: 2,
  link: "www.yahoo.com",
  nota: 0
}];
var elNota = document.getElementById("nota");
var btnAdd = document.getElementById("btnAdd");
var txtLink = document.getElementById("txtLink");
var linkTable = document.getElementById("linkTable");
btnAdd.addEventListener("click", function(e) {
  var tbody = linkTable.getElementsByTagName('tbody')[0];
  var id = data.length + 1;
  var newLink = txtLink.value;
  data.push({
    id: id,
    nota: 0,
    link: newLink
  });
  reconstruirTabela();
});

function truncate(number, mul) {
  return Math[number < 0 ? 'ceil' : 'floor'](number * mul) / mul;
};

function step(timestamp) {
  nota = 10 * truncate(Math.pow(2, (new Date() * 3.17098e-11 - 46) * 365 - 218), 10000);
  elNota.innerHTML = nota.toFixed(3);
  window.requestAnimationFrame(step);
}

window.requestAnimationFrame(step);

function setupLinkCell(cell, item) {
  cell.className += " linkCell";
  cell.onclick = function(e) {
    item.nota += nota;
    reconstruirTabela();
  };
  return cell;
}

function reconstruirTabela() {
  var tbody = linkTable.getElementsByTagName('tbody')[0];
  var sorted = data.sort(function(a, b) {
    var cmp;
    cmp = a.nota < b.nota ? -1 : a.nota == b.nota ? 0 : 1;
    if (cmp != 0) return -cmp;
    cmp = a.link < b.link ? -1 : a.link == b.link ? 0 : 1;
    return cmp;
  });
  for (var j = 0; j < sorted.length; j++) {
    var item = sorted[j];
    var row = tbody.rows[j] || tbody.insertRow(j);
    (row.cells[0] || row.insertCell(0)).innerHTML = item.id;
    (row.cells[1] || row.insertCell(1)).innerHTML = item.nota;
    (setupLinkCell(row.cells[2] || row.insertCell(2), item)).innerHTML = item.link;
  }
}

reconstruirTabela();

table {
  width: 100%;
}
thead {
  background-color: black;
  color: white;
}
td {
  border: 1px slid black;
}
.fill {
  width: 100%;
}
.fill > * {
  width: 100%;
}
#btnAdd {
  width: 200px;
}
.notes {
  color: blue;
  font-style: italic;
}
#nota {
  font-weight: bold;
}
.linkCell {
  color: blue;
  cursor: pointer;
}

<table>
  <row>
    <td class="fill">
      <input type="text" name="txtLink" id="txtLink" />
    </td>
    <td>
      <button id="btnAdd">Adicionar Link</button>
    </td>
  </row>
</table>
<div>
  <span>Nota de um clique</span>
  <span id="nota">?</span>
  <span class="notes"> - essa nota dobra a cada 24h</span>
</div>

<table id="linkTable">
  <thead>
    <row>
      <th width="100">Id</th>
      <th width="100">Nota</th>
      <th>Link</th>
    </row>
  </thead>
  <tbody></tbody>
</table>