All About .Net: Paging With Scrolling in datalist asp.net

aspx page

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="CS.aspx.cs" Inherits="CS" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

<script type="text/javascript">
    var pageIndex = 1;
    var pageCount;
   function test() {
// if you load with paging then remove comment below
        //if ($(window).scrollTop() == $(document).height() - $(window).height()) {
            GetRecords();
        }
    //});
    function GetRecords() {
        pageIndex++;
        if (pageIndex == 2 || pageIndex <= pageCount) {
            $("#loader").show();
            $.ajax({
                type: "POST",
                url: "test.aspx/GetCustomers",
                data: '{pageIndex: ' + pageIndex + '}',
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: OnSuccess,
                failure: function (response) {
                    alert(response.d);
                },
                error: function (response) {
                    alert(response.d);
                }
            });
        }
    }
    function OnSuccess(response) {
        var xmlDoc = $.parseXML(response.d);
        var xml = $(xmlDoc);
        pageCount = parseInt(xml.find("Table1").eq(0).find("TotalRows").text());
        //alert(pageCount);
        var customers = xml.find("Table");
        customers.each(function () {
            var customer = $(this);
            var table = $("#dvCustomers table").eq(0).clone(true);
            $(".CityName", table).html(customer.find("CityName").text());
            $("#dvCustomers").append(table).append("<br />");
        });
        $("#loader").hide();
    }
    </script>

</head>
<body style="font-family: Arial; font-size: 10pt">
    <form id="form1" runat="server">
<table>
        <tr>
            <td>
                <div id="dvCustomers">
                    <asp:Repeater ID="rptCustomers" runat="server">
                        <ItemTemplate>
                            <table cellpadding="2" cellspacing="0" border="1" style="width: 200px; height: 100px;
                                border: dashed 2px #04AFEF; background-color: #B0E2F5">
                                <tr>
                                    <td>
                                        <b><u><span class="CityName">
                                            <%# Eval("CityName")%></span></u></b>
                                    </td>
                                </tr>

                            </table>
                            <br />
                        </ItemTemplate>
                    </asp:Repeater>


                </div>
            </td>

        </tr>
        <tr>
            <td>
                <input type="button" onclick="test();" value="Load" />
            </td>
        </tr>
        <tr>
            <td valign="bottom">
                <img id="loader" alt="" src="images/ajax-loader.gif" style="display: none" />
            </td>
        </tr>
    </table>
    </form>
</body>
</html>

****************************************************************
cs file

using System;
using System.Collections;
using System.Configuration;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;
using System.Web.Services;
using System.Data.SqlClient;
using System.Collections.Generic;
using System.IO;

public partial class test : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            //int pageIndex = 1;
            rptCustomers.DataSource = GetCity(1);
            rptCustomers.DataBind();

        }
    }

    public static DataSet GetCity(int pageIndex)
    {
//call procedure here
        DataSet ds = new DataSet();
        ds = BusinessLayer.Search.Test(pageIndex, 10);

        return ds;
    }

    [WebMethod]
    public static string GetCustomers(int pageIndex)
    {
        System.Threading.Thread.Sleep(2000);
        string dtsrt = GetCity(pageIndex).GetXml();
        return dtsrt;
    }
    public static string ConvertDatatableToXML(DataTable dt)
    {
        MemoryStream str = new MemoryStream();
        dt.WriteXml(str, true);
        str.Seek(0, SeekOrigin.Begin);
        StreamReader sr = new StreamReader(str);
        string xmlstr;
        xmlstr = sr.ReadToEnd();
        return (xmlstr);
    }


}

//create procedure whitch give result in page

/*
[dbo].[Test]5,10
*/
ALTER PROC [dbo].[Test]
    @PageNo INT ,
    @ItemsPerPage INT

AS
BEGIN
    DECLARE
    @StartIdx int,
    @EndIdx INT

    IF @PageNo < 1 SET @PageNo = 1
    IF @ItemsPerPage < 1 SET @ItemsPerPage = 10
    SET @StartIdx = (@PageNo -1) * @ItemsPerPage + 1
    SET @EndIdx = (@StartIdx + @ItemsPerPage) - 1
    SELECT * FROM
    (SELECT ROW_NUMBER() OVER(ORDER BY CityName) AS Row,
               CityName
           FROM Master.City

    ) AS tbl WHERE Row >= + CONVERT(VARCHAR(9), @StartIdx)
    AND Row < = + CONVERT(varchar(9), @EndIdx)


    --total page cout
    SELECT COUNT(*)/@ItemsPerPage AS 'TotalRows' FROM Master.City

END

All About .Net

Tuesday, September 24, 2013

Paging With Scrolling in datalist asp.net

No comments:

Post a Comment

Opps Part 1 : Abstraction

Search This Blog