원하는 페이저 스타일을 사용하는 Gridview 페이징의 사용자 지정 페이지 번호

Question

gridview에서 기능 페이지 표시 레코드를 부서 페이지 번호별로 구현합니다. 예 : 나는 학생이 있다는 점에서 20 개의 부서를 가지고 있으므로 부서 식별자 (예 : D1, D2, D3 ...)를 페이지 번호로 표시하고 해당 부서의 학생을 클릭하면 그리드에로드됩니다.

페이지 번호에서 "..."을 클릭하면 첨부 된 이미지와 같은 페이징을 원합니다. 다음 페이지 번호 집합으로 이동해야합니다.

asp.net gridview와 같은 페이징 구현을 위해 어떻게해야합니까?

Answer 1

"다음"및 "이전"단추를 사용하여 레코드를 페이징합니다. Label 컨트롤은 현재 위치를 페이지 된 GridView에 표시합니다. 먼저 변수 중 일부를 설정해 보겠습니다.

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

는 currentPageNumber의 GridView는 현재 페이지를 나타내고, PAGE_SIZE 각 페이지에 표시되는 레코드의 총 개수이다. 사용자가 DropDownList를 사용하여 페이지 크기를 조정하도록 허용 할 수도 있지만이 기사에서는 다루지 않습니다.

다음으로 GridView에 데이터 소스를 바인딩해야합니다. BindData 메서드를 전체적으로 살펴 보도록하고, 나중에 더 잘 이해할 수 있도록 해부합니다.

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; 
    } 
} 

이제, 더 자세히 위의 코드를 살펴 보자. 현재 페이지의 데이터를 얻을 수 있도록 currentPageNumber와 PAGE_SIZE를 데이터베이스에 보내고 있습니다. totalRows 변수는 테이블의 총 행 수를 반환합니다. 일단 totalRows가 있으면이 GridView에 사용될 총 페이지 수를 계산합니다. 총 페이지 수는 작은 도우미 함수를 사용하여 계산된다

BindData 방법의 끝에

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

    return totalPages; 
} 

, 다음 및 이전 버튼에만 적용 할 때 표시되도록 일부 조건 체크가있다. 단추]

남아있는 마지막 일에 이벤트를 부착

는 버튼 컨트롤에 이벤트를 연결하는 것입니다. 두 개의 Button 컨트롤을 만든 다음 코드를 확인하십시오.

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

의 버튼은 모두 아래에 표시되는 ChangePage 이벤트를 호출

ChangePage 이벤트는의 GridView의 페이지 번호를 변경하는 데 사용됩니다 또한 BindData를 호출하여 레이블 텍스트를 업데이트

// 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(); 
} 

방법.

Source