我有一个制表器表，用于显示现场足球比赛的统计数据，该表使用以下功能每60秒更新一次
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);
我允许用户突出显示行，因此此功能在刷新时保存行，而refreshdata更新表
该表是相当标准的东西，使用图标作为标题以节省空间，并从Json文件刷新
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"},
]},],
}
) };
数据文件是一个简单的Json文件，它可以包含300多个节点，或者仅取决于一个游戏正在进行的数量
{
"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"}
随着数据刷新，分数可能会改变，我想突出显示它，我可以在源json文件中通过添加一些CSS属性来突出显示它，但是由于时间在此应用中很关键，因此这将是一个额外的比较，我需要将previuos得分存储在某个地方并检索它，如果值已从上次刷新中更改，我是否可以在Tabulator中使用任何功能来自动应用一些CSS]
希望一切都有意义
我有一个制表器表，用于显示现场足球比赛的统计数据，该表每60秒使用以下函数setInterval（function（）{...
所以我最终在制表符之外解决了这个问题，我有一个创建JSON制表符读取的php脚本，在此文件中，我将最后一个得分与当前得分进行了比较，如果它们匹配，我设置了一个JSON变量，则在制表符中此Varibale不可见，并在分数中添加了行格式化程序功能。因此，我的变量是gs（目标得分），如果已经进球，则将其设置为1