Load more data on button click using jQuery


jQuery is a fast and lightweight JavaScript library. Using jQuery , we can develop simple frontend applications. Often, due to excessive data from the server in the web page, the data appears across the entire web page due to which it is worthless to see the web application or to view the web page . Use the JavaScript Library to remove all these short comings Problems and to make your application much better and attractive , user friendly . In this tutorial, we will learn how to load data from client side in our application. And for this, we will use jQuery.

Well , In this article first we create a index.php file . Inside this file we make a ul tag which class we assume loadMore then inside this ul tag create more li tag them close ul . By defaultdisplay:none property initialized from ul tag .

index.php

     
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Load more data on button click using jQuery </title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body> 

<style>
  .loadMore{ list-style-type:none; }
  .loadMore li{ display:none; }
</style>
<div class="container">
   <div class="row">
    <h2>Load more data on button click using jQuery </h2>
    <hr />
    <div class="col-sm-2"></div>
     <div class="col-sm-6">
     <ul class="loadMore list-group">
   <li>first</li>
   <li>first</li>
   <li>first</li>
   <li>first</li>
   <li>first</li>
   <li>first</li>
   <li>first</li>
   <li>first</li>
   <li>first</li>
   <li>first</li>
   <li>first</li>
   <li>first</li>
   <li>first</li>
   <li>first</li>
   <li>first</li>
   <li>first</li>
   <li>first</li>
   <li>first</li>
   <li>first</li>
   <li>first</li>
   <li>first</li>
   <li>first</li>
   <li>first</li>
   <li>first</li>
   <li>first</li>
   <li>first</li>
   <li>first</li>
   <li>first</li>
   <li>first</li>
   <li>first</li>
   <li>first</li>
   <li>first</li>
   <li>first</li>
   <li>first</li>
   <li>first</li>
   <li>first</li>
   <li>first</li>
   <li>first</li>
   <li>first</li>
   <li>first</li>
   <li>first</li>
   <li>first</li>
   <li>first</li>
   <li>first</li>
   <li>first</li>
   <li>first</li>
   <li>first</li>
   <li>first</li>
   <li>first</li>
   <li>first</li>
   <li>first</li>
   <li>first</li>
   <li>first</li>
   <li>first</li>
   <li>first</li>
   <li>first</li>
   <li>first</li>
   <li>first</li>
   <li>first</li>
   <li>first</li>
   <li>first</li>
   <li>first</li>
   <li>first</li>
   <li>first</li>
   <li>first</li>
   <li>first</li>
   <li>first</li>
   <li>first</li>
   <li>first</li>
   <li>first</li>
   <li>first</li>
   <li>first</li>
   <li>first</li>
   <li>first</li>
   <li>first</li>
   <li>first</li>
   <li>first</li>
   <li>first</li>
   <li>first</li>
   <li>first</li>
 </ul>
     <a   name="load_more" id="load_more" class="btn btn-success">Load More</a>
     </div>
 
   </div>
 </div>  
</body>
</html>
     
    
 
 

Then create a custom.js file . take a variable limit and initialized value 5 by default . Use slice() Method for select subset of ul tag then display on document load then click a button which id is load_more then increase value of limit variable and show the li .

custom.js

    
<script>
  $(document).ready(function(e) {
     var limit = 5;
	 $(".loadMore li").slice(0, limit).show();
	 $(document).on('click','#load_more',function(e){
         limit += 5;
		 e.preventDefault();
	     $(".loadMore li").slice(0, limit).show();
	 });
	 //var lenght_name =  $(".loadMore li").length;
  });
 </script>