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

Question

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

Answer 1

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

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:

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

Answer 2

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