我正在使用动态HTML表,因为我的数据量很大,所以我在其中显示数据的方式就像在HTML表中一样,所以我正在做的事情是显示将固定在一个屏幕上的数据量,所以这里我显示12行一次,然后在5秒钟后刷新页面,然后刷新下12个页面,依此类推,当到达最后一页时,我正在做的事情是再次调用JSON对象并再次执行整个过程,因为在我的代码中JSON数据将是动态的
我面临的问题
> 5秒钟后,我做了所有事情来刷新页面,并在到达最后一页时调用整个数据
>现在我想做的是,当它是最后一页时,比那之后要显示图像10秒,而不是再次调用整个过程
>现在,首先执行的整个过程将类似于表将显示12行,如果有更多数据,它将显示表的下12行,我想显示图像10秒钟,然后调用JSON再次反对再次经历整个过程
>在我的代码中,我评论了我在哪里做什么
var tableValue = [{
"Item Name": "MANCHOW V SOUP","SellingPrice": 100
},{
"Item Name": "MANCHOW NV SOUP ","SellingPrice": 125
},{
"Item Name": "CEASER SALAD V","SellingPrice": 175
},{
"Item Name": "CEASER SALAD NV","SellingPrice": 230
},{
"Item Name": "GAMBUS REBOZADAS","SellingPrice": 350
},{
"Item Name": "PANCO FISH FINGER","SellingPrice": 270
},{
"Item Name": "MUSHROOM DUPLEX","SellingPrice": 160
},{
"Item Name": "FRENCH FRIES","SellingPrice": 99
},{
"Item Name": "HONEY GARLIC PRAWN",{
"Item Name": "CHICKEN MANCHURIAN","SellingPrice": 180
},{
"Item Name": "MUSHROOM CHILLY","SellingPrice": 120
},{
"Item Name": "SALT N PEPPER BABY CORN",{
"Item Name": "SOUTHERN STYLE CHICKEN","SellingPrice": 210
},{
"Item Name": "PANEER NAGGETS",{
"Item Name": "HARA BHARA KEBAB",{
"Item Name": "CHICKEN TIKKA",{
"Item Name": "KALMI KEBAB","SellingPrice": 250
},{
"Item Name": "PIZZA MARGARITTA","SellingPrice": 200
},{
"Item Name": "PIZZA VEG FARMHOUSE",{
"Item Name": "BBQ CHICKEN PIZZA","SellingPrice": 225
},{
"Item Name": "CHICKEN TIKKA PIZZA",{
"Item Name": "PESTO SAUCE",{
"Item Name": "ARABIATA",{
"Item Name": "PINK SAUCE",{
"Item Name": "GARBANZO BEAN SALAD","SellingPrice": 90
},{
"Item Name": "MASALA PAPAD","SellingPrice": 50
},{
"Item Name": "PEANUT MASALA","SellingPrice": 60
},{
"Item Name": "GAJAR KA HALWA",{
"Item Name": "WATERMELON MARTINI","SellingPrice": 281
},{
"Item Name": "Kiwi martini",{
"Item Name": " Apple gin",{
"Item Name": "Cucumber cooler ",{
"Item Name": "Martini",{
"Item Name": "Pink lady",{
"Item Name": " Bloody marry",{
"Item Name": "Cosmopolitan",{
"Item Name": "Sex on the beach",{
"Item Name": "Bull frog","SellingPrice": 506
},{
"Item Name": "Long island iced tea ","SellingPrice": 393
},{
"Item Name": "Pinacolada",{
"Item Name": "Daiquiri",{
"Item Name": "Mojito ",{
"Item Name": "Whisky sour",{
"Item Name": "Hot toddy",{
"Item Name": "Margarita","SellingPrice": 337
},{
"Item Name": "Tequila sunrise",{
"Item Name": "Red sangria",{
"Item Name": "White sangria","SellingPrice": 247
},{
"Item Name": "Rose sangria",{
"Item Name": "By chance special ","SellingPrice": 168
},{
"Item Name": "Made in heaven",{
"Item Name": "Strawberry delight",{
"Item Name": "DRAGON",{
"Item Name": "Mangochil ",{
"Item Name": "Cucumber cola",{
"Item Name": "Virgin mojito",{
"Item Name": "Virgin mary",{
"Item Name": "Virgin pinacolada",{
"Item Name": "CORONA","SellingPrice": 438
},{
"Item Name": "CRAFT BEERS",{
"Item Name": "BIRA WHITE 330","SellingPrice": 157
},{
"Item Name": "BIRA BLONDE 330","SellingPrice": 135
},{
"Item Name": "BIRA STRONG 650","SellingPrice": 213
},{
"Item Name": "KINGFISHER PREMIUM 330","SellingPrice": 123
},{
"Item Name": "KINGFISHER PREMIUM 650","SellingPrice": 202
},{
"Item Name": "KINGFISHER STRONG 330",{
"Item Name": "KINGFISHER STRONG 650",{
"Item Name": "KINGFISHER ULTRA 330","SellingPrice": 146
},{
"Item Name": "KINGFISHER ULTRA 650",{
"Item Name": "KINGFISHER ULTRA MAX 330",{
"Item Name": "KINGFISHER ULTRA MAX 650",{
"Item Name": "BUDWIESER 330",{
"Item Name": "BUDWIESER 650",{
"Item Name": "BUDWIESER MAGNUM 330",{
"Item Name": "BUDWIESER MAGNUM 650",{
"Item Name": "TUBORG 330",{
"Item Name": "TUBORG 650","SellingPrice": 191
},{
"Item Name": "TUBORG STRONG 330",{
"Item Name": "TUBORG STRONG 650",{
"Item Name": "CRANBERRY ",{
"Item Name": "ORANGE",{
"Item Name": "JAMICAN",{
"Item Name": "BLACK BERRY",{
"Item Name": "BLUE BERRY",{
"Item Name": "MOET CHANDON","SellingPrice": 787
},{
"Item Name": "SULA BRUT",{
"Item Name": "MATEUS ROSE",{
"Item Name": "HARDYS SIRAZ CABERNET 750","SellingPrice": 189
},{
"Item Name": "HARDYS SIRAZ CABERNET BY GLASS","SellingPrice": 382
},{
"Item Name": "JACOB CREEK SIRAZ 750",{
"Item Name": "JACOB CREEK SIRAZ BY GLASS","SellingPrice": 360
},{
"Item Name": "BIG BANAYAN CHENNIN BLANC 750","SellingPrice": 990
},{
"Item Name": "BIG BANAYAN CHENNI",{
"Item Name": "SULA CHENIN BLANC 750 ","SellingPrice": 129
},{
"Item Name": "SULA CHENIN BLANC BY GLASS","SellingPrice": 258
},{
"Item Name": "FOUR SEAZON CLASSIC","SellingPrice": 112
},{
"Item Name": "FOUR SEAZON CLASSIC ",{
"Item Name": "BIG BANAYAN CARBINET ",{
"Item Name": "BIG BANAYAN CARBINE",{
"Item Name": "SULA SATORI MERLOT 750",{
"Item Name": "SULA SATORI MERLOT BY GLASS",{
"Item Name": "GROVERS LA RESERVE 750",{
"Item Name": "GROVERS LA RESERVE 100",{
"Item Name": "GLENFIDDICH 12 YEARS 700 ","SellingPrice": 922
},{
"Item Name": "GLENFIDDICH 12 YEARS 30","SellingPrice": 405
},{
"Item Name": "TALISKER 750","SellingPrice": 877
},{
"Item Name": "TALISKER 30",{
"Item Name": "GLENNLIVET 750","SellingPrice": 888
},{
"Item Name": "GLENNLIVET 30",{
"Item Name": "THE SINGLETON 750","SellingPrice": 794
},{
"Item Name": "THE SINGLETON 30","SellingPrice": 326
},{
"Item Name": "AMRUT FUSION 750",{
"Item Name": "AMRUT FUSION 30",{
"Item Name": "JACK DANIELS 750","SellingPrice": 731
},{
"Item Name": "JACK DANIELS 30","SellingPrice": 292
},{
"Item Name": "JIM BEAM WHITE 750","SellingPrice": 409
},{
"Item Name": "JIM BEAM WHITE 30",{
"Item Name": "JAMESON 750","SellingPrice": 49
},{
"Item Name": "JAMESON 30",{
"Item Name": "JW BLACK LABEL 750","SellingPrice": 821
},{
"Item Name": "JW BLACK LABEL 200","SellingPrice": 29
},{
"Item Name": "JW BLACK LABEL 30",{
"Item Name": "JW RED LABEL 200","SellingPrice": 115
},{
"Item Name": "BALLENTINSE FINEST BLENDED 750","SellingPrice": 454
},{
"Item Name": "BALLENTINSE FINEST BLENDED 30",{
"Item Name": "BLACK \u0026 WHITE 375",{
"Item Name": "BLACK \u0026 WHITE 180",{
"Item Name": "BLACK \u0026 WHITE 60",{
"Item Name": "BLACK \u0026 WHITE 30",{
"Item Name": "100 PIPERS 180",{
"Item Name": "100 PIPERS 60",{
"Item Name": "100 PIPERS 30",{
"Item Name": "VAT 69 180","SellingPrice": 675
},{
"Item Name": "VAT 69 60",{
"Item Name": "VAT 69 30",{
"Item Name": "TEACHERS HIGHLAND 180",{
"Item Name": "TEACHERS HIGHLAND 60",{
"Item Name": "TEACHERS HIGHLAND 30",{
"Item Name": "TEACHERS 50 60",{
"Item Name": "TEACHERS 50 30",{
"Item Name": "BLACK DOG TRIPPLE GOLD 180","SellingPrice": 121
},{
"Item Name": "BLACK DOG TRIPPLE GOLD 30",{
"Item Name": "BLACK DOG 8 YEARS 180",{
"Item Name": "BLACK DOG 8 YEARS 60",{
"Item Name": "BLACK DOG 8 YEARS 30",{
"Item Name": "BLENDERS PRIDE 750","SellingPrice": 228
},{
"Item Name": "BLENDERS PRIDE 375","SellingPrice": 114
},{
"Item Name": "BLENDERS PRIDE 180","SellingPrice": 573
},{
"Item Name": "BLENDERS PRIDE 60",{
"Item Name": "BLENDERS PRIDE 30",{
"Item Name": "SIGNATURE 180","SellingPrice": 450
},{
"Item Name": "SIGNATURE 60",{
"Item Name": "SIGNATURE 30",{
"Item Name": "GREY GOOSE 750","SellingPrice": 819
},{
"Item Name": "GREY GOOSE 30",{
"Item Name": "BELVEDERE 700","SellingPrice": 812
},{
"Item Name": "BELVEDERE 30",{
"Item Name": "CIROC 750","SellingPrice": 742
},{
"Item Name": "CIROC 30","SellingPrice": 303
},{
"Item Name": "ABSOLUT 750","SellingPrice": 455
},{
"Item Name": "ABSOLUT 30",{
"Item Name": "SMIRNOFF RED 180","SellingPrice": 551
},{
"Item Name": "SMIRNOFF RED 60",{
"Item Name": "SMIRNOFF RED30","SellingPrice": 101
},{
"Item Name": "SMIRNOFF ORANGE 180",{
"Item Name": "SMIRNOFF ORANGE 60",{
"Item Name": "SMINOFF ORANGE30",{
"Item Name": "SMIRNOFF GREEN APPLE 180",{
"Item Name": "SMIRNOFF GREEN APPLE 60",{
"Item Name": "SMIRNOFF GREEN APPLE30",{
"Item Name": "BOMBAY SAPHIRE 750","SellingPrice": 472
},{
"Item Name": "BOMBAY SAPHIRE 30",{
"Item Name": "BLUE RIBBAND 750",{
"Item Name": "BLUE RIBBAND 60","SellingPrice": 78
},{
"Item Name": "BACCARDI WHITE 750","SellingPrice": 248
},{
"Item Name": "BACCARDI WHITE 180","SellingPrice": 585
},{
"Item Name": "BACCARDI WHITE 60",{
"Item Name": "BACCARDI WHITE 30",{
"Item Name": "BACCARDI LEMON 180",{
"Item Name": "BACCARDI LEMON 60",{
"Item Name": "BACCARDI LEMON 30",{
"Item Name": "BACCARDI ORANGE 180",{
"Item Name": "BACCARDI ORANGE 60",{
"Item Name": "BACCARDI BLACK 180",{
"Item Name": "BACCARDI BLACK 30","SellingPrice": 67
},{
"Item Name": "BACCARDI GOLD 180",{
"Item Name": "BACCARDI GOLD30",{
"Item Name": "OLD MONK 180",{
"Item Name": "OLD MONK 90",{
"Item Name": "OLD MONK 60",{
"Item Name": "OLD MONK 30 ","SellingPrice": 45
},{
"Item Name": "DON ANGEL 750","SellingPrice": 466
},{
"Item Name": "DON ANGEL 30",{
"Item Name": "SAUZA SILVER 700","SellingPrice": 615
},{
"Item Name": "SAUZA SILVER 30",{
"Item Name": "JAGERBOMB",{
"Item Name": "KAMAKAZI",{
"Item Name": "JAGERMASTER",{
"Item Name": "COINTTRAEU",{
"Item Name": "SAMBUCA",{
"Item Name": "KHALUA",{
"Item Name": "MARTINI BLANCO",{
"Item Name": "MARTINI ROSSO",{
"Item Name": "HENESSY VS 700",{
"Item Name": "HENESSY VS 30","SellingPrice": 348
},{
"Item Name": "MORPHEUS 750","SellingPrice": 218
},{
"Item Name": "MORPHEUS 180","SellingPrice": 540
},{
"Item Name": "MORPHEUS 60",{
"Item Name": "MORPHEUS 30",{
"Item Name": "MANSION HOUSE 180",{
"Item Name": "MANSION HOUSE 90",{
"Item Name": "MANSION HOUSE 60",{
"Item Name": "MC BRANDY 60",{
"Item Name": "RED BULL ",{
"Item Name": "COKE",{
"Item Name": "SPRITE",{
"Item Name": "SODA","SellingPrice": 33
},{
"Item Name": "DIET COKE","SellingPrice": 56
},{
"Item Name": "TONIC WATER",{
"Item Name": "GINGER ALE",{
"Item Name": "LIME SODA",{
"Item Name": "LIME WATER",{
"Item Name": "PACKEGED WATER 1L","SellingPrice": 39
},{
"Item Name": "MANSION HOUSE 650","SellingPrice": 900
},{
"Item Name": "Chole Kulche","SellingPrice": 80
},{
"Item Name": "Butter Nan","SellingPrice": 65
},{
"Item Name": "Dhai","SellingPrice": 20
},{
"Item Name": "Rice","SellingPrice": 55
},{
"Item Name": "Plain rice","SellingPrice": 30
},"SellingPrice": 30
}]
interval = '';
function initTable(tableValue) {
addTable(tableValue)
interval = window.setInterval(showRows,3000);
}
initTable(tableValue);
function hideImage() {
// 5000 = 5 seconds
window.setInterval(doHide,3000);
}
function doHide() {
$("#displayImage").show() //this is here I am trying to show image
}
function showRows() {
// Any TRs that are not hidden and not already shown get "already-shown" applies
if ($(".hidden:lt(12)").length > 0) { //checking is it is the last page or not
$("tr:not(.hidden):not(.already-shown)").addClass("already-shown");
} else { // if it is the last row
$("tr:not(.hidden):not(.already-shown)").addClass("already-shown");
hideImage();
//
clearInterval(interval); //if last then clearing time interval and calling the function again
initTable(tableValue);
}
$(".hidden:lt(12)").removeClass("hidden"); // this one is to hide prevIoUs rows and show next
}
function addTable(tableValue) {
var $tbl = $("<table />",{
"class": "table fixed"
}),$tb = $("<tbody/>"),$trh = $("<tr/>");
var split = Math.round(tableValue.length / 4);
for (i = 0; i < split; i++) {
$tr = $("<tr/>",{
class: "hidden "
});
for (j = 0; j < 4; j++) {
$.each(tableValue[split * j + i],function(key,value) {
if (typeof(value) === "number") {
$("<td/>",{
"class": "text-right color" + (j + 1)
}).html(value).appendTo($tr);
} else {
$("<td/>",{
"class": "text-left color" + (j + 1)
}).html(value).appendTo($tr);
}
});
}
$tr.appendTo($tb);
}
$tbl.append($tb);
$("#DisplayTable").html($tbl);
}
tbody>tr>td {
white-space: normal;
border-collapse: collapse;
font-family: Verdana;
font-weight: bold;
font-size: .9em;
}
td:nth-child(2),td:nth-child(4),td:nth-child(6),td:nth-child(8) {
width: 85px;
max-width: 85px;
height: 63px
}
.fixed {
table-layout: fixed;
}
.color1 {
background: #4AD184;
}
.color2 {
background: #EA69EF;
}
.color3 {
background: #E1A558;
}
.color4 {
background: #F4F065;
}
.hidden,.already-shown {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<div id="DisplayTable"></div>
<div id="displayImage" style="display: none">
<img src="myImage.jpg" alt="Some Image" width="460" height="345">
</div>
编辑/更新
我已经编辑了我的代码段,并显示了一些代码图像,该图像显示在表格下方而不是最后一页之后,并且一旦显示便没有隐藏起来,然后仅显示出来
最佳答案
试试这个代码.我已经更新了您的隐藏图片代码.
var tableValue = [{
"Item Name": "MANCHOW V SOUP",{
"Item Name": "the beach",3000);
}
initTable(tableValue);
function hideImage() {
$("#displayImage").show(); //this is here I am trying to show image
$("#DisplayTable").hide();
setTimeout(function(){
initTable(tableValue);
},10000);
}
function showRows() {
// Any TRs that are not hidden and not already shown get "already-shown" applies
if ($(".hidden:lt(12)").length > 0) { //checking is it is the last page or not
$("#displayImage").hide(); //this is here I am trying to show image
$("#DisplayTable").show();
$("tr:not(.hidden):not(.already-shown)").addClass("already-shown");
} else { // if it is the last row
$("tr:not(.hidden):not(.already-shown)").addClass("already-shown");
hideImage();
//
clearInterval(interval); //if last then clearing time interval and calling the function again
}
$(".hidden:lt(12)").removeClass("hidden"); // this one is to hide prevIoUs rows and show next
}
function addTable(tableValue) {
var $tbl = $("<table />",.already-shown {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<div id="DisplayTable"></div>
<div id="displayImage" style="display: none">
<img src="myImage.jpg" alt="Some Image" width="460" height="345">
</div>