jQuery Range Slider and Load data when page is scrolling using DataList in ASP.Net

Hi vishnuppt,

Here I have created sample that full-fill your requirement.

HTML

<div>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/jquery-ui.js" type="text/javascript"></script>
    <link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/themes/excite-bike/jquery-ui.css"
        rel="stylesheet" type="text/css" />
    <script type="text/javascript">
        var pageIndex = 0;
        var pageCount;
        var min = 0;
        var max = 0;
        var startId = 0;
        var endId = 0;
        var PageSize = 9;
        $(window).scroll(function () {
            if ($(window).scrollTop() == $(document).height() - $(window).height()) {
                GetRecords(startId, endId);
            }
        });
        $(function () {
            GetRecords(0, 0);
            GetRange();
        });
        function SetSlider() {
            $("#price_slider").slider({
                min: parseFloat(min),
                max: parseFloat(max),
                step: 5,
                values: [min, max],
                stop: function (event, ui) {
                    pageIndex = 0;
                    var start = parseInt(ui.values[0]);
                    var end = parseInt(ui.values[1]);
                    startId = start;
                    endId = end;
                    $("#price_slider_value").html("ID From." + ui.values[0] + " - To." + ui.values[1]);
                    __doPostBack('<%=UpdatePanel1.ClientID %>', null);
                    GetRecords(start, end);
                },
                slide: function (event, ui) {
                    if ((ui.values[0] + 5) >= ui.values[1]) {
                        return false;
                    }
                }
            });
            $("#price_slider_value").html("ID From." + min + " - To." + max);
        }

        function GetRange() {
            $.ajax({
                type: "POST",
                url: "CS.aspx/GetRange",
                data: '{}',
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (response) {
                    var xmlDoc = $.parseXML(response.d);
                    var xml = $(xmlDoc);
                    if (min == 0 && max == 0) {
                        min = parseInt(xml.find("Range").eq(0).find("Min").text());
                        max = parseInt(xml.find("Range").eq(0).find("Max").text());
                        SetSlider();
                    }
                },
                failure: function (response) {
                    alert(response.responseText);
                },
                error: function (response) {
                    alert(response.responseText);
                }
            });
        }

        function GetRecords(start, end) {
            GetRange();
            pageIndex++;
            if (pageIndex == 1 || pageIndex <= pageCount) {
                $("#loader").show();
                $.ajax({
                    type: "POST",
                    url: "CS.aspx/GetImages",
                    data: '{pageIndex: ' + pageIndex + ', start: ' + start + ', end: ' + end + '}',
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: OnSuccess,
                    failure: function (response) {
                        alert(response.responseText);
                    },
                    error: function (response) {
                        alert(response.responseText);
                    }
                });
            }
        }

        function OnSuccess(response) {
            var xmlDoc = $.parseXML(response.d);
            var xml = $(xmlDoc);
            pageCount = parseInt(xml.find("PageCount").eq(0).find("PageCount").text());
            var images = xml.find("Images");
            var repeatColumns = parseInt("<%=dlImages.RepeatColumns == 0 ? 1 : dlImages.RepeatColumns %>");
            var rowCount = Math.ceil(images.length / repeatColumns);
            if (images.length < PageSize && pageCount != 1) { // Here 9 is PageSize
                pageCount = pageCount - 1;
            }
            var j = 0;
            images.each(function () {
                var image = $(this);
                var row = $("[id*=dlImages] .item:last").closest("tr");
                if ($(".is_used[value='1']", row).length == repeatColumns) {
                    row = $("[id*=dlImages] tr").eq(0).clone();
                    $(".is_used", row).val("0");
                    $(".image", row).attr("src", "");
                    $(".button", row).attr("href", "");
                    $(".loader", row).remove();
                    $("[id*=dlImages]").append(row);
                    j = 0;
                } else {
                    row = $("[id*=dlImages] .item:last").closest("tr");
                }
                var cell = $(".item", row).eq(j);
                $(".name", cell).html(image.find("Name").text());
                $(".button", cell).attr("href", image.find("Url").text());
                $(".is_used", cell).attr("value", "1");
                var img = $(".image", cell);
                var loader = $("<img class = 'loader' src = 'loader.gif' />");
                img.after(loader);
                img.hide();
                img.attr("src", image.find("Url").text());
                img.load(function () {
                    $(this).parent().find(".loader").remove();
                    $(this).fadeIn();
                });
                j++;
            });
            $("[id*=dlImages] .is_used[value='0']").closest(".item").remove();
            if (pageCount == 1) {
                $(".modal").hide();
            }
        }
    </script>
    <div id="price_slider_value" style="width: 400px">
    </div>
    <div id="price_slider">
    </div>
    <hr />
    <asp:ScriptManager runat="server">
    </asp:ScriptManager>
    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
        <ContentTemplate>
            <asp:DataList ID="dlImages" runat="server" RepeatLayout="Table" RepeatColumns="3"
                CellPadding="2" CellSpacing="20">
                <ItemTemplate>
                    <table class="item" cellpadding="0" cellspacing="0" border="0">
                        <tr>
                            <td align="center" class="header">
                                <span class="name">
                                    <%# Eval("Name") %></span>
                            </td>
                        </tr>
                        <tr>
                            <td align="center" class="body">
                                <img class="image" src='<%# Eval("Url") %>' alt="" />
                            </td>
                        </tr>
                        <tr>
                            <td align="center">
                                Photo by <a href="http://www.flickr.com/photos/pearlshelf/">Pearl Photo</a>
                            </td>
                        </tr>
                        <tr>
                            <td class="footer" align="center">
                                <a href='<%# Eval("Url") %>' target="_blank" class="button">View</a>
                                <input type="hidden" class="is_used" value="0" />
                            </td>
                        </tr>
                    </table>
                </ItemTemplate>
            </asp:DataList>
        </ContentTemplate>
    </asp:UpdatePanel>
    <div class="modal">
        <div class="center">
            <img alt="" src="loader.gif" />
        </div>
    </div>
