Как мне разбить результат json на jquery, используя html div?

Question

У меня результат json со многими записями, и я хочу разбить его на страницы, используя JQuery, но я не буду показывать записи в таблице, а в div с небольшими панелями div внутри. Я пытался использовать эту lib , но все еще не могу это сделать.

Как мне разбить его на страницы?

PS: Я добавил изображение ниже, чтобы показать, что Мне нужно разбить на страницы

Пробуем

//jquery
$(document).ready(function() {

  var loading = $("#div_loading");
  $(document).ajaxStart(function() {
    loading.show();
  });
  $(document).ajaxStop(function() {
    loading.hide();
  });

  $.ajax({
    accepts: {
      json: 'application/json'
    },
    dataType: 'json',
    type: "POST",
    url: "/Concurso/GetConcursosAtivosAjax",
    success: function(data) {
      //console.log(data);
      createPanels(data);
      window.scrollTo(0, 0);
    },
    error: function(xhr, status) {
      $("#errorMessage").html("Erro: " + xhr.responseText);
      $("#errorMessage").prop("class", "alert alert-danger");
      $("#errorMessage").show()
    }
  });

  return false;
});


function createPanels(data) {
  if (data["NumerosDaSorte"].length > 0) {

    HipStart(); //paginate

    $.each(data["NumerosDaSorte"], function(i, cp) {
      if (cp.status === 0) {
        //disponiveis
        $('#paineis_num_sorte').append('<div class="col-md-3">' +
          '<div class="panel bg-blue">' +
          '<div class="panel-heading text-center">' +
          formatNumero(cp.numeroSorte, 6) +
          '</div>' +
          '<div class="panel-footer">' +
          '<button type="button" class="btn btn-sm btn-block btn-primary" id="' +
          cp.id +
          '" onclick="getNumeroSorteio(' +
          cp.concursoId + "," +
          cp.id + "," +
          cp.numeroSorte + "," +
          cp.valor + ')">' + "R$" + moneyFormat(cp.valor) + '</button>' +
          '</div>' +
          '</div>' +
          '</div>');

      } else if (cp.status === 1) {
        //vendido
        $('#paineis_num_sorte').append('<div class="col-md-3">' +
          '<div class="panel bg-green">' +
          '<div class="panel-heading text-center">' +
          formatNumero(cp.numeroSorte, 6) +
          '</div>' +
          '<div class="panel-footer">' +
          '<p class="text-center bg-green">VENDIDO</p>' +
          '</div>' +
          '</div>' +
          '</div>');
      }
    }); //each
  }
}


function HipStart() {
  $("#paineis_num_sorte").hip({
    itemsPerPage: 10
  });
}

<div id="paineis_num_sorte"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Answer 1

Вам нужно сначала сгенерировать HTML, а затем вызвать функцию разбивки на страницы

function createPanels(data) {
  if (data["NumerosDaSorte"].length > 0) {
    $.each(data["NumerosDaSorte"], function(i, cp) {
      if (cp.status === 0) {
        //disponiveis
        $('#paineis_num_sorte').append('<div class="col-md-3">' +
          '<div class="panel bg-blue">' +
          '<div class="panel-heading text-center">' +
          formatNumero(cp.numeroSorte, 6) +
          '</div>' +
          '<div class="panel-footer">' +
          '<button type="button" class="btn btn-sm btn-block btn-primary" id="' +
          cp.id +
          '" onclick="getNumeroSorteio(' +
          cp.concursoId + "," +
          cp.id + "," +
          cp.numeroSorte + "," +
          cp.valor + ')">' + "R$" + moneyFormat(cp.valor) + '</button>' +
          '</div>' +
          '</div>' +
          '</div>');

      } else if (cp.status === 1) {
        //vendido
        $('#paineis_num_sorte').append('<div class="col-md-3">' +
          '<div class="panel bg-green">' +
          '<div class="panel-heading text-center">' +
          formatNumero(cp.numeroSorte, 6) +
          '</div>' +
          '<div class="panel-footer">' +
          '<p class="text-center bg-green">VENDIDO</p>' +
          '</div>' +
          '</div>' +
          '</div>');
      }
    }); //each

    // so after the each loop is done and the HTML is appended to the DOM
    // call the Hip function to create the pages
    HipStart(); //paginate
  }
}

Надеюсь, это поможет