Tabulator highlight entries on data refresh - refresh

Question

I have a tabulator table used to display statistics from live football matches, the table is updated every 60 seconds using the following function
setInterval(function(){
selectedtableData = table.getSelectedRows();
table.replaceData()
.then(function(){
var f;var filterarray= [];
for (f = 0; f < selectedtableData.length; f++) {
var rowIndex = selectedtableData[f].getIndex();
table.selectRow(rowIndex);
}
})
.catch(function(error){
//handle error loading data
});
}, 60000);
I allow users to highlight rows so this function saves the rows on refresh and refreshdata updates the table
The table is fairly standard stuff using icons for headers to conserve space and is refreshed from a Json file
var table = new Tabulator("#example-table", {
layout:"fitColumns",
ajaxURL:"../new/console.json",
// ajaxURL:"console.json",
height:800,
groupBy:"league",
paginationSize:100,
selectable:true,
index:"matchid",
selectablePersistence:true,
columns:[
{field:"",
columns:[
{width:5,headerSort:false},
{formatter:"rowSelection", titleFormatter:"rowSelection", align:"center", headerSort:false,width:10},
{title:"league", field:"league",width:5,headerSort:false,visible:false,formatter:"html"},
{title:"img/clock2.png", field:"time", sorter:"date",width:40,titleFormatter:"image",headerSort:false,headerTooltip:"Time gone"},
{title:"img/goal2.png", field:"score", sorter:"string",width:40,formatter:"html",align:"center",headerSort:false,titleFormatter:"image",headerTooltip:"Current Score"},
{headerFilter:true,title:"Teams",field:"team",headerSort:false, formatter:"html",width:160},
{title:"timep", field:"timep",visible:false},
{title:"matchid", field:"matchid",visible:false},
{title:"totalap1", field:"totalap1",visible:false},
{title:"draw", field:"draw",visible:false},
{title:"homescore", field:"homescore",visible:false},
{title:"awayscore", field:"awayscore",visible:false},
{title:"homecorners", field:"homecorners",visible:false},
{title:"awaycorners", field:"awaycorners",visible:false},
{title:"homesont", field:"homesont",visible:false},
{title:"awaysont", field:"awaysont",visible:false},
{title:"homesoft", field:"homesoft",visible:false},
{title:"awaysoft", field:"awaysoft",visible:false},
{title:"homeposs", field:"homeposs",visible:false},
{title:"awayposs", field:"awayposs",visible:false},
{title:"homeda", field:"homeda",visible:false},
{title:"awayda", field:"awayda",visible:false},
{title:"homelp", field:"homelp",visible:false},
{title:"awaylp", field:"awaylp",visible:false},
{title:"homeyc", field:"homeyc",visible:false},
{title:"awayyc", field:"awayyc",visible:false},
{title:"homerc", field:"homerc",visible:false},
{title:"awayrc", field:"awayrc",visible:false},
{title:"homet", field:"homet",visible:false},
{title:"awayt", field:"awayt",visible:false},
{title:"img/pressure2.png",field:"pi1",width:30,formatter:"html",titleFormatter:"image",headerClick:ap1sort,headerSort:false,align:"center",headerTooltip:"Attacking Pressure1",
cellMouseEnter:function(e, cell, row){var row=cell.getRow().getData();
var celldata=cell.getElement();if (!celldata._tippy){tippy(celldata, { content: "Attacking Pressure <iframe style=\"background:#FFFFFF;\" src=\"../pressure/showgraph.php?gameid="+row.matchid+"&pi=pi1&time="+row.timep+"\" width=420 height=225></iframe>",maxWidth:"450px",a11y: false,arrow:true,
})}celldata._tippy.show();}},
{title:"img/pressure2.png",field:"pi2",width:30,formatter:"html",headerSort:false,titleFormatter:"image",headerTooltip:"Attacking Pressure2",
cellMouseEnter:function(e, cell, row){var row=cell.getRow().getData();
var celldata=cell.getElement();if (!celldata._tippy){tippy(celldata, { content: "Attacking Pressure 2 <iframe style=\"background:#FFFFFF;\" src=\"../pressure/showgraph.php?gameid="+row.matchid+"&pi=pi2&time="+row.timep+"\" width=420 height=225></iframe>",maxWidth:"450px",a11y: false,arrow:true,
})}celldata._tippy.show();}},
{title:"img/poss.png", field:"poss",headerSort:false,headerTooltip:"possesion",width:50,formatter:"html",titleFormatter:"image"},
{title:"img/soont.png" , field:"shotsont", sorter:"number", width:45,align:"center",headerSort:false,titleFormatter:"image",formatter:"html",headerTooltip:"Shots on Target"},
{title:"img/sooft.png" , field:"shotofft", sorter:"number", width:45,align:"center",headerSort:false,titleFormatter:"image",formatter:"html",headerTooltip:"Shots off Target"},
{title:"img/shotsinbox.png" , field:"sinbox", width:40,titleFormatter:"image",headerTooltip:"Shots in the Box",headerSort:false,align:"center",formatter:"html",headerTooltip:"Shots in the Box"},
{title:"img/dattacks.png" , field:"dattack", sorter:"number", width:60,headerSort:false,align:"center",titleFormatter:"image",formatter:"html",headerTooltip:"Dangerous attacks"},
{title:"img/attacks.png" , field:"attack", sorter:"number", width:60,headerSort:false,align:"center",titleFormatter:"image",formatter:"html",headerTooltip:"Attacks"},
{title:"img/corner.png" , field:"corners", width:40,titleFormatter:"image",headerTooltip:"Corners",headerSort:false,align:"center",formatter:"html",headerTooltip:"Corners"},
{title:"img/foul.png" , field:"fouls", width:40,headerSort:false,align:"center",formatter:"html",titleFormatter:"image",headerTooltip:"Fouls"},
{title:"img/ycard.png" , field:"ycards", width:30 ,titleFormatter:"image",headerTooltip:"Yellow Card",headerSort:false,align:"center",formatter:"html"},
{title:"img/rcard.png" , field:"rcards", width:30 ,titleFormatter:"image",headerTooltip:"Red Card",headerSort:false,align:"center",formatter:"html"},
{title:"img/form.png", field:"form",headerSort:false,headerTooltip:"form",formatter:"html",width:100,align:"center",titleFormatter:"image",
cellMouseEnter:function(e, cell, row){var row=cell.getRow().getData();
var celldata=cell.getElement();if (!celldata._tippy){tippy(celldata, { content: "% Stats are based on the last 5 games<iframe style=\"background:#FFFFFF;\" src=\"../stats/games/"+today+"/"+row.matchid+".html\" width=620 height=225</iframe>",maxWidth:"650px",a11y: false,arrow:true,
})}celldata._tippy.show();}},
]},
{title:"Previous 10 mins",
columns:[
{title:"img/poss.png", field:"10poss",headerSort:false,headerTooltip:"Possesion - Last 10 mins",width:74,formatter:"html",titleFormatter:"image"},
{title:"img/soont.png" , field:"10shotsont", sorter:"number", width:45,align:"center",headerSort:false,titleFormatter:"image",formatter:"html",headerTooltip:"Shots on Target - Last 10 mins"},
{title:"img/sooft.png" , field:"10shotofft", sorter:"number", width:45,align:"center",headerSort:false,titleFormatter:"image",formatter:"html",headerTooltip:"Shots off Target - Last 10 mins"},
{title:"img/dattacks.png" , field:"10dattack", sorter:"number", width:55,headerSort:false,align:"center",titleFormatter:"image",formatter:"html",headerTooltip:"Dangerous attacks - Last 10 mins"},
{title:"img/corner.png" , field:"10corners", width:30,titleFormatter:"image",headerTooltip:"Corners",headerSort:false,align:"center",formatter:"html",headerTooltip:"Corners - Last 10 mins"},
]},
{title:"Previous 5 mins",
columns:[
{title:"img/poss.png", field:"5poss",headerSort:false,headerTooltip:"Possesion - Last 5 mins",width:74,formatter:"html",titleFormatter:"image",visible:false},
{title:"img/soont.png" , field:"5shotsont", sorter:"number", width:45,align:"center",headerSort:false,titleFormatter:"image",formatter:"html",visible:false,headerTooltip:"Shots on Target - Last 5 mins"},
{title:"img/sooft.png" , field:"5shotofft", sorter:"number", width:45,align:"center",headerSort:false,titleFormatter:"image",formatter:"html",visible:false,headerTooltip:"Shots off Target - Last 5 mins"},
{title:"img/dattacks.png" , field:"5dattack", sorter:"number", width:55,headerSort:false,align:"center",titleFormatter:"image",formatter:"html",visible:false,headerTooltip:"Dangerous attacks - Last 5 mins"},
{title:"img/corner.png" , field:"5corners", width:30,titleFormatter:"image",headerTooltip:"Corners",headerSort:false,align:"center",formatter:"html",visible:false,headerTooltip:"Corners - Last 5 mins"},
]},
{title:"Previous 20 mins",
columns:[
{title:"img/poss.png", field:"20poss",headerSort:false,headerTooltip:"Possesion - Last 20 mins",width:74,formatter:"html",titleFormatter:"image",visible:false},
{title:"img/soont.png" , field:"20shotsont", sorter:"number", width:45,align:"center",headerSort:false,titleFormatter:"image",formatter:"html",visible:false,headerTooltip:"Shots on Target - Last 20 mins"},
{title:"img/sooft.png" , field:"20shotofft", sorter:"number", width:45,align:"center",headerSort:false,titleFormatter:"image",formatter:"html",visible:false,headerTooltip:"Shots off Target - Last 20 mins"},
{title:"img/dattacks.png" , field:"20dattack", sorter:"number", width:55,headerSort:false,align:"center",titleFormatter:"image",formatter:"html",visible:false,headerTooltip:"Dangerous attacks - Last 20 mins"},
{title:"img/corner.png" , field:"20corners", width:30,titleFormatter:"image",headerTooltip:"Corners",headerSort:false,align:"center",formatter:"html",visible:false,headerTooltip:"Corners - Last 20 mins"},
]},],
}
) };
The datafile is a simple Json file, it can contain 300+ nodes or just one depening on how many games are ongoing
{
"league" : "<img src=flags/iran.png> Iran :- Azadegan League",
"time" : "90+",
"selectmh" : "",
"timep" : "90",
"matchid" : "1084ED7",
"team" : "Mes Rafsanjan FC(3)<br>Sepidrood Rasht(16)",
"score" : "<b>1<br>0</b>",
"homescore" : "1",
"awayscore" : "0",
"totalg" : "1",
"totalshot" : "0",
"totalshotot" : "0",
"totalda" : "0",
"totalco" : "0",
"totalshotib" : "0",
"scorediff" : "1",
"homecorners" : "0",
"awaycorners" : "0",
"homesont" : "0",
"awaysont" : "0",
"homesoft" : "0",
"awaysoft" : "0",
"homeposs" : "0",
"awayposs" : "0",
"homeda" : "0",
"awayda" : "0",
"homelp" : "3",
"awaylp" : "16",
"homeyc" : "0",
"awayyc" : "0",
"homerc" : "0",
"awayrc" : "0",
"homet" : "Mes Rafsanjan FC",
"awayt" : "Sepidrood Rasht",
"activity" : "",
"pi1" : "0<br>10",
"pi2" : "1<br>1",
"hpi1" : "0",
"api1" : "10",
"hpi2" : "1",
"api2" : "1",
"poss" : "0%<br>0%",
"sinbox" : "0<br>0",
"shotsont" : "0<br>0",
"shotofft" : "0<br>0",
"corners" : "0<br>0",
"dattack" : "0<br>0",
"attack" : "0<br>0",
"fouls" : "0<br>0",
"ycards" : "0<br>0",
"rcards" : "0<br>0",
"10poss" : "0%<br>0%",
"10hshotsont" : "0",
"10ashotsont" : "1",
"10tshotsont" : "1",
"5tshotsont" : "0",
"20tshotsont" : "1",
"5shotofftt" : "0",
"5cornert" : "0",
"10shotofftt" : "0",
"10cornert" : "0",
"10shotsont" : "0<br><span class=away>1</span>",
"10shotofft" : "0<br>0",
"10corners" : "0<br>0",
"10dattack" : "2<br>2",
"20hshotsont" : "0",
"20ashotsont" : "1",
"20poss" : "0%<br>0%",
"20shotsont" : "0<br><span class=away>1</span>",
"20shotofft" : "0<br>0",
"20corners" : "0<br>0",
"20dattack" : "13<br>9",
"5hshotsont" : "0",
"5ashotsont" : "0",
"5poss" : "0%<br>0%",
"5shotsont" : "0<br>0",
"5shotofft" : "0<br>0",
"5corners" : "0<br>0",
"5dattack" : "0<br>0",
"form" : "<span class=d>D</Span><span class=lost>L</Span><span class=w>W</Span><span class=w>W</Span><span class=w>W</Span><br><span class=lost>L</Span><span class=lost>L</Span><span class=lost>L</Span><span class=lost>L</Span><span class=lost>L</Span>",
"draw" : "0",
"totalap1" : "10"}
As the data refreshes the score can change and I want to highlight this, I could do it in the source json file by adding some CSS attributes to highlight it but as time is critical in this app then this would be an extra comparsion and I would need to store the previuos score somewhere and retrieve it, is there any function I can use in Tabulator to apply some CSS automatically if the values have changed from the previous refresh
Hope that all makes sense

Answer 1

So I eventually solved this outside of tabulator, I have a php script which creates the JSON tabulator reads, in this file I compared the last score with the current score, if they matched I set a JSON variable , then in tabulator i made this Varibale non visible and added a row formatter function to the score. So my variable is gs (goal scored) and I set this to 1 if a goal has been scored
{title:"img/goal2.png", field:"score", sorter:"string",width:40,align:"center",headerSort:false,titleFormatter:"image",headerTooltip:"Current Score",formatter:function(row,cell, formatterParams, onRendered){
var data = row.getData();
if (data.gs==1)
{var score2= '<span class="blinking">'+data.score+'</span>';}
else
{var score2=data.score;}
return score2;
},},
I then added some css
.blinking{
animation:blinkingText 1.2s infinite;
}
#keyframes blinkingText{
0%{ color: #FF0000; }
49%{ color: #FF0000; }
60%{ color: transparent; }
99%{ color:transparent; }
100%{ color: #FF0000; }
}
The data updates every 30 seconds so the blink effect is set to infinite and is then overwritten
probably not the neatest way to do it but it works