Load data on scroll event of browser .Like Facebook Scrolling.when you scroll completely then scroll event fetch older updated data and show.

(1) Html markup and Java script code:


<script type='text/javascript' src="http://code.jquery.com/jquery-1.9.1.js"></script>
        <script type='text/javascript'>

        var vfstindex;
        function showdata(stindex) {
            if ($(document).height() <= $(window).scrollTop() + $(window).height()) {
                //Replace this with your function call for downward-scrolling
                $.ajax(
                            {
                                type: "POST",
                                url: "service.asmx/GetDataFromServer",
                                data: "{startIndex:" + stindex + "}",
                                contentType: "application/json; charset=utf-8",
                                dataType: "json",
                                async: true,
                                cache: false,
                                success: function (msg) {
                                    //alert(msg.d);
                                    var div = document.createElement('table');
                                    div.innerHTML = msg.d.s;
                                    vfstindex = msg.d.l;
                                    for (i = 0; i < div.childNodes.length; i++)
                                        tt.appendChild(div.childNodes[i]);
                                },
                                error: function (x, e) {
                                    alert("The call to the server side failed. " + x.responseText);
                                }} );}}
                
                  $(function () {
            $(window).scroll(function () { showdata(vfstindex); });
        });
    </script>


<body>
    <form id="form1" runat="server">
    <div>
        <table width="80%">
            <tbody id="tt">
            </tbody>
        </table>
    </div>
    <script type="text/javascript">
        showdata(1);
    </script>
    </form>
</body>
(2)Web service Method:


 public class m
    {
        public string s { get; set; }
        public Int64 l { get; set; }
    }

    [WebMethod]
    public m GetDataFromServer(int startIndex)
    {
        StringBuilder resp = new StringBuilder();

        int nor = 50;

        for (int i = startIndex; i < startIndex + nor; i++)
        {
            resp.Append("<tr><td >" + i.ToString() + "</td></tr>");
        }
        m mm = new m();
        mm.s = resp.ToString();
        mm.l = startIndex + nor;
    
  return mm;

    }
If there is anything wrong with this please let me know.


Author

Priti Kumari

I am technical blogger.I blogs at www.c-Sharpcorner.com and https://aspdotnetmyblog.blogspot.in/.

No comments:

Post a Comment