How to show buttons previous and next buttons when display pagination gridview ?

Question

I work on asp.net web forms . I face issue I can't display previous and next button with Numeric page number .

current status display page number numeric mode only as 1,2,3,4 etc.

but I can't display previous and next with page numbers

so How to make that ?

previous button will get previous page of current

Next Button will get next page of current .

<asp:GridView ID="GridViewSearchData" runat="server" AutoGenerateColumns="false" DataKeyNames="ID" CssClass="table"  HeaderStyle-BackColor="#172b4d" HeaderStyle-CssClass="header"   AllowPaging="true" OnPageIndexChanging="grdData_PageIndexChanging" PageSize="5" OnDataBound="OnDataBound">                                                                                                                    
    <Columns> 
    <asp:BoundField DataField="BranchCode" HeaderText="BranchCode" HeaderStyle-ForeColor="White" />
    <asp:BoundField DataField="Status"  HeaderText="Status" HeaderStyle-ForeColor="White"  />
    <asp:BoundField DataField="OrderNo" HeaderText="OrderNo" ItemStyle-Width="120px" HeaderStyle-ForeColor="White"  />
    <asp:BoundField DataField="OrderType" HeaderText="OrderType" HeaderStyle-ForeColor="White"  />
    <asp:BoundField DataField="Printer_name" HeaderText="Printer_name" HeaderStyle-ForeColor="White"  />
    <asp:BoundField DataField="EntredDatetime" HeaderText="EntredDatetime" HeaderStyle-ForeColor="White"  />                            
    </Columns>
</asp:GridView>

protected void Search_Click(object sender, EventArgs e)
        {
             DataTable dt;

            dt = busiObj.DisplayAllSearchData(dropBranches.SelectedItem.Value/*, datelogged, dropOrderType.SelectedItem.Value, eventDatefromtime, eventDatetotime*/);
            if (dt.Rows.Count > 0)
            {
               
                GridViewSearchData.DataSource = dt;
                GridViewSearchData.DataBind();
                GridViewSearchData.HeaderRow.Height = 10;
                

            }
            
        }

my expected result add previous and next button for pagination with page number numeric

so I need to add Next and previous button by jQuery or CSS or server side any way can achieve my result .

Answer 1

Hi @Ahmed Salah Abed Elaziz,

You can attach ChangePage event to both Button , then get current page, and do calculations to get previous and next page.

<asp:Button ID="Btn_Previous" CommandName="Previous"
                runat="server" OnCommand="ChangePage"
                Text="Previous" />
            <asp:Button ID="Btn_Next" runat="server" CommandName="Next"
                OnCommand="ChangePage" Text="Next" />

protected void ChangePage(object sender, CommandEventArgs e)
        {
            
            int pageNumber = gvCustomers.PageIndex;
            switch (e.CommandName)
            {
                case "Previous":
                    if (pageNumber > 0)
                    {
                        gvCustomers.PageIndex = pageNumber - 1;
                    }
                        break;

                    case "Next":
                        gvCustomers.PageIndex = pageNumber + 1;
                        break;
                }

                this.BindGrid();         
        }

You can refer to the following demo:

 <div>
            <asp:GridView ID="gvCustomers" runat="server" AutoGenerateColumns="false" AllowPaging="true" OnPageIndexChanging="gvCustomers_OnPageIndexChanging"
                PageSize="5">
                <Columns>
                    <asp:BoundField DataField="StudentId" HeaderText="StudentId" />
                    <asp:BoundField DataField="StudentName" HeaderText="StudentName" />
                    <asp:BoundField DataField="Age" HeaderText="Age" />
                </Columns>
            </asp:GridView>
            <asp:Button ID="Btn_Previous" CommandName="Previous"
                runat="server" OnCommand="ChangePage"
                Text="Previous" />
            <asp:Button ID="Btn_Next" runat="server" CommandName="Next"
                OnCommand="ChangePage" Text="Next" />
        </div>

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

        private void BindGrid()
        {
            string constr = ConfigurationManager.ConnectionStrings["DBCS"].ConnectionString;
            using (SqlConnection con = new SqlConnection(constr))
            {
                using (SqlCommand cmd = new SqlCommand("SELECT * FROM Student", con))
                {                   
                    using (SqlDataAdapter da = new SqlDataAdapter(cmd))
                    {
                        DataTable dt = new DataTable();
                        da.Fill(dt);
                        gvCustomers.DataSource = dt;
                        gvCustomers.DataBind();
                    }
                }
            }
        }

        protected void gvCustomers_OnPageIndexChanging(object sender, GridViewPageEventArgs e)
        {
            this.gvCustomers.PageIndex = e.NewPageIndex;
            this.BindGrid();
        }                     
        protected void ChangePage(object sender, CommandEventArgs e)
        {
            
            int pageNumber = gvCustomers.PageIndex;
            switch (e.CommandName)
            {
                case "Previous":
                    if (pageNumber > 0)
                    {
                        gvCustomers.PageIndex = pageNumber - 1;
                    }
                        break;

                    case "Next":
                        gvCustomers.PageIndex = pageNumber + 1;
                        break;
                }

                this.BindGrid();         
        }

Best regards,
Lan Huang

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Answer 2

Can the following document help?

PagerSetting Modes in ASP.NET GridView Control