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

Question

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

Navigation

#1 by (4 votes)

1

I'm creating a PivotTable 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>

Links that get the highest number of clicks go up to the first few lines

Look at Figures 1 and 2 below:

Before

Inthisillustrativeexample,astheuserclickednumeroustimesonLink-"www.yahoo.com" and soon it goes up to the top places. See:

Then

Iwillmakeabriefcomparisontoexemplify.Let'ssee:

Herein.stackoverflowwhereitsays:

"The best answers are positive and go up to the top"

In this same line of thinking, I mention:

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

But for the "Link" most accessed appear between the first few lines, you need to create script with techniques to improve sorting.

I quote referral on part of the subject :

html-and-javascript-changing-two- elements-of-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?

javascript cookies lado-do-cliente

asked by anonymous 21.07.2016 / 03:53

1 answer

Get instance of child class Div or image appears only inside another

score 4 · Accepted Answer

The algorithm described is quite different from page-rank.

It seems like a matter of implementing a weight-in-time build for each page per user.

Each time the user views a page, you go into the relevant registry 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 more and more over time, so it has to be a floating-point type. It looks like this:

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

In this way, the page visited a long time ago loses relevance in front of other visited recently.

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

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

About persistence, it does not matter if persistence is done in cookie ... wherever you think best, it can be local-storage, on your own server, 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 the JavaScript memory, so there will be no persistence between page loads ... for this it is possible to use localstorage
I will rebuild the table every time it is needed
I will double the base note every 24h 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>