custom paging in gridview

Question

I am looking for paging(Top,Bottom) functionality for gridview(or any databind controls)

i am using .net framework 2.0.

i would like to have pointers

thank you

solution: i used jQuery plugin jquery.tablePagination.0.1.js for my solution

Answer 1

This will be hardly achievable in GridView because it uses rigid table structure with only single pager template. You need two - one on the top and one on the bottom. For such control you need Repeater (.NET 2.0) or ListView (.NET 3.5). When you have buttons placed you can handle their click or command events and rebind your grid to newly selected set of data. In repeater you will probably have to store current page and number of items per page somewhere (ViewState). If you want jQuery based paging (client side) with partial rendering you need to handle client side onclick and add AJAX call to get new page based on pushed button.

Answer 2

You can asp:repeater for this this can easily handle by Repeater control.

This aspx page code

        <asp:Repeater ID="rptImages" runat="server" onitemcommand="rptImages_ItemCommand">
              <ItemTemplate >           
                     <div class="image"> <a ><asp:Image ID="Image1" runat="server" imageUrl=' <%# Eval("ImageUrl") %>'  /></a> </div>        
               </ItemTemplate>            
           </asp:Repeater>                    


        <asp:Repeater ID="rptPages" Runat="server" 
                            onitemcommand="rptPages_ItemCommand">
              <HeaderTemplate>
              <table cellpadding="0" cellspacing="0" border="0">
              <tr class="text">
                 <td><b style="color:White;">Page:</b>&nbsp;</td>
                 <td>
              </HeaderTemplate>
              <ItemTemplate>
                 <asp:LinkButton ID="btnPage" ForeColor="White"
                                 CommandName="Page"
                                 CommandArgument="<%#
                                 Container.DataItem %>"
                                 CssClass="text"
                                 Runat="server"><%# Container.DataItem %>
                                 </asp:LinkButton>&nbsp;
              </ItemTemplate>
              <FooterTemplate>
                 </td>
              </tr>
              </table>
              </FooterTemplate>
          </asp:Repeater>                      



this code behind page code
        public void LoadData()
            {
                try
                {
                    PagedDataSource pgitems = new PagedDataSource();
                    DataView dv = new DataView(dtImage);
                    pgitems.DataSource = dv;
                    pgitems.AllowPaging = true;
                    pgitems.PageSize = 8;
                    pgitems.CurrentPageIndex = PageNumber;
                    if (pgitems.PageCount > 1)
                    {
                        rptPages.Visible = true;
                        ArrayList pages = new ArrayList();
                        for (int i = 0; i < pgitems.PageCount; i++)
                            pages.Add((i + 1).ToString());
                        rptPages.DataSource = pages;
                        rptPages.DataBind();
                    }
                    else
                        rptPages.Visible = false;
                    rptImages.DataSource = pgitems;
                    rptImages.DataBind();
                }
                catch { }
            }       

    public int PageNumber()
        {

            get
            {
                if (ViewState["PageNumber"] != null)
                    return Convert.ToInt32(ViewState["PageNumber"]);
                else
                    return 0;
            }
            set
            {
                ViewState["PageNumber"] = value;
            }
        }

            public void itemGet()
    {
        try
        {
            var Images = dataContext.sp_getCards(categoryId);

            PagedDataSource pds = new PagedDataSource();
            pds.DataSource = Images;
            pds.AllowCustomPaging = true;
            pds.AllowPaging = true;
            pds.PageSize = 8;

            pds.CurrentPageIndex = CurrentPage;

            lblCurrentPage.Text = "Page: " + (CurrentPage + 1).ToString() + " of "
                + pds.PageCount.ToString();


            // Disable Prev or Next buttons if necessary
            //cmdPrev.Enabled = !pds.IsFirstPage;
            //cmdNext.Enabled = !pds.IsLastPage;

            rptImages.DataSource = pds;
            rptImages.DataBind();
        }
        catch { }

    }


    protected void rptPages_ItemCommand(object source, RepeaterCommandEventArgs e)
        {
            try
            {
                PageNumber = Convert.ToInt32(e.CommandArgument) - 1;
                LoadData();
            }
            catch { }
        }

Answer 3

As others have said, I don't think this is a good job for GridView. I'd take a look at ListView or Repeater as they are better suited for something like this and quite easy to add custom pagination to.

Answer 4

i used jQuery plugin jquery.tablePagination.0.1.js for my solution

refer this link