如何分页json响应数据

我目前正在研究一个应用程序，我将调用一个url并获取JSON response.i使用Handlebars.js创建一个列表li，最后将其附加到ul。因为json响应很大，所以需要以分页格式显示数据。你们请指导我如何以分页格式显示li。如何分页json响应数据

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
\t <title> Pagniate json data </title> 
 
\t <!-- Latest compiled and minified Bootstrap CSS --> 
 
\t <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
</head> 
 
<body> 
 

 
    <div class="container-fluid"> 
 
     <div class="row"> 
 
     <div class="col-md-6"> 
 
\t \t \t <ul class="list-group"> 
 

 
\t \t \t </ul> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    
 

 
\t <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
\t <!-- Latest compiled and minified Bootstrap JavaScript --> 
 
\t <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> \t 
 
\t <!-- Handlebars.js --> 
 
\t <script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.6/handlebars.min.js"></script> 
 
    <!-- Handlebar Template for creating the list --> 
 
\t <script id="list-group-item-template" type="text/template" > 
 
\t  {{#each this}} 
 
     <li class="list-group-item"> {{ title }} </li> 
 
     {{/each}} 
 
\t </script> 
 
\t <script> 
 
\t $(document).ready(function(){ 
 
\t  \t $.ajax({ 
 
      method:"GET", 
 
      url:"http://starlord.hackerearth.com/cognizantinternal/hackernews", 
 
      success:function(data){ 
 
        //removing the first element from the response array 
 
        data.shift(); 
 
        var template = Handlebars.compile($('#list-group-item-template').html()); 
 
        var list = template(data); 
 
        $('.list-group').append(list); 
 
      } 
 
\t  \t }); 
 
\t }); 
 
\t </script> 
 
</body> 
 
</html>

来源

2016-11-21 codegeek

如果响应很大，那么在客户端分页并不会加快速度 - 您需要在服务器上进行分页 –

在这种情况下，它会更好做在服务器端分页。否则，您可以将json存储在本地存储中并执行分页。完成此请求后清除本地存储

来源

2016-11-21 08:13:47 AJS

IMO，您应该将您发送给服务器的请求分页（例如，在发送AJAX请求时提供限制n，通常作为查询参数）。

然后，提供一个Load More按钮来向服务器发送另一个请求，或者当用户向下滚动到页面底部时再次获取数据。

来源

2016-11-21 08:22:23 Max

如何分页json响应数据

回答

相关问题