Pagination with Repeater Control

• Download source - 2.81 KB

Introduction

Binding a repeater control is a simple task but to do pagination on a repeater control or custom paginantion on any data control is a little bit tough. This article demonstrates how to do custom pagination for any data control, or pagination with a repeater control and also how to bind a repeater control.

ASP.NET 2.0 provides five types of data controls among which the Repeater control is the fast bound data control. Nevertheless, there is no built-in pagination with this control. This means, binding numbers of records without pagination is not a good programing concept, since it will display entire data on a sigle page and the size of the page will become too long. So the solution is, custom pagination, if no in-built pagination is provided.

Mechanism

For custom pagination, I have used Data Logic (DL) support & converted the table dynamically as per convenience in the DL section, so that our application will run fast. The Stored Procedure “sp_StudentRec” takes two input parameters viz. @pag à user in the current page and @pgSize à the number of items you want to display. It returns two tables: The 1st one contains items and the 2nd one is for the total number of records present in the table. From this table we can calculate the number of possible pages at UI.

CREATE PROCEDURE sp_StudentRec  
( 
@pg int, 
@pgSize int 
) 
AS 
BEGIN 
Create table #temp 
( 
id int identity primary key, 
StName varchar(50), 
StRoll varchar(5), 
StPercent real 
) 
 
 
Set NoCount OFF 
Insert into #temp(StName, StRoll, StPercent) Select * from Tbl_Student order by AggMarks 
 
 
declare @from int 
declare @to int 
set @to=@pg * @pgSize 
Set @from= @pg * @pgSize-@pgsize 
 
Select * from #temp where id>@from and id<=@to 
Select count(*) from #temp
drop table #temp 
Set NoCount ON 
END

Fig. 1 shows the structure of the table. Make sure that your database contains the table used in SP with similar fields, or you can modify as per your need. Let us move towards the UI section now.

To display the items on the repeater control, bind the control using the DataBinder.Eval() method as shown below within <ItemTemplate> of the control.

<asp:Repeater ID="Repeater1" runat="server">
  <ItemTemplate>
    <table>
      <tr>
        <td style="width:70px"><%#DataBinder.Eval(Container.DataItem, "StRoll") %></td>
        <td style="width:150px"><%#DataBinder.Eval(Container.DataItem, "StName") %></td>
        <td style="width:30px"><%#DataBinder.Eval(Container.DataItem, "StPercent") %></td>
      </tr>
    </table>
  </ItemTemplate>
</asp:Repeater>
 
<asp:LinkButton ID="lnkBtnPrev" runat="server" Font-Underline="False"
            OnClick="lnkBtnPrev_Click" Font-Bold="True"><< Prev </asp:LinkButton>
            <input id="txtHidden" style="width: 28px" type="hidden" value="1"
                runat="server" />
            <asp:LinkButton ID="lnkBtnNext" runat="server" Font-Underline="False"
                OnClick="lnkBtnNext_Click" Font-Bold="True">Next >></asp:LinkButton>

To do custome pagination, take two link button controls, one for <<Prevous, and another for Next>>. Apart from this, take a hidden field to maintain the page status (i.e the page on which the user is currently). On the <<Previous link click event, decrease the value in the hidden field by 1. Similarly, increase the hidden field value by 1 on the Next>> link button click event and bind the repeater. Hence, you can navigate either side and items will be displayed accordingly. The code is:

protected void lnkBtnPrev_Click(object sender, EventArgs e)
    {
        txtHidden.Value = Convert.ToString(Convert.ToInt16(txtHidden.Value) - 1);
        bindrepeater();
    }
 
protected void lnkBtnNext_Click(object sender, EventArgs e)
    {
        txtHidden.Value = Convert.ToString(Convert.ToInt16(txtHidden.Value) + 1);
        bindrepeater();
    }
 
// On page load event..
protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            bindrepeater();
        }
    }

// Bind repeater control..
public void bindrepeater()
    {
        SqlConnection con = new SqlConnection("Your Conection String");
        SqlCommand com = new SqlCommand("sp_StudentRec", con);
        com.CommandType = CommandType.StoredProcedure;
        com.Parameters.Add("@pg", SqlDbType.Int).Value = Convert.ToInt16(txtHidden.Value);
        com.Parameters.Add("@pgSize", SqlDbType.Int).Value = 5;
 
        SqlDataAdapter da = new SqlDataAdapter();
        da.SelectCommand = com;
 
        DataSet ds = new DataSet();
        da.Fill(ds);
        Repeater1.DataSource = ds;
        Repeater1.DataBind();
        pageno(Convert.ToInt16(ds.Tables[1].Rows[0][0].ToString()));
    }

Simultaneously, you need to maintain the link button’s visibility according to items present on the control, so that it will work properly. For this, the function is given below. The Fig. 2 shows three different results.

public void pageno(int totItems)
    {
        // Calculate total numbers of pages
        int pgCount = totItems / 5 + totItems % 5;
 
        // Display Next>> button
        if (pgCount-1 > Convert.ToInt16(txtHidden.Value))
            lnkBtnNext.Visible = true;
        else
            lnkBtnNext.Visible = false;
 
        // Display <<Prev button
        if ((Convert.ToInt16(txtHidden.Value)) > 1)
            lnkBtnPrev.Visible = true;
        else
            lnkBtnPrev.Visible = false;
    }

Output

Once you have understand the concept, you can modify it according to your requirements. I hope this article will help you to do your custom pagination for any type of data control, whether the built-in paging property is provided or not.

Wish you all the best and happy coding.