Question

首先，我的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);
}

它位于innerHTML中，因为我有另一组不同的东西，只需点击一下按钮即可更改。结果看起来像Facebook的结果。由于会有大量数据，我需要对此进行分页。问题是，所有的paginate教程都没有解释paginate innerHTML的方式。有没有办法对innerHTML进行分页，或者以其他方式避免使用innerHTML并从那里开始分页？

这是JSON数据（我是从Spring MVC Controller获得的）：

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
        .
        .
        .

如何对innerHTML进行分页

0 个答案: