how to show paging number in numeric , just want to hide "previous ,next " buttons in paging

Mohammad Qasim 576 Reputation points
2021-03-12T13:25:37.63+00:00

Hi, Solution Required: How can I hide "previous", next" buttons on bootstrap pagai![77119-image.png][1]ng, Solution Required: I just want to show paging only in numbers that to right side [1]: /api/attachments/77119-image.png?platform=QnA

.NET
.NET
Microsoft Technologies based on the .NET software framework.
3,264 questions
ASP.NET
ASP.NET
A set of technologies in the .NET Framework for building web applications and XML web services.
3,222 questions
{count} votes

2 answers

Sort by: Most helpful
  1. Albert Kallal 4,566 Reputation points
    2021-03-22T20:59:55.517+00:00

    Well, ok, a typical data page looks like this:

    80421-image.png

    and the mark-up will have the button (first one) THEN the numeric pager, and then the next button.

    So you have this:

              <asp:DataPager ID = "DataPager1" runat="server" PagedControlID="ListView1" PageSize="12"  
                              OnPagePropertiesChanging="ListView1_PagePropertiesChanging"  
                              CssClass="pagenavi">  
                   <Fields>  
      
                       <asp:NextPreviousPagerField ButtonType = "Button" ButtonCssClass="pagenavi"  
                           ShowFirstPageButton="True" ShowNextPageButton="False" ShowPreviousPageButton="False" />  
                       <asp:NumericPagerField />  
                       <asp:NextPreviousPagerField ButtonType="Button" ButtonCssClass="pagenavi"  
                           ShowLastPageButton="True"   
                           ShowNextPageButton="False"   
                           ShowPreviousPageButton="False"/>  
      
                   </Fields>  
               </asp:DataPager>  
    

    so in above, we can either set the ShowFirstPageButton="True" to "false"

    Or, just outright REMOVE that button from the pager template.

    So, if we remove both buttons, then we have this:

                  <asp:DataPager ID = "DataPager1" runat="server" PagedControlID="ListView1" PageSize="12"  
                                  OnPagePropertiesChanging="ListView1_PagePropertiesChanging"  
                                  CssClass="pagenavi">  
                       <Fields>  
                           <asp:NumericPagerField />  
                       </Fields>  
                   </asp:DataPager>  
      
    

    So now in above we have no buttons but JUST the "NumericPagerField". The result is then this:

    80393-image.png

    so you can either set all of the display attributes = false, or as per above, just remove the template buttons and ONLY leave in the NumericPagerField, and you not have any buttons for the pager template.

    Regards,
    Albert D. Kallal (Access MVP 2003-2017)
    Edmonton, Alberta Canada


  2. Yijing Sun-MSFT 7,061 Reputation points
    2021-03-25T07:59:11.683+00:00

    Hi @Mohammad Qasim ,
    How do you write your codes? Could you post us? If you use bootstrap pagination only number,you could use just like this:

    <nav aria-label="Page navigation example">  
      <ul class="pagination">  
        <li class="page-item"><a class="page-link" href="#">1</a></li>  
        <li class="page-item"><a class="page-link" href="#">2</a></li>  
        <li class="page-item"><a class="page-link" href="#">3</a></li>  
      </ul>  
    </nav>  
    

    More details,you could refer to below article:
    https://getbootstrap.com/docs/4.0/components/pagination/


    If the answer is helpful, please click "Accept Answer" and upvote it.

    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.
    Best regards,
    Yijing Sun