How to reload Div with dynamic time

Question

I have an HTML table with JSON data which I am rendering on UI in parts.

What I am doing

• I am calling full data at once via ajax, then dividing the data into 12-12 rows because one page can max have 12 rows as of my requirement
• I am refreshing the div in each 3 seconds and showing 12-12 rows at one time
• When page lodes I am showing first 12 rows then after 3 seconds hiding first 12 and showing next 12
• This is how I am doing My work

What I am trying to achieve

• When full data is loaded then page shows blank which is not to the requirement

• I am trying to make that ajax call again when full data is loaded

Working code

$(document).ready(function() {
  myFun();

  function myFun() {
    $.ajax({
      async: true,
      url: "MenuDisplay",
      method: "GET",
      dataType: "json",
      contentType: "application/json; charset=utf-8",
      success: function(tableValue) {

        addTable(tableValue)
        window.setInterval(showRows, 3000);
        showRows();

      }
    });
  }






  function showRows() {
    // Any TRs that are not hidden and not already shown get "already-shown" applies
    if ($(".hidden:lt(12)").length > 0) {
      $("tr:not(.hidden):not(.already-shown)").addClass("already-shown");
    } else {
      $("tr:not(.hidden):not(.already-shown)").addClass("already-shown"); // this one is also calling after 3 seconds after last page i want to call this imidiatly 
      $.ajax({
        async: true,
        url: "MenuDisplay",
        method: "GET",
        dataType: "json",
        contentType: "application/json; charset=utf-8",
        success: function(tableValue) {

          addTable(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>

Check This fiddle for working example with JSON data

Answer 1

I checked your fiddle and understood that you need to stop adding the 'already-shown' class in your last page. I have wrapped an if condition here.

if($(".hidden:lt(12)").length > 0){
  $("tr:not(.hidden):not(.already-shown)").addClass("already-shown");
}

You should also consider clearing the setInterval in the else block.

Adding fiddle for your reference https://jsfiddle.net/s7gqe1na/1/