</div>

Code

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        this.BindDummyItem();
    }
}

private void BindDummyItem()
{
    DataTable dummy = new DataTable();
    dummy.Columns.Add("Id");
    dummy.Columns.Add("Name");
    dummy.Columns.Add("Url");
    int count = dlImages.RepeatColumns == 0 ? 1 : dlImages.RepeatColumns;
    for (int i = 0; i < count; i++)
    {
        dummy.Rows.Add();
    }
    dlImages.DataSource = dummy;
    dlImages.DataBind();
}

[WebMethod]
public static string GetImages(int pageIndex, int start, int end)
{
    return GetImagesData(pageIndex, start, end).GetXml();
}   

[WebMethod]
public static string GetRange()
{
    string query = "SELECT MIN(Id) [Min], MAX(Id) [Max] FROM [Images]";
    SqlCommand cmd = new SqlCommand(query);
    cmd.CommandType = CommandType.Text;
    return GetDataNoPageCount(cmd, "Range").GetXml();
}

public static DataSet GetImagesData(int pageIndex, int start, int end)
{
    int pageSize = 9;
    string query = "[GetImagesPageWiseBasedOnRange]";
    SqlCommand cmd = new SqlCommand(query);
    cmd.CommandType = CommandType.StoredProcedure;
    cmd.Parameters.AddWithValue("@PageIndex", pageIndex);
    cmd.Parameters.AddWithValue("@PageSize", pageSize);
    cmd.Parameters.AddWithValue("@Start", start);
    cmd.Parameters.AddWithValue("@End", end);
    cmd.Parameters.Add("@PageCount", SqlDbType.Int, 4).Direction = ParameterDirection.Output;
    return GetData(cmd, "Images");
}

private static DataSet GetData(SqlCommand cmd, string tableName)
{
    string strConnString = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
    using (SqlConnection con = new SqlConnection(strConnString))
    {
        using (SqlDataAdapter sda = new SqlDataAdapter())
        {
            cmd.Connection = con;
            sda.SelectCommand = cmd;
            using (DataSet ds = new DataSet())
            {
                sda.Fill(ds, tableName);
                DataTable dt = new DataTable("PageCount");
                dt.Columns.Add("PageCount");
                dt.Rows.Add();
                dt.Rows[0][0] = cmd.Parameters["@PageCount"].Value;
                ds.Tables.Add(dt);
                return ds;
            }
        }
    }
}

private static DataSet GetDataNoPageCount(SqlCommand cmd, string tableName)
{
    string strConnString = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
    using (SqlConnection con = new SqlConnection(strConnString))
    {
        using (SqlDataAdapter sda = new SqlDataAdapter())
        {
            cmd.Connection = con;
            sda.SelectCommand = cmd;
            using (DataSet ds = new DataSet())
            {
                sda.Fill(ds, tableName);
                return ds;
            }
        }
    }
}

SQL

CREATE PROCEDURE [GetImagesPageWiseBasedOnRange]
    @PageIndex INT = 1
    ,@PageSize INT = 3
    ,@Start INT
    ,@End INT
    ,@PageCount INT OUTPUT
AS
BEGIN
    SET NOCOUNT ON;
  
    SELECT ROW_NUMBER() OVER
           (
            ORDER BY [Id] ASC
           )AS RowNumber
          ,Id
          ,Name
          ,Url
    INTO #Results
    FROM [Images]
    WHERE (Id BETWEEN @Start AND @End) OR (@Start = 0 AND @End = 0)
  
    DECLARE @RecordCount INT
 
    SELECT @RecordCount = COUNT(*) FROM #Results
  
    SET @PageCount = CEILING(CAST(@RecordCount AS DECIMAL(10, 2)) / CAST(@PageSize AS DECIMAL(10, 2)))
 
    SELECT * FROM #Results
    WHERE RowNumber BETWEEN(@PageIndex -1) * @PageSize + 1 AND(((@PageIndex -1) * @PageSize + 1) + @PageSize) - 1
 
    DROP TABLE #Results
END

Screenshot

Please refer below script.

SQL

CREATE PROCEDURE [GetImagesPageWiseBasedOnRange]
	@PageIndex INT = 1
	,@PageSize INT = 3
	,@Start INT
	,@End INT
	,@PageCount INT OUTPUT
AS
BEGIN
	SET NOCOUNT ON;
 
	SELECT ROW_NUMBER() OVER
		   (
		  	ORDER BY [Id] ASC
		   )AS RowNumber
		  ,Id
		  ,Name
		  ,Url
	INTO #Results
	FROM [Images]
	WHERE (Id BETWEEN @Start AND @End) OR (@Start = 0 AND @End = 0) 
 
	DECLARE @RecordCount INT

	SELECT @RecordCount = COUNT(*) FROM #Results
 
	SET @PageCount = CEILING(CAST(@RecordCount AS DECIMAL(10, 2)) / CAST(@PageSize AS DECIMAL(10, 2)))

	SELECT * FROM #Results
	WHERE RowNumber BETWEEN(@PageIndex -1) * @PageSize + 1 AND(((@PageIndex -1) * @PageSize + 1) + @PageSize) - 1

	DROP TABLE #Results
END

I hope this will help you out.