codegeek codegeek - 14 days ago 12
jQuery Question

How to Paginate json response data

I am currently working on a application ,where i will make a call to a url and get JSON response.i am using Handlebars.js to create a list li and finally append it to a ul. since the json reponse is huge , the requirement is to display the data in a pagination format.can you guys please guide me how to show the li's in a pagination format.



<!DOCTYPE html>
<html>
<head>
<title> Pagniate json data </title>
<!-- Latest compiled and minified Bootstrap CSS -->
<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">
<ul class="list-group">

</ul>
</div>
</div>
</div>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Latest compiled and minified Bootstrap JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<!-- Handlebars.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.6/handlebars.min.js"></script>
<!-- Handlebar Template for creating the list -->
<script id="list-group-item-template" type="text/template" >
{{#each this}}
<li class="list-group-item"> {{ title }} </li>
{{/each}}
</script>
<script>
$(document).ready(function(){
$.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);
}
});
});
</script>
</body>
</html>




ABC ABC
Answer

In that case it would be better to do pagination on server side. Otherwise you can store json in local storage and perform pagination. Clear local storage after this request is completed

Comments