Custom Page numbers for Gridview paging with desired pager style

Question

I am implementing a functionality display records in gridview not as per default page numbers but as per the department numbers. e.g. I have 20 departments within that there are students so I want to show department Identifier i.e. D1,D2,D3... as a page numbers and clicking on that students in that department would be loaded in grid.

I want paging like the attached image, on clicking "..." in page numbers it should take me to next set of page numbers.

How should I go for implementation of such a paging for asp.net gridview?

Answer 1

It will be paging through the records using the “Next” and the “Previous” buttons. The Label control will display our current location in the paged GridView. Let’s first set up some of the variables.

protected int currentPageNumber = 1;
private const int PAGE_SIZE = 10;

The currentPageNumber represents the current page of the GridView, and the PAGE_SIZE is the total number of records displayed on each page. You can also allow the user to adjust the page size using a DropDownList, but that is not covered in this article.

Next, we need to bind the data source to the GridView. Let’s check out the BindData method as a whole, and later I will dissect it so you will have a better idea.

private void BindData()
{
    string connectionString = "Server=localhost;" + 
           "Database=Northwind;Trusted_Connection=true";
    SqlConnection myConnection = new SqlConnection(connectionString);
    SqlCommand myCommand = new SqlCommand("usp_GetProducts", 
                                           myConnection);
    myCommand.CommandType = CommandType.StoredProcedure;

    myCommand.Parameters.AddWithValue("@startRowIndex", 
                                      currentPageNumber);
    myCommand.Parameters.AddWithValue("@maximumRows", PAGE_SIZE);
    myCommand.Parameters.Add("@totalRows", SqlDbType.Int, 4);
    myCommand.Parameters["@totalRows"].Direction = 
                       ParameterDirection.Output;

    SqlDataAdapter ad = new SqlDataAdapter(myCommand);

    DataSet ds = new DataSet();
    ad.Fill(ds);

    gvProducts.DataSource = ds;
    gvProducts.DataBind();

    // get the total rows 
    double totalRows = (int)myCommand.Parameters["@totalRows"].Value;

    lblTotalPages.Text = CalculateTotalPages(totalRows).ToString();

    lblCurrentPage.Text = currentPageNumber.ToString(); 

    if (currentPageNumber == 1)
    {
        Btn_Previous.Enabled = false;

        if (Int32.Parse(lblTotalPages.Text) > 0)
        {
            Btn_Next.Enabled = true;
        }
        else
            Btn_Next.Enabled = false;

    }

    else
    {
        Btn_Previous.Enabled = true;

        if (currentPageNumber == Int32.Parse(lblTotalPages.Text))
            Btn_Next.Enabled = false;
        else Btn_Next.Enabled = true; 
    }
}

Now, let’s take a look at the above code in more detail. I am sending the currentPageNumber and the PAGE_SIZE into the database so I can get the data for the current page. The totalRows variable returns the total number of rows in the table. Once I have totalRows, I calculate the total number of pages that will be used for this GridView. The total number of pages is calculated by using a small helper function:

private int CalculateTotalPages(double totalRows)
{
    int totalPages = (int)  Math.Ceiling(totalRows / PAGE_SIZE);

    return totalPages; 
}

At the end of the BindData method, there are some conditional checks which ensure that the Next and Previous buttons are only displayed when applicable.

Attaching the Events to the Buttons

The final thing that is left is to attach the events to the Button controls. Check out the following code in which I created two Button controls.

<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" />

Both the buttons call the ChangePage event which is shown below:

// This method will handle the navigation/ paging index
protected void ChangePage(object sender, CommandEventArgs e)
{

    switch (e.CommandName)
    {
        case "Previous":
            currentPageNumber = Int32.Parse(lblCurrentPage.Text) - 1;
            break; 

        case "Next":
            currentPageNumber = Int32.Parse(lblCurrentPage.Text) + 1; 
            break; 
    }

    BindData();
}

The ChangePage event is used to change the page number of the GridView and also to update the Label text by calling the BindData method.

Source