Youtor
Load data on page scroll using jquery
>> YOUR LINK HERE: ___ http://youtube.com/watch?v=HPVavdDzYoI
Link for all dot net and sql server video tutorial playlists • https://www.youtube.com/user/kudvenka... • Link for slides, code samples and text version of the video • http://csharp-video-tutorials.blogspo... • 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. • / @aarvikitchen5572 • 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 @StartRow = ((@PageNumber - 1) * @PageSize) + 1 • 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 • lt;!DOCTYPE html gt; • lt;html gt; • lt;head gt; • lt;script src= jquery-1.11.2.js gt; lt;/script gt; • lt;script type= text/javascript gt; • $(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({ • url: 'EmployeeService.asmx/GetEmployees', • method: 'post', • dataType: json , • data: { pageNumber: currentPageNumber, pageSize: 50 }, • success: function (data) { • var employeeTable = $('#tblEmployee tbody'); • $(data).each(function (index, emp) { • employeeTable.append(' lt;tr gt; lt;td gt;' + emp.ID + ' lt;/td gt; lt;td gt;' • emp.Name + ' lt;/td gt; lt;td gt;' + emp.Gender • ' lt;/td gt; lt;td gt;' + emp.Salary + ' lt;/td gt; lt;/tr gt;'); • }); • }, • error: function (err) { • alert(err); • } • }); • } • }); • lt;/script gt; • lt;/head gt; • lt;body style= font-family:Arial gt; • lt;h1 gt;The data will be loaded on demand as you scroll down the page lt;/h1 gt; • lt;table id= tblEmployee border= 1 style= border-collapse:collapse; font-size:xx-large gt; • lt;thead gt; • lt;tr gt; • lt;th gt;ID lt;/th gt; • lt;th gt;Name lt;/th gt; • lt;th gt;Gender lt;/th gt; • lt;th gt;Salary lt;/th gt; • lt;/tr gt; • lt;/thead gt; • lt;tbody gt; lt;/tbody gt; • lt;/table gt; • lt;/body gt; • lt;/html gt;
#############################
