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 default display:none property initialized from ul tag .
<!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>
<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>