如何设置动态生成的表行的限制?

时间:2017-01-17 15:29:25

标签: javascript html css thymeleaf

我有一个动态生成的表,每次刷新页面时都会插入一行新数据。我如何限制表格,它只显示最多7个表格行,一旦达到7个表格,用数据更新表格现有表格行而不是添加新行。我的应用程序包括前端的thymeleaf,后端的java / springboot。

我正在使用此脚本的百里香叶自动生成我的代码。

ClassTechnology..Writing.instruments = c(0, 0, 0, 0, 0, 0, 
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0), ClassTechnology..Ink.and.lead.refills = c(0, 
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0), 
ClassTechnology..Printing.machinery.and.equipment = c(0, 
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0), 
ClassTechnology..Printing.machinery.accessories = c(0, 0, 
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0), ClassTechnology..Printing.accessories = c(0, 
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0), 
ClassTechnology..Book.binding.and.sewing.equipment.and.accessories = c(0, 
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0), 
ClassTechnology..Printing.laboratory.equipment.and.accessories = c(0, 
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0), 
ClassTechnology..Lecterns.and.sound.systems.and.accessories = c(0L, 
0L, 0L, 0L, 0L, 0L, 0L, 0L, 0L, 0L, 0L, 0L, 0L, 0L, 0L, 0L, 
0L, 0L, 0L, 0L), ClassTechnology..Projectors.and.supplies = c(0, 
0, 0, 0, 0, 0, 0, 0, 0.28903076, 0, 0, 0, 0, 0, 0.086521352, 
0, 0, 0, 0, 0), ClassTechnology..Audio.presentation.and.composing.equipment.and.hardware.and.controllers = c(0, 
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0), 
ClassTechnology..Video.and.combination.video.and.audio.presentation.equipment.and.hardware.and.controllers = c(0, 
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0), 
ClassTechnology..Phone.and.video.conference.equipment.and.hardware.and.controllers = c(0.0695846, 
0, 0, 0.2, 0, 0, 0, 0, 0.190946024, 0, 0.2, 0, 0, 0, 0.086521352, 
0.2, 0, 0, 0, 0), ClassTechnology..Microfilm.equipment.and.supplies = c(0, 
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0), 
ClassTechnology..Cameras = c(0.8608308, 0, 0, 0.2, 0, 0, 
0.25, 0, 0, 0, 0.2, 0.792574627, 0.25, 0.25, 0.913478648, 
0.2, 0, 0, 1, 0), ClassTechnology..Camera.accessories = c(0, 
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0.086521352, 0, 0, 
0, 0, 0), ClassTechnology..Photographic.processing.equipment = c(0, 
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0), 
ClassTechnology..Microfilm.production.equipment.and.supplies = c(0, 
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0), 
ClassTechnology..Darkroom.supplies = c(0, 0, 0, 0, 0, 0, 
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0), ClassTechnology..Firearms = c(0, 
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0.740435943, 0, 0, 
0, 0, 0), ClassTechnology..Arms.and.ammunition.accessories = c(0L, 
0L, 0L, 0L, 0L, 0L, 0L, 0L, 0L, 0L, 0L, 0L, 0L, 0L, 0L, 0L, 
0L, 0L, 0L, 0L)
ClassTechnology..Video.and.combination.video.and.audio.presentation.equipment.and.hardware.and.controllers = c(0, 
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0), 
ClassTechnology..Phone.and.video.conference.equipment.and.hardware.and.controllers = c(0.0695846, 
0, 0, 0.2, 0, 0, 0, 0, 0.190946024, 0, 0.2, 0, 0, 0, 0.086521352, 
0.2, 0, 0, 0, 0), ClassTechnology..Microfilm.equipment.and.supplies = c(0, 
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0), 
ClassTechnology..Cameras = c(0.8608308, 0, 0, 0.2, 0, 0, 
0.25, 0, 0, 0, 0.2, 0.792574627, 0.25, 0.25, 0.913478648, 
0.2, 0, 0, 1, 0), 

2 个答案:

答案 0 :(得分:0)

您需要为您的数据实现名为pagination的名称。您可能有兴趣查看Thymeleaf Spring Data Dialect

答案 1 :(得分:0)

当您的页面正在刷新并且您不想跟踪最大行时,您可以使用localStorage

var max = 5;
var currentRowsCount = localStorage.get('rowsInsreted') || 0;
if(currentRowsCount < max){
  // insert new row 
  localStorage.setItem("rowsInsreted", currentRowsCount+1));
}

Nice article for localstorage