| Current File : /home/users/barii/public_html/finansenl.com.pl/wodki/admin/test3.php |
<!doctype html>
<html>
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=2.0, user-scalable=yes" />
<title>Lazy load table using jQuery</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<link href="css/custom.css" rel="stylesheet" />
<style type="text/css">
</style>
</head>
<body>
<div class="wrapper">
<header>
<div class="container">
<h1 class="col-lg-9">Lazy load table using jQuery</h1>
</div>
</header>
<div class="container">
<h5>Author: Julian Hansen, March 2018</h5>
<div class="alert alert-success">
<p>Demonstrates how to lazy load table data on scroll.</p>
<p>Use the Turn loading on / off checkbox to activate / deactivate the scrolling</p>
<p>Use the Reset button to reset the table</p>
</div>
<div>
Turn loading <span>on</span> <input type="checkbox" id="loading" /> <button class="btn btn-success pull-right" id="reset">Reload</button>
</div>
<br>
<table class="table" id="table">
</table>
</div>
</div>
<footer>
<div class="container">
Copyright Julian Hansen © 2018
</div>
</footer>
<!-- INCLUDE "js/x-table.js:Populate" -->
<script src="http://code.jquery.com/jquery.js"></script>
<script src="js/x-table.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<!-- <script src="js/disqus-config.js"></script> -->
<script>
$(function() {
// Static values - get them once
var table = $('table');
// The height of the window
var clientheight = $(window).height();
// How far the table is from the top of the page
var offset = $(table).offset();
// Switch the label on the loading text
$('#loading').change(function() {
var text = this.checked ? 'off' : 'on';
$(this).prev('span').text(text);
});
// On reset clear table and repopulate
$('#reset').click(function() {
table.empty();
table.populateTable(30,5, true);
});
// Handle the scroll
$(document).on('scroll', function() {
// but only if loading is checked
if (!$('#loading').is(':checked')) return;
// How far have we scrolled
var scrolltop=$(window).scrollTop();
// How high is the table now?
var tableheight = $(table).height();
// check to see if the bottom of the table is coming into
// view
if (tableheight - (scrolltop - offset.top) < clientheight) {
// Simulate loading data here
// add some more data
// This could be a GET request similar to the sample here
// http://www.marcorpsa.com/ee/t3024.html
table.populateTable(10,5)
}
})
// set up the table with initial data
table.populateTable(30,5)
});
</script>
</body>
</html>