Click here to Skip to main content
15,877,966 members
Please Sign up or sign in to vote.
3.67/5 (3 votes)
See more:
Hi all ,

I am making a scroll feature in my website that loads more items into the datalist when i scroll down (like Facebook).And here is my code :

<script type="text/javascript">
        $(document).ready(function() {

            function lastPostFunc() {
                $('#divPostsLoader').html('<img src="images/bigLoader.gif">');

                //send a query to server side to present new content
                    type: "POST",
                    url: "Articles.aspx/ItemsGet",
                    data: "{}",
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function(data) {

                        if (data != "") {


            //When scroll down, the scroller is at the bottom with the function below and fire the lastPostFunc function
            $(window).scroll(function() {
                if ($(window).scrollTop() == $(document).height() - $(window).height()) {


The datalist is bounded to an object datasource that is getting all the items.So in the ItemsGet web method,how can i specify the number of items displayed at the beginning,and then when scroll down increase this number ?

Thanks in advance.

1 solution

Check the use of maxRecordsToDisplay of this article Auto loading content on page scroll in using jquery[^]
Hope this will resolve your issue.
Share this answer

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900