Javascript 如何为innerHTML分页

首先，我的innerHTML如下所示：

function viewMusicFeed() {
  $.ajax({
    url: "getMusicFeed",
    method: "GET",
    dataType: "JSON",
    contentType: "application/json; charset=UTF-8",
    success: function(obj) {
      getMusicFeed(obj);
    }
  });
}

function getMusicFeed(obj) {
  var userId = $("#userId").val();
  var list = '<section class="comment-list block">';
  $(obj).each(function(i, item) {
    if (item.musicfeedtitle == "Message") {
      list = list + '<article id="comment-id" class="comment-item">' + '<a class="pull-left thumb-sm avatar"><img src="resources/images/a9.png" alt="..."></a>' + '<span class="arrow left"></span>' + '<section class="comment-body panel panel-default">' + '<header class="panel-heading">';
      if (item.writerUser == userId) {
        list = list + 'My ' + item.musicfeedtitle + '' + '<span class="text-muted m-l-sm pull-right">' + '<i class="fa fa-clock-o"></i>' + item.writedate + '</span></header>' + '<div class="panel-body">' + '<div><pre>' + item.writemessage + '</pre></div>' + '<div class="comment-action m-t-sm">' + '<a class="btn btn-default btn-xs" check="delete" data-index="' + item.musicfeedid + '">' + '<i class="fa fa-trash-o text-muted"></i> Remove</a></div></div></section></article>';
      } else {
        list = list + item.writerUser + '\'s ' + item.musicfeedtitle + '' + '<span class="text-muted m-l-sm pull-right">' + '<i class="fa fa-clock-o"></i>' + item.writedate + '</span></header>' + '<div class="panel-body">' + '<div><pre>' + item.writemessage + '</pre></div>' + '<div class="comment-action m-t-sm pull-right">' + '<a class="btn btn-default btn-xs" check="report"  data-toggle="modal" data-target="#reportModal" data-index="' + item.musicfeedid + '">' + '<i class="icon-flag text-muted"></i> Report</a>' + '</div></div></section></article>';
      }
    } else {
      list = list + '<article id="comment-id" class="comment-item">' + '<a class="pull-left thumb-sm avatar"><img src="resources/images/a9.png" alt="..."></a>' + '<span class="arrow left"></span>' + '<section class="comment-body panel panel-default">' + '<header class="panel-heading">' + '<a href="searchAlbumSong?albumid=' + item.musicfeedtitle + '" class="hover">' + item.writemessage + '</a>' + '<span class="text-muted m-l-sm pull-right">' + '<i class="fa fa-clock-o"></i>' + item.writedate + '</span>' + '<a class="btn btn-default btn-xs pull-right" data-index="' + item.musicfeedid + '">' + '<i class="fa fa-trash-o text-muted"></i></a></header></section></article>';
    }
  });
  list = list + '</section>';
  $("div.col-lg-12").html(list);
}

函数视图musicfeed（）{
$.ajax({
url:“getMusicFeed”，
方法：“获取”，
数据类型：“JSON”，
contentType:“应用程序/json；字符集=UTF-8”，
成功：功能（obj）{
getMusicFeed（obj）；
}
});
}
函数getMusicFeed（obj）{
var userId=$（“#userId”）.val（）；
var列表=“”；
美元（obj）。每个（功能（i，项目）{
如果（item.musicfeedtitle==“消息”）{
列表=列表+“”+“”+“”+item.writedate+“”+“”+“”；
}
});
列表=列表+“”；
$（“div.col-lg-12”）.html（列表）；
}

它在innerHTML中，因为我有另一个不同的集合，这些集合需要在单击按钮时更改。结果看起来就像Facebook。由于将有大量数据，我需要对其进行分页。问题是，所有分页教程都没有解释如何对innerHTML进行分页。有没有一种方法可以对innerHTML进行分页，或者有没有其他方法可以避免innerHTML并从那里开始分页

• 以下是JSON数据（我从Spring MVC Controller获得）：

  数组[11]
  0:对象
  musicfeedid:“a120160427104913919”
  音乐种子标题：“da15737e-3eb3-31e4-97f0-fe46299f75fb”
  reportmusicfeedSet:null
  记录日期：“2016-04-27 10:49:13”
  文字信息：“我喜欢新一代”
  书写者：“a1”
  __原型：对象
  1：对象
  musicfeedid:“a220160425190136417”
  musicfeedtitle：“信息”
  reportmusicfeedSet:null
  书面日期：“2016-04-25 19:01:36”
  书面信息：“ASDASDReport报告”
  书写者：“a2”
  __原型：对象
  2:对象
  musicfeedid:“a120160424190033326”
  音乐种子标题：“60bc9b01-196c-4849-bd6b-5894ed53521d”
  reportmusicfeedSet:null
  书面日期：“2016-04-24 19:00:33”
  书面信息：“a2喜欢外人”
  书写者：“a1”
  __原型：对象
  .
  .
  .
  

---

如果我们可以看看JSON是如何构造的，似乎会更好。您需要在服务器端对JSON数据进行分页，以便JS可以接收分页数据。然后在getMusicFeed函数中，将新数据附加到div中，而不是用innerHtml替换整个div？是否有任何网站或stackoverflow问题需要我检查？如果我们可以看看JSON是如何构造的，似乎会更好。您需要在服务器端对JSON数据进行分页，以便JS可以接收分页数据。然后在getMusicFeed函数中，将新数据附加到div中，而不是用innerHtml替换整个div？是否有任何网站或问题需要我检查？

Array[11]
0 : Object
  musicfeedid : "a120160427104913919"
  musicfeedtitle : "da15737e-3eb3-31e4-97f0-fe46299f75fb"
  reportmusicfeedSet :  null
  writedate : "2016-04-27 10:49:13"
  writemessage : "I liked New Generation"
  writerUser : "a1"
__proto__ : Object
1 : Object
musicfeedid : "a220160425190136417"
musicfeedtitle : "Message"
reportmusicfeedSet : null
writedate : "2016-04-25 19:01:36"
writemessage :  "asdasdasdasdasdasdasdsd<div>report report report</div>"
writerUser : "a2"
__proto__ : Object
2 : Object
musicfeedid : "a120160424190033326"
musicfeedtitle : "60bc9b01-196c-4849-bd6b-5894ed53521d"
reportmusicfeedSet : null
writedate : "2016-04-24 19:00:33"
writemessage : "a2 liked Outsiders"
writerUser : "a1"
__proto__ : Object
        .
        .
        .