Load more items in datalist when scroll down ?

See more:

ASP.NET

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
                $.ajax({
                    type: "POST",
                    url: "Articles.aspx/ItemsGet",
                    data: "{}",
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function(data) {

                        if (data != "") {
                            $('.divLoadData:last').after(data.d);
                        }
                        $('#divPostsLoader').empty();
                    }

                })
            };

            //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()) {
                    lastPostFunc();
                }
            });

        });
    </script>

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.