Paging in Repeater

Question

Just like we have pagesize property in gridview that allows us to switch back and forth between pages, isn't there anyway i can incorporate the same functionality in a repeater.

<table id="myTable">
    <tbody>
        <asp:Repeater ID="Repeater1" runat="server"
            onitemcommand="addItem_OnClick" DataMember="DefaultView">
            <ItemTemplate>
            <tr>
                <td>

                <div class="product">
                <table border="0" cellpadding="0" cellspacing="0" width="100%">
                    <tr valign="top">
                        <td width="105"><asp:HyperLink ID="HLSysDet" runat="server"
                            NavigateUrl='<%# "/Product.aspx?productId=" + Eval("ProductDescriptionId") %>'>
                            <asp:Image ID="Image1" runat="server" width="85" height="85"
                                ImageUrl='<%# Eval("Thumbnail")%>' border="0" />
                        </asp:HyperLink></td>
                        <td><ItemTemplate><a
                            href='<%# "/Product.aspx?productId=" + Eval("ProductDescriptionId") %>'>
                        '<%# Eval("ProductName")%>'</a> </ItemTemplate></b><br />
                        <br />

                        Manufacturer: <%# Eval("Manufacturer")%><br />
                        <br />
                        <b>Rs <%# Eval("UnitPrice")%>
                        </b><br />
                        <br />
                        Weight: <%# Eval("Weight")%> Kg<br />

                        </td>
                        <td width="20"></td>
                        <td valign="bottom" width="130">
                        <%# Eval("Quantity")%>+ in stock<br />


                        <asp:TextBox ID="_qty" runat="server" CssClass="textbox"
                            MaxLength="2" Text="1" Width="30"
                            Visible='<%# showBtn(Eval("Quantity")) %>' /> <asp:RangeValidator
                            ID="RangeValidator1" runat="server" ControlToValidate="_qty"
                            ErrorMessage="*" ForeColor="Red" MaximumValue="50"
                            MinimumValue="1"></asp:RangeValidator>
                        <div class="buttons"><span id="Span1" class="mandatory"
                            runat="server" visible='<%# isQty(Eval("Quantity")) %>'>
                        Sorry, this item is out of stock</span></div>




                        <div class="buttons"><br />
                        <asp:LinkButton ID="CommandButton" runat="server"
                            Text='Add to Cart' CssClass="positive" CommandName="Add"
                            CommandArgument='<%# Eval("ProductDescriptionId") %>'
                            Visible='<%# showBtn(Eval("Quantity")) %>' />
                        </div>




                        </td>


                    </tr>
                    </div>
                </table>
                </div>
                </td>
            </tr>
            </ItemTemplate>
        </asp:Repeater>
    </tbody>
</table>
<div class='pager'><a href='#' alt='Previous' class='prevPage'>Prev</a>
<span class='currentPage'></span> of <span class='totalPages'></span> <a
    href='#' alt='Next' class='nextPage'>Next</a></div>

Solution 1

Check out http://plugins.jquery.com/project/paginateTable.

It's basically pagination on a html table ( which you can build using a repeater ) using jQuery.

It's easy to use, has customization options. I used it already, worked just fine.

EDIT

You'd have to build your table with a repeater. I've provided a quick example below:

<table id="myTable">
  <tbody>
      <asp:Repeater ...>
          <ItemTemplate>
              <tr><td><%# Eval('Description') %></td></tr>
          </ItemTemplate>
      </asp:Repeater>
   <tbody>
</table>
<div class='pager'>
   <a href='#' alt='Previous' class='prevPage'>Prev</a>
   <span class='currentPage'></span> of <span class='totalPages'></span>
   <a href='#' alt='Next' class='nextPage'>Next</a>
</div>

Your javascript should then call the paginateTable function on this

<script>
    $(document).ready(function () {
        $('#myTable').paginateTable({ rowsPerPage: 2 });
    });
</script>

Solution 2

Repeater and control offers a quick and flexible means of displaying data on a ASPX page. But it offers no paging functionality built in.

However you may do something about that ...

Refer to the following page if you like to figure it out: http://www.codeproject.com/KB/webforms/Aspnet_Repeater_Control.aspx

Comments

[user478636]

interesting ...that means i will have to wrap the repeater around a table ?

[user478636]

Strange I have done everything as you said...but theres no paging. All the items are displayed all on the same page....not just 2 per page...and the next/previous buttons dont do anything.

[user478636]

even the example given in the article doesnt work... i have added jquery to my src also

[koenmetsu]

Have you added the plugin too?

[koenmetsu]

They have a live version at devlegion.com/?page_id=15, that's about all I can do without seeing your code

[user478636]

I have edited main post...its also worth mentioning i copied the sample code on my page, it also didnt work

[EvanGWatkins]

Do you have the correct version of jQuery installed in your project? If the plugin calls for a specific version and you have a different version, the jQuery effects may not show. Check your version of jQuery and downgrade/upgrade if needed.

[user478636]

i dont think thats an issue...it always a simple problem that always creates the biggest of confusions

[EvanGWatkins]

I have just implemented the jQuery paginateTable into my .net application with no issues...below is my table with the repeater... <table id="tblRecAct"> <tbody> <asp:Repeater ID="rptRecentActivity" runat="server"> <ItemTemplate> <tr> <td> </td> </tr> </ItemTemplate> </asp:Repeater> </tbody> </table>

[EvanGWatkins]

^^^Sorry for the bad formatting. I removed the actual elements of the repeater to make up for the spacing. The only thing that I had to do to get it to work (other than referencing the files) was to add the <tr><td></td></tr> tags in the repeater. Works like a charm for me

[user478636]

Please do post an answer if you are posting any code. Thanks.

[Fares Ayyad]

what if the table is inside repeater ?