question

MohammadQasim-1438 avatar image
0 Votes"
MohammadQasim-1438 asked YijingSun-MSFT commented

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

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]: /answers/storage/attachments/77119-image.png

dotnet-standarddotnet-aspnet-webforms
image.png (16.4 KiB)
· 6
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

Is any one can help me out on this ?

0 Votes 0 ·

Hi @MohammadQasim-1438 ,
According to your description, we need more information to analyze your problem.
What's the type of your application?
Could you provide some related code here? It will help us make a test.
We are waiting for your update.

0 Votes 0 ·

Like this

78151-image.png


0 Votes 0 ·
image.png (7.7 KiB)

Is any one can help on this ?

0 Votes 0 ·

Hi @MohammadQasim-1438 ,
Is your program WinForm? Could you provide the corresponding code to facilitate our testing?

0 Votes 0 ·

aspx ( web form )

0 Votes 0 ·
AlbertKallal-4360 avatar image
0 Votes"
AlbertKallal-4360 answered AlbertKallal-4360 edited

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




image.png (73.4 KiB)
image.png (70.8 KiB)
· 2
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

As I mentioned , using html table to apply bootstrap.

How can I apply paging css to keep it right ?

0 Votes 0 ·

Ok, so it looks like you were able to hide the buttons (by removing them). Ok, that's great!
To float the pager right? Just place a div around the table - one that grows to the table width.

Say like this:

  <div style="display:inline-block">

     your table inside here

     and now put our pageer in a div and float it right, say like this:

                 <div style="float:right">
                      your data pager inside here
                 </div>

   </div>  - div that surrounds table  + pager - "inline-block" will size that div to size of table


the result now is we can float the pager to the right. Without that outer div, then if you float the pager right - the pager will float on right side of the whole web page, but with the above div, we can float the div right to table size.

You get this:
81714-divright.png


0 Votes 0 ·
divright.png (24.8 KiB)
YijingSun-MSFT avatar image
0 Votes"
YijingSun-MSFT answered YijingSun-MSFT commented

Hi @MohammadQasim-1438 ,
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

· 3
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

yes , i am using bootstrap paging on html table.
How and where i place your html to apply on my table ?

0 Votes 0 ·

Take a look at my suggested answer. You can have any kind of table - just put a overall div around it, and then place both table and your pager inside of that div. You then simply put a div around the pager, and float it right. it will not matter if you using native asp.net controls, bootstrap, or react or anything else.

A simple div around the pager markup and floating it right should do the trick here.
R
Albert

0 Votes 0 ·
YijingSun-MSFT avatar image YijingSun-MSFT MohammadQasim-1438 ·

Hi @MohammadQasim-1438 ,
Do you have a look at the document I have gived?Does it like the sample?If you need this,could you post your codes to us?It will help us to solve your problems.
Best regards,
Yijing Sun

0 Votes 0 ·