Question

我有一个包含JSON数据的HTML表，该表将在UI中部分呈现。

我在做什么

我要通过ajax一次调用全部数据，然后将数据分为12-12行，因为根据我的要求，一页最多可以包含12行
我每3秒钟刷新一次div，并一次显示12-12行
页面滚动时，我显示的是前12行，然后在3秒钟后隐藏了前12行，然后显示了下12
这就是我的工作方式

我要实现的目标

加载完整数据后，页面将显示空白，这不符合要求
我正尝试在加载完整数据时再次致电ajax

工作代码

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

检查This fiddle中包含JSON数据的有效示例

Answer 1

我检查了您的小提琴，并了解到您需要停止在最后一页中添加“已经显示”的类。我在这里包裹了一个if条件。

System.loadLibrary("ab.def.Driver.Mock.Common");

您还应该考虑在else块中清除setInterval。

添加小提琴供您参考https://jsfiddle.net/s7gqe1na/1/

如何用动态时间重新加载Div

1 个答案: