Передать результат JSON из AJAX в HTML

Question

Я запрашиваю сервер fuseki с использованием AJAX, и в результате я получаю объект JSON.

Я хотел бы использовать разбиение на страницы для просмотра результата с ограничением записей на страницу.Я пытался отправить объект JSON в div в файле HTML, но он не работает.Есть ли решение этой проблемы?Вот мой код:

function myCallBack2(data) {
  var all_results = '';
  for (var i = 0; i < data.results.bindings.length; i++) {
    var bc = '';
    if (i % 2 == 0) {
      bc = '#b8cddb';
    } else {
      bc = '#f2f5f7';
    }
    all_results += '<div class="all_results" style="background-color:' + bc + '">';
    for (var j = 0; j < data.head.vars.length; j++) {
      var text = data.results.bindings[i][data.head.vars[j]].value;
      var type = data.results.bindings[i][data.head.vars[j]].type;
      all_results += '<div class="result_row">';
      if (type == ('literal')) {
        all_results += '<p> ' + data.head.vars[j] + ": " + text + '</p>';
      } else {
        all_results += '<a href=' + text + " title=" + data.head.vars[j] + '>' + text + '</a>';
      }
      all_results += '</div>';
    }
    all_results += '</div>';
  }
  $('#result').html(all_results);

}

function doSparql() {
  var myEndPoint = "http://localhost:3030/Test/query";
  name = document.getElementById("search").value;
  var requiredName = "?Author foaf:firstName \"" + name + "\".}";

  myQuery = ["PREFIX dcterms: <http://purl.org/dc/terms/>",
    "PREFIX foaf: <http://xmlns.com/foaf/0.1/>",
    "PREFIX locah: <http://data.archiveshub.ac.uk/def/>",
    "SELECT ?Register ?Id ?Date ?Type",
    "WHERE{",
    "?Register dcterms:creator ?Author.",
    "?Register dcterms:identifier ?Id.",
    "?Register dcterms:type ?Type.",
    "?Register locah:dateCreatedAccumulatedString ?Date.",
    requiredName
  ].join(" ");
  console.log('myQuery: ' + myQuery);
  window.alert(myQuery);

  $.ajax({
    dataType: "jsonp",
    url: myEndPoint,
    data: {
      "query": myQuery,
      "output": "json"
    },
    success: myCallBack2,
    error: myError
  });
  console.log('After .ajax');
};

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="//raw.github.com/botmonster/jquery-bootpag/master/lib/jquery.bootpag.min.js"></script>

<div id="page-selection1" "></div>
<div id="result " class="result "></div>
<div id="page-selection2 "></div>

<script>
  $('#page-selection1,#page-selection2').bootpag({
    total: 50,
    page: 1,
    maxVisible: 5,
    leaps: true,
    firstLastUse: true,
    first: 'First',
    last: 'Last',
    wrapClass: 'pagination',
    activeClass: 'active',
    disabledClass: 'disabled',
    nextClass: 'next',
    prevClass: 'prev',
    lastClass: 'last',
    firstClass: 'first'
  }).on("page ", function(event, num) {
    $("#result ").html("Page " + num);

  });
</script>

Я ожидаю показать часть результатов вместо Страница 1, Страница 2 ... в #result в соответствии с лимитом на страницу.