How to reload ajax call function in given time

Question

I had a task to do which I have accomplished almost but I have been stuck to a last part.

What I am doing

• I have JSON data from back end which I am calling at once then showing it as a HTML table but only 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
• When it will be the last page of table, then what I am doing is showing an Image, If Image is one then table-->Image if there are more than one Image suppose 2 images there than table-->image1-->table-->image2 like this it is working
• When once the cycle is completed like table-->image then I am calling table function once again because it will have dynamic data
• Here the Image data is also coming in JSON and it is also dynamic there I am facing issue

Issue

• I have a function imageFormatter() which is having data for Image in JSON format
• These Images are set in my database as column name IsActive so when I am calling this data I am checking for this condition in my db via query
• Now my table is showing up on UI and iamges are also, but in my database that IsActive flag can be changed at any time from Y to N
• Now what I am trying to do is I want the function imageFormatter() to get refreshed at every 5 seconds so that it can take the new data
• To change that IsActive 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 Images

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

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>

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 IsActive as Y if it is not check than saved in db as N

• So what I thought is when user clicks on button on setting Image page I am saving that to database so from that Java servlet can I refresh the other HTML page so that it take latest data from db

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 imageFormatter(); also with that so when table data loades it will also refresh the data

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
  }]

Image inside imageformater

{"A":["CountA1.jpg"]} // when only one is active
{"A":["CountA1.jpg","CountA2.jpg"]} // when two are active these are dynamic

As my myFun is calling again after the Image, there I am trying to call imageFormater so that it also refresh the function so new data come

Idea

As per my code flow if there are more than one image then UI will show as table-->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

Snippet with static JSON

$(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">

Here in my static code, after countA2.jpg image I want to reload the page

Edit / Update

Please check out @Don'tDownVote code -:

  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);
                 }

              }

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 Image2.

Answer 1

Try this. I have added the logic to reload when it is last image.

$(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">