如何在给定时间内重新加载ajax调用函数 [英] How to reload ajax call function in given time
问题描述
我要做的任务几乎已经完成，但是我被困在最后一部分.
我在做什么
- 我有来自后端的JSON数据，我会立即调用它，然后将其显示为HTML表，但一次仅显示
10行，如果行数超过10，则它将分两部分显示，第10部分显示，然后显示接下来的10秒5秒钟，您可以查看我的代码段 - 当它是表格的最后一页时，我正在做的是显示一个图像，如果图像是一个，则表格->如果图像多于一个图像，则假定那里有2个图像而不是表格-> image1 ->表格-> image2像这样
- 当像表->图像这样的循环完成后，我将再次调用表函数，因为它将具有动态数据
- 此处图像数据也以JSON格式传入，并且在我遇到问题的情况下也是动态的
问题
- 我有一个函数
imageFormatter()，其中包含JSON格式的图片数据 - 这些图像在我的数据库中设置为列名
IsActive，因此，当我调用此数据时，我正在通过查询检查数据库中的这种情况 - 现在我的表显示在UI上，并且也显示iamges，但是在我的数据库中，可以随时将
IsActive标志从Y更改为N - 现在我要做的是我希望函数
imageFormatter()每5秒刷新一次，以便它可以获取新数据 - 要更改此
IsActive，我有一个用户界面，用户单击鼠标即可进行操作，无论图像用户选择了什么，我都通过servlet将其保存到db，现在只想显示此imageFormatter()，以便它可以拍摄最新图片
这是我用来完成任务的方法.有更好的方法吗?
为了更好的理解，我已经注释了代码中的所有行
function myFun() {
imageFormatter(); // here I am calling because it will call again and again
$.ajax({
url: "MenuCounter",
method: "GET",
data: {
counterCode: counterCode
},
dataType: "json",
contentType: "application/json; charset=utf-8",
success: function(tableValue) {
// tableValue i have provided in my code/post
if (tableValue[0].outlet === 'NoData') {
$.alert({
title: 'Alert!',
content: 'Display content Not available',
onDestroy: function() {
}
});
} else {
addTable(tableValue, color1, color2, color3, color4) // colors are some colors
showRows();
interval = window.setInterval(showRows, 5000);
}
}
});
}
$.ajax({
async: true,
url: "MenuCounterName",
method: "GET",
dataType: "json",
data: {
counterCode: counterCode
},
contentType: "application/json; charset=utf-8",
success: function(data) { // geting counter name to display on to such as `Dosa Corner`
if (data[0].outlet === 'NoData') {
$.alert({
title: 'Alert!',
content: 'Display content Not available',
onDestroy: function() {
}
});
} else {
// console.log(data[0]["Counter name"])
$("#counterName").text(data[0]["Counter name"])
color1 = data[0].Color1;
color2 = data[0].Color2;
color3 = data[0].Color3;
color4 = data[0].Color4;
myFun(); // this function is calling data from db
$(".loader").hide();
$(".overlay").hide();
}
}
});
function hideImage() {
var imgno = (cnt % imgLen) + 1;
$("#displayImage img").css("display", "none");
$("#displayImage img:nth-child(" + imgno + ")").css("display", "block")
$("#displayImage").show(); // show Image and hide table
$("#DisplayTable").hide();
setTimeout(function() {
myFun();
// I am calling my function after the last image is shown because it will call from db
}, 5000);
cnt++;
}
function showRows() {
if ($(".hidden:lt(11)").length > 0) {
$("tr:not(.hidden):not(.already-shown)").addClass("already-shown");
$("#displayImage").hide();
$("#DisplayTable").show();
} else {
$("tr:not(.hidden):not(.already-shown)").addClass("already-shown");
hideImage();
clearInterval(interval);
}
$(".hidden:lt(11)").removeClass("hidden");
}
function addTable(tableValue, color1, color2, color3, color4) {
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 w3-animate-zoom"
});
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);
var winHeight = ($(window).height() - 10);
var HeadingHeight = $("#counterName").height();
var heightForCells = (winHeight - HeadingHeight) / 11;
$(".color1").css({
"background": color1,
"height": heightForCells
});
$(".color2").css({
"background": color2
});
$(".color3").css({
"background": color3
});
$(".color4").css({
"background": color4
});
}
/* setInterval(function(){
imageFormatter();// this will run after every 5 seconds
}, 5000);
*/
function imageFormatter() { // this is my image function trying to call it with myfun() because myFun is dynamically calling after the last Image so it will also get called
// clearInterval(interval);
$.ajax({
'url': 'DisplayImage',
'method': 'GET',
data: {
counterCode: counterCode
},
'success': function(images) {
console.log(images)
for (var key in images) {
var imageList = images[key];
for (i = 0; i < imageList.length; i++) {
var img = $('<img />').attr({
'src': 'Image/' + key + '/' + imageList[i],
'alt': key + '/' + imageList[i],
'class': 'hidden w3-animate-zoom',
'width': 90 + "%",
'height': 680
}).appendTo('#displayImage');
}
}
imgLen = $("#displayImage img").length;
},
'error': function(err) {
}
});
}
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">
</div>
编辑/更新
如果在用户单击按钮时刷新整个页面，则会更容易
我的第二种方法是，我有一个HTML表，其中有table-> image，在另一个表上，我有一个Ui，用户在其中选择要显示的图像，然后将其取值为Image name，如果复选框被选中，如果未选中，则以ans IsActive的名称保存到数据库，而不是另存为N
- 所以我的想法是，当用户单击设置图像"页面上的按钮时，我将其保存到数据库中，以便可以从Java servlet刷新另一个HTML页面，以便它从db获取最新数据.
一旦它是最后一行，我就在调用我的函数，与我在Image上所做的一样，但是它花费时间并且无法正确呈现
我在显示图片后调用了我的函数addTable(tablevalue)，因为它可能包含动态数据，所以我要尝试与此同时调用imageFormatter();，以便在加载表数据时也将刷新数据
tablevalue
[{
"Item Name": "VAT 69 60",
"SellingPrice": 225
}, {
"Item Name": "VAT 69 30",
"SellingPrice": 112
}, {
"Item Name": "TEACHERS HIGHLAND 180",
"SellingPrice": 787
}, {
"Item Name": "TEACHERS HIGHLAND 60",
"SellingPrice": 258
}, {
"Item Name": "TEACHERS HIGHLAND 30",
"SellingPrice": 135
}, {
"Item Name": "TEACHERS 50 60",
"SellingPrice": 393
}, {
"Item Name": "TEACHERS 50 30",
"SellingPrice": 202
}, {
"Item Name": "BLACK DOG TRIPPLE GOLD 180",
"SellingPrice": 121
}, {
"Item Name": "BLACK DOG TRIPPLE GOLD 30",
"SellingPrice": 213
}, {
"Item Name": "BLACK DOG 8 YEARS 180",
"SellingPrice": 731
}, {
"Item Name": "BLACK DOG 8 YEARS 60",
"SellingPrice": 247
}, {
"Item Name": "BLACK DOG 8 YEARS 30",
"SellingPrice": 123
}, {
"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",
"SellingPrice": 191
}, {
"Item Name": "BLENDERS PRIDE 30",
"SellingPrice": 90
}, {
"Item Name": "SIGNATURE 180",
"SellingPrice": 450
}, {
"Item Name": "SIGNATURE 60",
"SellingPrice": 168
}, {
"Item Name": "SIGNATURE 30",
"SellingPrice": 90
}, {
"Item Name": "GREY GOOSE 750",
"SellingPrice": 819
}, {
"Item Name": "GREY GOOSE 30",
"SellingPrice": 326
}, {
"Item Name": "BELVEDERE 700",
"SellingPrice": 812
}, {
"Item Name": "BELVEDERE 30",
"SellingPrice": 360
}, {
"Item Name": "CIROC 750",
"SellingPrice": 742
}, {
"Item Name": "CIROC 30",
"SellingPrice": 303
}, {
"Item Name": "ABSOLUT 750",
"SellingPrice": 455
}, {
"Item Name": "ABSOLUT 30",
"SellingPrice": 191
}, {
"Item Name": "SMIRNOFF RED 180",
"SellingPrice": 551
}, {
"Item Name": "SMIRNOFF RED 60",
"SellingPrice": 202
}, {
"Item Name": "SMIRNOFF RED30",
"SellingPrice": 101
}, {
"Item Name": "SMIRNOFF ORANGE 180",
"SellingPrice": 551
}, {
"Item Name": "SMIRNOFF ORANGE 60",
"SellingPrice": 202
}, {
"Item Name": "SMINOFF ORANGE30",
"SellingPrice": 101
}, {
"Item Name": "SMIRNOFF GREEN APPLE 180",
"SellingPrice": 551
}, {
"Item Name": "SMIRNOFF GREEN APPLE 60",
"SellingPrice": 202
}, {
"Item Name": "SMIRNOFF GREEN APPLE30",
"SellingPrice": 101
}, {
"Item Name": "BOMBAY SAPHIRE 750",
"SellingPrice": 472
}, {
"Item Name": "BOMBAY SAPHIRE 30",
"SellingPrice": 191
}, {
"Item Name": "BLUE RIBBAND 750",
"SellingPrice": 877
}, {
"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",
"SellingPrice": 202
}, {
"Item Name": "BACCARDI WHITE 30",
"SellingPrice": 101
}, {
"Item Name": "BACCARDI LEMON 180",
"SellingPrice": 585
}, {
"Item Name": "BACCARDI LEMON 60",
"SellingPrice": 202
}, {
"Item Name": "BACCARDI LEMON 30",
"SellingPrice": 101
}, {
"Item Name": "BACCARDI ORANGE 180",
"SellingPrice": 585
}, {
"Item Name": "BACCARDI ORANGE 60",
"SellingPrice": 202
}, {
"Item Name": "BACCARDI LEMON 30",
"SellingPrice": 101
}, {
"Item Name": "BACCARDI BLACK 180",
"SellingPrice": 393
}, {
"Item Name": "BACCARDI BLACK 30",
"SellingPrice": 67
}, {
"Item Name": "BACCARDI GOLD 180",
"SellingPrice": 585
}, {
"Item Name": "BACCARDI GOLD30",
"SellingPrice": 101
}, {
"Item Name": "OLD MONK 180",
"SellingPrice": 225
}, {
"Item Name": "OLD MONK 90",
"SellingPrice": 168
}, {
"Item Name": "OLD MONK 60",
"SellingPrice": 90
}, {
"Item Name": "OLD MONK 30 ",
"SellingPrice": 45
}, {
"Item Name": "DON ANGEL 750",
"SellingPrice": 466
}, {
"Item Name": "DON ANGEL 30",
"SellingPrice": 191
}, {
"Item Name": "SAUZA SILVER 700",
"SellingPrice": 615
}, {
"Item Name": "SAUZA SILVER 30",
"SellingPrice": 270
}, {
"Item Name": "JAGERBOMB",
"SellingPrice": 506
}, {
"Item Name": "KAMAKAZI",
"SellingPrice": 168
}, {
"Item Name": "JAGERMASTER",
"SellingPrice": 303
}, {
"Item Name": "COINTTRAEU",
"SellingPrice": 303
}, {
"Item Name": "SAMBUCA",
"SellingPrice": 258
}, {
"Item Name": "KHALUA",
"SellingPrice": 168
}, {
"Item Name": "MARTINI BLANCO",
"SellingPrice": 90
}, {
"Item Name": "MARTINI ROSSO",
"SellingPrice": 90
}, {
"Item Name": "HENESSY VS 700",
"SellingPrice": 787
}, {
"Item Name": "HENESSY VS 30",
"SellingPrice": 348
}, {
"Item Name": "MORPHEUS 750",
"SellingPrice": 218
}, {
"Item Name": "MORPHEUS 180",
"SellingPrice": 540
}, {
"Item Name": "MORPHEUS 60",
"SellingPrice": 191
}, {
"Item Name": "MORPHEUS 30",
"SellingPrice": 101
}, {
"Item Name": "MANSION HOUSE 180",
"SellingPrice": 292
}, {
"Item Name": "MANSION HOUSE 90",
"SellingPrice": 168
}, {
"Item Name": "MANSION HOUSE 60",
"SellingPrice": 90
}, {
"Item Name": "MC BRANDY 60",
"SellingPrice": 90
}, {
"Item Name": "RED BULL ",
"SellingPrice": 157
}, {
"Item Name": "COKE",
"SellingPrice": 45
}, {
"Item Name": "SPRITE",
"SellingPrice": 45
}, {
"Item Name": "SODA",
"SellingPrice": 33
}, {
"Item Name": "DIET COKE",
"SellingPrice": 56
}, {
"Item Name": "TONIC WATER",
"SellingPrice": 67
}, {
"Item Name": "GINGER ALE",
"SellingPrice": 67
}, {
"Item Name": "LIME SODA",
"SellingPrice": 45
}, {
"Item Name": "LIME WATER",
"SellingPrice": 45
}, {
"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
}, {
"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
}]
当我的 想法 根据我的代码流，如果有多个图像，则UI将显示为 带有静态JSON的代码段
在我的静态代码中，在countA2.jpg图片之后，我想重新加载页面 编辑/更新 请查看 @ Don'tDownVote 代码-: 没有进入else if条件，我的所有问题是由于一个接一个的显示多个图像(包括表格)，如果只有一个图像，我可以很容易地重新加载页面，这里有表格-> image1> table-> image2之后的图像2我想重新加载. 在上述条件下，我试图重新加载或刷新最后一页后的页面是 尝试一下.我添加了在最后一张图像时重新加载的逻辑.
I had a task to do which I have accomplished almost but I have been stuck to a last part. What I am doing Issue This is the approach I am using to do my task. Is there a better approach? I have commented all the lines in my code for better understanding
Edit / Update It will be easier If I refresh the whole page when a user clicks button My second approach is, I have a HTML table where I am having table-->image, and on other table I am having a Ui where user selects which Image to be displayed then I take that values with Image name and if checkbox is checked then save to database with name ans I am calling my function once it is the last row, same I am doing it with Image but it is taking time and not rendering correctly
I am calling My function addTable(tablevalue) after the Image is shown because, that may have dynamic data, so what i am trying to do is calling As my Idea As per my code flow if there are more than one image then UI will show as Snippet with static JSON
Here in my static code, after countA2.jpg image I want to reload the page Edit / Update Please check out @Don'tDownVote code -: It is not entering the else if condition, My all the problems because of displaying multiple Images one after other including table, if there would have been only one Image I could have easily reloaded my page, here I have table-->image1>table-->image2 after Image 2 I want to reload. I am trying to reload or refresh the page after the last page in above condition it is Try this. I have added the logic to reload when it is last image.
这篇关于如何在给定时间内重新加载ajax调用函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！Image {"A":["CountA1.jpg"]} // when only one is active
{"A":["CountA1.jpg","CountA2.jpg"]} // when two are active these are dynamic
myFun在图像后再次调用时，我正在尝试调用imageFormater，以便它也刷新该功能，以便出现新数据table-->image1>table-->image2-->table>--image3，这是当有三个图像时，因此我想到的是在上述情况下，当它是最后一个图像image3时，我应该
$(document).ready(function() {
var imgLen = 0;
var cnt = 0;
var lastImage = false;
var tableValue = [{
"Item Name": "MANCHOW V SOUP",
"SellingPrice": 100
}, {
"Item Name": "SMIRNOFF GREEN APPLE 60",
"SellingPrice": 202
}, {
"Item Name": "SMIRNOFF GREEN APPLE30",
"SellingPrice": 101
}, {
"Item Name": "BOMBAY SAPHIRE 750",
"SellingPrice": 472
}, {
"Item Name": "BOMBAY SAPHIRE 30",
"SellingPrice": 191
}, {
"Item Name": "BLUE RIBBAND 750",
"SellingPrice": 877
}, {
"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",
"SellingPrice": 202
}, {
"Item Name": "OLD MONK 180",
"SellingPrice": 225
}, {
"Item Name": "OLD MONK 90",
"SellingPrice": 168
}, {
"Item Name": "OLD MONK 60",
"SellingPrice": 90
}, {
"Item Name": "OLD MONK 30 ",
"SellingPrice": 45
}, {
"Item Name": "DON ANGEL 750",
"SellingPrice": 466
}, {
"Item Name": "DON ANGEL 30",
"SellingPrice": 191
}, {
"Item Name": "SAUZA SILVER 700",
"SellingPrice": 615
}, {
"Item Name": "SAUZA SILVER 30",
"SellingPrice": 270
}, {
"Item Name": "LIME WATER",
"SellingPrice": 45
}, {
"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
}, {
"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
}];
interval = '';
var images = {
CounterA: ["CounterA1.jpg", "CounterA2.jpg"]
}
initTable(tableValue);
imageFormatter();
function initTable(tableValue) {
addTable(tableValue)
showRows();
interval = window.setInterval(showRows, 5000); // seting interval to show table in parts
}
function hideImage() {
if (imgLen) {
var imgno = (cnt % imgLen) + 1; // here counting Image when it is last image want to refresh the oage using location.reload();
if (imgno == 1 && !lastImage) {
lastImage = true;
} else if (imgno == 1 && lastImage) {
console.log("reload now")
location.reload();
}
console.log(imgno)
$("#displayImage img").css("display", "none");
$("#displayImage img:nth-child(" + imgno + ")").css("display", "block")
$("#displayImage").show(); //show Image and hide table
$("#DisplayTable").hide();
setTimeout(function() {
initTable(tableValue);
}, 5000);
cnt++;
} else {
initTable(tableValue);
}
}
function showRows() {
// Any TRs that are not hidden and not already shown get "already-shown" applies
if ($(".hidden:lt(10)").length > 0) { //checking is it is the last page or not
$("#displayImage").hide(); //showing table hiding image
$("#DisplayTable").show();
$("tr:not(.hidden):not(.already-shown)").addClass("already-shown");
} else {
$("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(10)").removeClass("hidden"); // this one is to hide previous rows and show next
}
function addTable(tableValue) {
var $tbl = $("<table />", {
"class": "table fixed table-bordered"
}),
$tb = $("<tbody/>"),
$trh = $("<tr/>");
var split = Math.round(tableValue.length / 4);
for (i = 0; i < split; i++) {
$tr = $("<tr/>", {
class: "hidden w3-animate-zoom"
});
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);
}
function imageFormatter() {
var images = {
A: ["CountA1.jpg", "CountA2.jpg"]
} // This data is dynamic so I want to
for (var key in images) {
var imageList = images[key];
for (i = 0; i < imageList.length; i++) {
var img = $('<img />').attr({
'src': 'ImageInCounter/' + key + '/' + imageList[i], // this one is displaying Image one below other
'alt': key + '/' + imageList[i],
'width': 90 + "%",
'height': 680
}).appendTo('#displayImage');
}
}
imgLen = $("#displayImage img").length;
}
});
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>
<div id="DisplayTable"></div>
<div id="displayImage" style="display:none">
</div>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> function hideImage() {
if(imgLen){
var imgno = (cnt % imgLen) + 1;
if(imgno == 1 && !lastImage){
lastImage = true;
}else if(imgno == 1 && lastImage){
console.log("reload now") // not entering in this condition
location.reload();
}
console.log(imgno)
$("#displayImage img").css("display", "none");
$("#displayImage img:nth-child(" + imgno + ")").css("display", "block")
$("#displayImage").show();
$("#DisplayTable").hide();
setTimeout(function() {
initTable(tableValue);
}, 10000);
cnt++;
} else{
initTable(tableValue);
}
}
Image2.
$(document).ready(function() {
var imgLen = 0;
var cnt = 0;
var lastImage = false;
var tableValue = [{
"Item Name": "MANCHOW V SOUP",
"SellingPrice": 100
}, {
"Item Name": "SMIRNOFF GREEN APPLE 60",
"SellingPrice": 202
}, {
"Item Name": "SMIRNOFF GREEN APPLE30",
"SellingPrice": 101
}, {
"Item Name": "BOMBAY SAPHIRE 750",
"SellingPrice": 472
}, {
"Item Name": "BOMBAY SAPHIRE 30",
"SellingPrice": 191
}, {
"Item Name": "BLUE RIBBAND 750",
"SellingPrice": 877
}, {
"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",
"SellingPrice": 202
}, {
"Item Name": "OLD MONK 180",
"SellingPrice": 225
}, {
"Item Name": "OLD MONK 90",
"SellingPrice": 168
}, {
"Item Name": "OLD MONK 60",
"SellingPrice": 90
}, {
"Item Name": "OLD MONK 30 ",
"SellingPrice": 45
}, {
"Item Name": "DON ANGEL 750",
"SellingPrice": 466
}, {
"Item Name": "DON ANGEL 30",
"SellingPrice": 191
}, {
"Item Name": "SAUZA SILVER 700",
"SellingPrice": 615
}, {
"Item Name": "SAUZA SILVER 30",
"SellingPrice": 270
}, {
"Item Name": "LIME WATER",
"SellingPrice": 45
}, {
"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
}, {
"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
}];
interval = '';
var images = {
CounterA: ["CounterA1.jpg", "CounterA2.jpg"]
}
initTable(tableValue);
imageFormatter();
function initTable(tableValue) {
addTable(tableValue)
showRows();
interval = window.setInterval(showRows, 1000); // seting interval to show table in parts
}
function hideImage() {
if(imgLen){
var imgno = (cnt % imgLen) + 1; // here counting Image when it is last image want to refresh the oage using location.reload();
console.log(imgLen, imgno);
if(imgno == imgLen){
console.log("reload now")
location.reload();
}
// console.log(imgno)
$("#displayImage img").css("display", "none");
$("#displayImage img:nth-child(" + imgno + ")").css("display", "block")
$("#displayImage").show(); //show Image and hide table
$("#DisplayTable").hide();
setTimeout(function() {
initTable(tableValue);
}, 5000);
cnt++;
} else{
initTable(tableValue);
}
}
function showRows() {
// Any TRs that are not hidden and not already shown get "already-shown" applies
if ($(".hidden:lt(10)").length > 0) { //checking is it is the last page or not
$("#displayImage").hide(); //showing table hiding image
$("#DisplayTable").show();
$("tr:not(.hidden):not(.already-shown)").addClass("already-shown");
} else {
$("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(10)").removeClass("hidden"); // this one is to hide previous rows and show next
}
function addTable(tableValue) {
var $tbl = $("<table />", {
"class": "table fixed table-bordered"
}),
$tb = $("<tbody/>"),
$trh = $("<tr/>");
var split = Math.round(tableValue.length / 4);
for (i = 0; i < split; i++) {
$tr = $("<tr/>", {
class: "hidden w3-animate-zoom"
});
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);
}
function imageFormatter() {
var images = {
CounterA: ["CounterA1.jpg", "CounterA2.jpg"]
}; // This data is dynamic so I want to
for (var key in images) {
var imageList = images[key];
for (i = 0; i < imageList.length; i++) {
var img = $('<img />').attr({
'src': 'Image/' + key + '/' + imageList[i], // this one is displaying Image one below other
'alt': key + '/' + imageList[i],
'width': 90 + "%",
'height': 680
}).appendTo('#displayImage');
}
}
imgLen = $("#displayImage img").length;
}
});
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>
<div id="DisplayTable"></div>
<div id="displayImage" style="display:none">
</div>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
10 rows at a Time,If rows are more than 10 then it will show in two parts first 10 then after 5 seconds next 10, You can check my snippet for that
imageFormatter() which is having data for Image in JSON formatIsActive so when I am calling this data I am checking for this condition in my db via queryIsActive flag can be changed at any time from Y to NimageFormatter() to get refreshed at every 5 seconds so that it can take the new dataIsActive I have a UI which user is handeling on click of go whatever Image user selects I am saving it to db via servlet, now Just want to show call this imageFormatter() so that it can take newest Imagesfunction myFun() {
imageFormatter(); // here I am calling because it will call again and again
$.ajax({
url: "MenuCounter",
method: "GET",
data: {
counterCode: counterCode
},
dataType: "json",
contentType: "application/json; charset=utf-8",
success: function(tableValue) {
// tableValue i have provided in my code/post
if (tableValue[0].outlet === 'NoData') {
$.alert({
title: 'Alert!',
content: 'Display content Not available',
onDestroy: function() {
}
});
} else {
addTable(tableValue, color1, color2, color3, color4) // colors are some colors
showRows();
interval = window.setInterval(showRows, 5000);
}
}
});
}
$.ajax({
async: true,
url: "MenuCounterName",
method: "GET",
dataType: "json",
data: {
counterCode: counterCode
},
contentType: "application/json; charset=utf-8",
success: function(data) { // geting counter name to display on to such as `Dosa Corner`
if (data[0].outlet === 'NoData') {
$.alert({
title: 'Alert!',
content: 'Display content Not available',
onDestroy: function() {
}
});
} else {
// console.log(data[0]["Counter name"])
$("#counterName").text(data[0]["Counter name"])
color1 = data[0].Color1;
color2 = data[0].Color2;
color3 = data[0].Color3;
color4 = data[0].Color4;
myFun(); // this function is calling data from db
$(".loader").hide();
$(".overlay").hide();
}
}
});
function hideImage() {
var imgno = (cnt % imgLen) + 1;
$("#displayImage img").css("display", "none");
$("#displayImage img:nth-child(" + imgno + ")").css("display", "block")
$("#displayImage").show(); // show Image and hide table
$("#DisplayTable").hide();
setTimeout(function() {
myFun();
// I am calling my function after the last image is shown because it will call from db
}, 5000);
cnt++;
}
function showRows() {
if ($(".hidden:lt(11)").length > 0) {
$("tr:not(.hidden):not(.already-shown)").addClass("already-shown");
$("#displayImage").hide();
$("#DisplayTable").show();
} else {
$("tr:not(.hidden):not(.already-shown)").addClass("already-shown");
hideImage();
clearInterval(interval);
}
$(".hidden:lt(11)").removeClass("hidden");
}
function addTable(tableValue, color1, color2, color3, color4) {
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 w3-animate-zoom"
});
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);
var winHeight = ($(window).height() - 10);
var HeadingHeight = $("#counterName").height();
var heightForCells = (winHeight - HeadingHeight) / 11;
$(".color1").css({
"background": color1,
"height": heightForCells
});
$(".color2").css({
"background": color2
});
$(".color3").css({
"background": color3
});
$(".color4").css({
"background": color4
});
}
/* setInterval(function(){
imageFormatter();// this will run after every 5 seconds
}, 5000);
*/
function imageFormatter() { // this is my image function trying to call it with myfun() because myFun is dynamically calling after the last Image so it will also get called
// clearInterval(interval);
$.ajax({
'url': 'DisplayImage',
'method': 'GET',
data: {
counterCode: counterCode
},
'success': function(images) {
console.log(images)
for (var key in images) {
var imageList = images[key];
for (i = 0; i < imageList.length; i++) {
var img = $('<img />').attr({
'src': 'Image/' + key + '/' + imageList[i],
'alt': key + '/' + imageList[i],
'class': 'hidden w3-animate-zoom',
'width': 90 + "%",
'height': 680
}).appendTo('#displayImage');
}
}
imgLen = $("#displayImage img").length;
},
'error': function(err) {
}
});
}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">
</div>IsActive as Y if it is not check than saved in db as N
imageFormatter(); also with that so when table data loades it will also refresh the datatablevalue [{
"Item Name": "VAT 69 60",
"SellingPrice": 225
}, {
"Item Name": "VAT 69 30",
"SellingPrice": 112
}, {
"Item Name": "TEACHERS HIGHLAND 180",
"SellingPrice": 787
}, {
"Item Name": "TEACHERS HIGHLAND 60",
"SellingPrice": 258
}, {
"Item Name": "TEACHERS HIGHLAND 30",
"SellingPrice": 135
}, {
"Item Name": "TEACHERS 50 60",
"SellingPrice": 393
}, {
"Item Name": "TEACHERS 50 30",
"SellingPrice": 202
}, {
"Item Name": "BLACK DOG TRIPPLE GOLD 180",
"SellingPrice": 121
}, {
"Item Name": "BLACK DOG TRIPPLE GOLD 30",
"SellingPrice": 213
}, {
"Item Name": "BLACK DOG 8 YEARS 180",
"SellingPrice": 731
}, {
"Item Name": "BLACK DOG 8 YEARS 60",
"SellingPrice": 247
}, {
"Item Name": "BLACK DOG 8 YEARS 30",
"SellingPrice": 123
}, {
"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",
"SellingPrice": 191
}, {
"Item Name": "BLENDERS PRIDE 30",
"SellingPrice": 90
}, {
"Item Name": "SIGNATURE 180",
"SellingPrice": 450
}, {
"Item Name": "SIGNATURE 60",
"SellingPrice": 168
}, {
"Item Name": "SIGNATURE 30",
"SellingPrice": 90
}, {
"Item Name": "GREY GOOSE 750",
"SellingPrice": 819
}, {
"Item Name": "GREY GOOSE 30",
"SellingPrice": 326
}, {
"Item Name": "BELVEDERE 700",
"SellingPrice": 812
}, {
"Item Name": "BELVEDERE 30",
"SellingPrice": 360
}, {
"Item Name": "CIROC 750",
"SellingPrice": 742
}, {
"Item Name": "CIROC 30",
"SellingPrice": 303
}, {
"Item Name": "ABSOLUT 750",
"SellingPrice": 455
}, {
"Item Name": "ABSOLUT 30",
"SellingPrice": 191
}, {
"Item Name": "SMIRNOFF RED 180",
"SellingPrice": 551
}, {
"Item Name": "SMIRNOFF RED 60",
"SellingPrice": 202
}, {
"Item Name": "SMIRNOFF RED30",
"SellingPrice": 101
}, {
"Item Name": "SMIRNOFF ORANGE 180",
"SellingPrice": 551
}, {
"Item Name": "SMIRNOFF ORANGE 60",
"SellingPrice": 202
}, {
"Item Name": "SMINOFF ORANGE30",
"SellingPrice": 101
}, {
"Item Name": "SMIRNOFF GREEN APPLE 180",
"SellingPrice": 551
}, {
"Item Name": "SMIRNOFF GREEN APPLE 60",
"SellingPrice": 202
}, {
"Item Name": "SMIRNOFF GREEN APPLE30",
"SellingPrice": 101
}, {
"Item Name": "BOMBAY SAPHIRE 750",
"SellingPrice": 472
}, {
"Item Name": "BOMBAY SAPHIRE 30",
"SellingPrice": 191
}, {
"Item Name": "BLUE RIBBAND 750",
"SellingPrice": 877
}, {
"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",
"SellingPrice": 202
}, {
"Item Name": "BACCARDI WHITE 30",
"SellingPrice": 101
}, {
"Item Name": "BACCARDI LEMON 180",
"SellingPrice": 585
}, {
"Item Name": "BACCARDI LEMON 60",
"SellingPrice": 202
}, {
"Item Name": "BACCARDI LEMON 30",
"SellingPrice": 101
}, {
"Item Name": "BACCARDI ORANGE 180",
"SellingPrice": 585
}, {
"Item Name": "BACCARDI ORANGE 60",
"SellingPrice": 202
}, {
"Item Name": "BACCARDI LEMON 30",
"SellingPrice": 101
}, {
"Item Name": "BACCARDI BLACK 180",
"SellingPrice": 393
}, {
"Item Name": "BACCARDI BLACK 30",
"SellingPrice": 67
}, {
"Item Name": "BACCARDI GOLD 180",
"SellingPrice": 585
}, {
"Item Name": "BACCARDI GOLD30",
"SellingPrice": 101
}, {
"Item Name": "OLD MONK 180",
"SellingPrice": 225
}, {
"Item Name": "OLD MONK 90",
"SellingPrice": 168
}, {
"Item Name": "OLD MONK 60",
"SellingPrice": 90
}, {
"Item Name": "OLD MONK 30 ",
"SellingPrice": 45
}, {
"Item Name": "DON ANGEL 750",
"SellingPrice": 466
}, {
"Item Name": "DON ANGEL 30",
"SellingPrice": 191
}, {
"Item Name": "SAUZA SILVER 700",
"SellingPrice": 615
}, {
"Item Name": "SAUZA SILVER 30",
"SellingPrice": 270
}, {
"Item Name": "JAGERBOMB",
"SellingPrice": 506
}, {
"Item Name": "KAMAKAZI",
"SellingPrice": 168
}, {
"Item Name": "JAGERMASTER",
"SellingPrice": 303
}, {
"Item Name": "COINTTRAEU",
"SellingPrice": 303
}, {
"Item Name": "SAMBUCA",
"SellingPrice": 258
}, {
"Item Name": "KHALUA",
"SellingPrice": 168
}, {
"Item Name": "MARTINI BLANCO",
"SellingPrice": 90
}, {
"Item Name": "MARTINI ROSSO",
"SellingPrice": 90
}, {
"Item Name": "HENESSY VS 700",
"SellingPrice": 787
}, {
"Item Name": "HENESSY VS 30",
"SellingPrice": 348
}, {
"Item Name": "MORPHEUS 750",
"SellingPrice": 218
}, {
"Item Name": "MORPHEUS 180",
"SellingPrice": 540
}, {
"Item Name": "MORPHEUS 60",
"SellingPrice": 191
}, {
"Item Name": "MORPHEUS 30",
"SellingPrice": 101
}, {
"Item Name": "MANSION HOUSE 180",
"SellingPrice": 292
}, {
"Item Name": "MANSION HOUSE 90",
"SellingPrice": 168
}, {
"Item Name": "MANSION HOUSE 60",
"SellingPrice": 90
}, {
"Item Name": "MC BRANDY 60",
"SellingPrice": 90
}, {
"Item Name": "RED BULL ",
"SellingPrice": 157
}, {
"Item Name": "COKE",
"SellingPrice": 45
}, {
"Item Name": "SPRITE",
"SellingPrice": 45
}, {
"Item Name": "SODA",
"SellingPrice": 33
}, {
"Item Name": "DIET COKE",
"SellingPrice": 56
}, {
"Item Name": "TONIC WATER",
"SellingPrice": 67
}, {
"Item Name": "GINGER ALE",
"SellingPrice": 67
}, {
"Item Name": "LIME SODA",
"SellingPrice": 45
}, {
"Item Name": "LIME WATER",
"SellingPrice": 45
}, {
"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
}, {
"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
}]
Image inside imageformater {"A":["CountA1.jpg"]} // when only one is active
{"A":["CountA1.jpg","CountA2.jpg"]} // when two are active these are dynamic
myFun is calling again after the Image, there I am trying to call imageFormater so that it also refresh the function so new data cometable-->image1>table-->image2-->table>--image3 this is when there are three images so what I have thought of when it is the last image in above case image3 I should location.reload();. But I am not able to find which Image is last$(document).ready(function() {
var imgLen = 0;
var cnt = 0;
var lastImage = false;
var tableValue = [{
"Item Name": "MANCHOW V SOUP",
"SellingPrice": 100
}, {
"Item Name": "SMIRNOFF GREEN APPLE 60",
"SellingPrice": 202
}, {
"Item Name": "SMIRNOFF GREEN APPLE30",
"SellingPrice": 101
}, {
"Item Name": "BOMBAY SAPHIRE 750",
"SellingPrice": 472
}, {
"Item Name": "BOMBAY SAPHIRE 30",
"SellingPrice": 191
}, {
"Item Name": "BLUE RIBBAND 750",
"SellingPrice": 877
}, {
"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",
"SellingPrice": 202
}, {
"Item Name": "OLD MONK 180",
"SellingPrice": 225
}, {
"Item Name": "OLD MONK 90",
"SellingPrice": 168
}, {
"Item Name": "OLD MONK 60",
"SellingPrice": 90
}, {
"Item Name": "OLD MONK 30 ",
"SellingPrice": 45
}, {
"Item Name": "DON ANGEL 750",
"SellingPrice": 466
}, {
"Item Name": "DON ANGEL 30",
"SellingPrice": 191
}, {
"Item Name": "SAUZA SILVER 700",
"SellingPrice": 615
}, {
"Item Name": "SAUZA SILVER 30",
"SellingPrice": 270
}, {
"Item Name": "LIME WATER",
"SellingPrice": 45
}, {
"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
}, {
"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
}];
interval = '';
var images = {
CounterA: ["CounterA1.jpg", "CounterA2.jpg"]
}
initTable(tableValue);
imageFormatter();
function initTable(tableValue) {
addTable(tableValue)
showRows();
interval = window.setInterval(showRows, 5000); // seting interval to show table in parts
}
function hideImage() {
if (imgLen) {
var imgno = (cnt % imgLen) + 1; // here counting Image when it is last image want to refresh the oage using location.reload();
if (imgno == 1 && !lastImage) {
lastImage = true;
} else if (imgno == 1 && lastImage) {
console.log("reload now")
location.reload();
}
console.log(imgno)
$("#displayImage img").css("display", "none");
$("#displayImage img:nth-child(" + imgno + ")").css("display", "block")
$("#displayImage").show(); //show Image and hide table
$("#DisplayTable").hide();
setTimeout(function() {
initTable(tableValue);
}, 5000);
cnt++;
} else {
initTable(tableValue);
}
}
function showRows() {
// Any TRs that are not hidden and not already shown get "already-shown" applies
if ($(".hidden:lt(10)").length > 0) { //checking is it is the last page or not
$("#displayImage").hide(); //showing table hiding image
$("#DisplayTable").show();
$("tr:not(.hidden):not(.already-shown)").addClass("already-shown");
} else {
$("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(10)").removeClass("hidden"); // this one is to hide previous rows and show next
}
function addTable(tableValue) {
var $tbl = $("<table />", {
"class": "table fixed table-bordered"
}),
$tb = $("<tbody/>"),
$trh = $("<tr/>");
var split = Math.round(tableValue.length / 4);
for (i = 0; i < split; i++) {
$tr = $("<tr/>", {
class: "hidden w3-animate-zoom"
});
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);
}
function imageFormatter() {
var images = {
A: ["CountA1.jpg", "CountA2.jpg"]
} // This data is dynamic so I want to
for (var key in images) {
var imageList = images[key];
for (i = 0; i < imageList.length; i++) {
var img = $('<img />').attr({
'src': 'ImageInCounter/' + key + '/' + imageList[i], // this one is displaying Image one below other
'alt': key + '/' + imageList[i],
'width': 90 + "%",
'height': 680
}).appendTo('#displayImage');
}
}
imgLen = $("#displayImage img").length;
}
});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>
<div id="DisplayTable"></div>
<div id="displayImage" style="display:none">
</div>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> function hideImage() {
if(imgLen){
var imgno = (cnt % imgLen) + 1;
if(imgno == 1 && !lastImage){
lastImage = true;
}else if(imgno == 1 && lastImage){
console.log("reload now") // not entering in this condition
location.reload();
}
console.log(imgno)
$("#displayImage img").css("display", "none");
$("#displayImage img:nth-child(" + imgno + ")").css("display", "block")
$("#displayImage").show();
$("#DisplayTable").hide();
setTimeout(function() {
initTable(tableValue);
}, 10000);
cnt++;
} else{
initTable(tableValue);
}
}
Image2.$(document).ready(function() {
var imgLen = 0;
var cnt = 0;
var lastImage = false;
var tableValue = [{
"Item Name": "MANCHOW V SOUP",
"SellingPrice": 100
}, {
"Item Name": "SMIRNOFF GREEN APPLE 60",
"SellingPrice": 202
}, {
"Item Name": "SMIRNOFF GREEN APPLE30",
"SellingPrice": 101
}, {
"Item Name": "BOMBAY SAPHIRE 750",
"SellingPrice": 472
}, {
"Item Name": "BOMBAY SAPHIRE 30",
"SellingPrice": 191
}, {
"Item Name": "BLUE RIBBAND 750",
"SellingPrice": 877
}, {
"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",
"SellingPrice": 202
}, {
"Item Name": "OLD MONK 180",
"SellingPrice": 225
}, {
"Item Name": "OLD MONK 90",
"SellingPrice": 168
}, {
"Item Name": "OLD MONK 60",
"SellingPrice": 90
}, {
"Item Name": "OLD MONK 30 ",
"SellingPrice": 45
}, {
"Item Name": "DON ANGEL 750",
"SellingPrice": 466
}, {
"Item Name": "DON ANGEL 30",
"SellingPrice": 191
}, {
"Item Name": "SAUZA SILVER 700",
"SellingPrice": 615
}, {
"Item Name": "SAUZA SILVER 30",
"SellingPrice": 270
}, {
"Item Name": "LIME WATER",
"SellingPrice": 45
}, {
"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
}, {
"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
}];
interval = '';
var images = {
CounterA: ["CounterA1.jpg", "CounterA2.jpg"]
}
initTable(tableValue);
imageFormatter();
function initTable(tableValue) {
addTable(tableValue)
showRows();
interval = window.setInterval(showRows, 1000); // seting interval to show table in parts
}
function hideImage() {
if(imgLen){
var imgno = (cnt % imgLen) + 1; // here counting Image when it is last image want to refresh the oage using location.reload();
console.log(imgLen, imgno);
if(imgno == imgLen){
console.log("reload now")
location.reload();
}
// console.log(imgno)
$("#displayImage img").css("display", "none");
$("#displayImage img:nth-child(" + imgno + ")").css("display", "block")
$("#displayImage").show(); //show Image and hide table
$("#DisplayTable").hide();
setTimeout(function() {
initTable(tableValue);
}, 5000);
cnt++;
} else{
initTable(tableValue);
}
}
function showRows() {
// Any TRs that are not hidden and not already shown get "already-shown" applies
if ($(".hidden:lt(10)").length > 0) { //checking is it is the last page or not
$("#displayImage").hide(); //showing table hiding image
$("#DisplayTable").show();
$("tr:not(.hidden):not(.already-shown)").addClass("already-shown");
} else {
$("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(10)").removeClass("hidden"); // this one is to hide previous rows and show next
}
function addTable(tableValue) {
var $tbl = $("<table />", {
"class": "table fixed table-bordered"
}),
$tb = $("<tbody/>"),
$trh = $("<tr/>");
var split = Math.round(tableValue.length / 4);
for (i = 0; i < split; i++) {
$tr = $("<tr/>", {
class: "hidden w3-animate-zoom"
});
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);
}
function imageFormatter() {
var images = {
CounterA: ["CounterA1.jpg", "CounterA2.jpg"]
}; // This data is dynamic so I want to
for (var key in images) {
var imageList = images[key];
for (i = 0; i < imageList.length; i++) {
var img = $('<img />').attr({
'src': 'Image/' + key + '/' + imageList[i], // this one is displaying Image one below other
'alt': key + '/' + imageList[i],
'width': 90 + "%",
'height': 680
}).appendTo('#displayImage');
}
}
imgLen = $("#displayImage img").length;
}
});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>
<div id="DisplayTable"></div>
<div id="displayImage" style="display:none">
</div>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
