filmov
tv
Load data on page scroll using jquery
Показать описание
Link for all dot net and sql server video tutorial playlists
Link for slides, code samples and text version of the video
Healthy diet is very important both for the body and mind. If you like Aarvi Kitchen recipes, please support by sharing, subscribing and liking our YouTube channel. Hope you can help.
In this video we will discuss, how to load more data on page scroll using jQuery AJAX.
This is similar to Facebook. As you scroll down on the page more data will be loaded.
When the page is initially loaded we want to retrieve and display the first 50 rows from the database table tblEmployee. As we scroll down and when we hit the bottom of the page we want to load the next set of 50 rows.
Stored procedure
Create procedure spGetEmployees
@PageNumber int,
@PageSize int
as
Begin
Declare @StartRow int
Declare @EndRow int
Set @EndRow = @PageNumber * @PageSize;
WITH RESULT AS
(
SELECT Id, Name, Gender, Salary,
ROW_NUMBER() OVER (ORDER BY ID ASC) AS ROWNUMBER
From tblEmployee
)
SELECT *
FROM RESULT
WHERE ROWNUMBER BETWEEN @StartRow AND @EndRow
End
HTML page
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
$(document).ready(function () {
var currentPage = 1;
loadPageData(currentPage);
$(window).scroll(function () {
if ($(window).scrollTop() == $(document).height() - $(window).height()) {
currentPage += 1;
loadPageData(currentPage);
}
});
function loadPageData(currentPageNumber) {
$.ajax({
method: 'post',
dataType: "json",
data: { pageNumber: currentPageNumber, pageSize: 50 },
success: function (data) {
var employeeTable = $('#tblEmployee tbody');
$(data).each(function (index, emp) {
+ emp.Name + '</td><td>' + emp.Gender
+ '</td><td>' + emp.Salary + '</td></tr>');
});
},
error: function (err) {
alert(err);
}
});
}
});
</script>
</head>
<body style="font-family:Arial">
<h1>The data will be loaded on demand as you scroll down the page</h1>
<table id="tblEmployee" border="1" style="border-collapse:collapse; font-size:xx-large">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Gender</th>
<th>Salary</th>
</tr>
</thead>
<tbody></tbody>
</table>
</body>
</html>
Link for slides, code samples and text version of the video
Healthy diet is very important both for the body and mind. If you like Aarvi Kitchen recipes, please support by sharing, subscribing and liking our YouTube channel. Hope you can help.
In this video we will discuss, how to load more data on page scroll using jQuery AJAX.
This is similar to Facebook. As you scroll down on the page more data will be loaded.
When the page is initially loaded we want to retrieve and display the first 50 rows from the database table tblEmployee. As we scroll down and when we hit the bottom of the page we want to load the next set of 50 rows.
Stored procedure
Create procedure spGetEmployees
@PageNumber int,
@PageSize int
as
Begin
Declare @StartRow int
Declare @EndRow int
Set @EndRow = @PageNumber * @PageSize;
WITH RESULT AS
(
SELECT Id, Name, Gender, Salary,
ROW_NUMBER() OVER (ORDER BY ID ASC) AS ROWNUMBER
From tblEmployee
)
SELECT *
FROM RESULT
WHERE ROWNUMBER BETWEEN @StartRow AND @EndRow
End
HTML page
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
$(document).ready(function () {
var currentPage = 1;
loadPageData(currentPage);
$(window).scroll(function () {
if ($(window).scrollTop() == $(document).height() - $(window).height()) {
currentPage += 1;
loadPageData(currentPage);
}
});
function loadPageData(currentPageNumber) {
$.ajax({
method: 'post',
dataType: "json",
data: { pageNumber: currentPageNumber, pageSize: 50 },
success: function (data) {
var employeeTable = $('#tblEmployee tbody');
$(data).each(function (index, emp) {
+ emp.Name + '</td><td>' + emp.Gender
+ '</td><td>' + emp.Salary + '</td></tr>');
});
},
error: function (err) {
alert(err);
}
});
}
});
</script>
</head>
<body style="font-family:Arial">
<h1>The data will be loaded on demand as you scroll down the page</h1>
<table id="tblEmployee" border="1" style="border-collapse:collapse; font-size:xx-large">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Gender</th>
<th>Salary</th>
</tr>
</thead>
<tbody></tbody>
</table>
</body>
</html>
0:22:19
Load data on page scroll using jquery
0:19:39
Load Dynamic Data on Page Scroll with PHP and AJAX
0:01:05
How to load data on page scroll from mysql database using jquery ajax php
0:00:22
How to load Data on page scroll using JQuery and Linq in Asp.net
0:03:49
Scroll to a section on page load using JQuery | Js Tutorial | Animate
0:09:58
Load More Data on Page Scroll (Ajax, PHP and MySQLi) - Learn Infinity
0:12:56
Load More Data on Page Scroll using Ajax Jquery PHP
0:08:00
Auto Load Data on Page Scroll using jQuery Ajax PHP from MySQL
2:34:59
cPanel Mastery Full Course | The Ultimate Guide to Webhosting & Services
0:10:10
Javascript Scroll Down to Load More Content
0:05:25
Load More Data from Database On Page Scroll (PHP/jQuery)
0:13:36
How to load data on scroll in JavaScript | Infinite Scrolling working demo for web and mobile
0:07:02
Load Dynamic Data on Page Scroll using jquery AJAX in PHP MYSQL
0:10:01
PHP Laravel - Load more on scroll using Ajax
0:05:04
Subtle, yet Beautiful Scroll Animations
0:07:11
The 'scroll' event in JavaScript | window.onscroll
0:07:16
how to load ajax scroll data in codeigniter
0:02:51
Animate On Scroll With Just 3 LINES Of CSS (No Libraries Needed)
0:12:26
Create an Infinite Scroll | Lazy Loading Page
0:11:06
Laravel 10 Page Scroll Load More Data
0:12:19
3 Ways To Scrape Infinite Scroll Sites with Playwright
0:16:44
Ajax & PHP Tuotorial | Load More Data On Scroll
0:00:12
Dynamically load data on div scroll using php, mysql, jquery and ajax
0:13:55
Laravel Vue JS Infinite loader | scroll loading | load data without page refresh #1
Комментарии