performance and user experience improvements
This commit is contained in:
		| @ -3,6 +3,43 @@ | ||||
| @typeparam TableItem | ||||
|  | ||||
| <p> | ||||
|     @if (Toolbar == "Top") | ||||
|     { | ||||
|         <div class="mx-auto text-center"> | ||||
|             @if (_endPage > 1) | ||||
|             { | ||||
|                 <button class="btn btn-secondary mr-1" @onclick=@(async () => UpdateList(1))><span class="oi oi-media-step-backward" title="first" aria-hidden="true"></span></button> | ||||
|             } | ||||
|             @if (_page > _maxPages) | ||||
|             { | ||||
|                 <button class="btn btn-secondary mr-1" @onclick=@(async () => SetPagerSize("back"))><span class="oi oi-media-skip-backward" title="back" aria-hidden="true"></span></button> | ||||
|             } | ||||
|             @if (_endPage > 1) | ||||
|             { | ||||
|                 <button class="btn btn-secondary mr-1" @onclick=@(async () => NavigateToPage("previous"))><span class="oi oi-chevron-left" title="previous" aria-hidden="true"></span></button> | ||||
|                 @for (int i = _startPage; i <= _endPage; i++) | ||||
|                 { | ||||
|                     var pager = i; | ||||
|                     <button class="btn @((pager == _page) ? "btn-primary" : "btn-link")" @onclick=@(async () => UpdateList(pager))> | ||||
|                         @pager | ||||
|                     </button> | ||||
|                 } | ||||
|                 <button class="btn btn-secondary mr-1" @onclick=@(async () => NavigateToPage("next"))><span class="oi oi-chevron-right" title="next" aria-hidden="true"></span></button> | ||||
|             } | ||||
|             @if (_endPage < _pages) | ||||
|             { | ||||
|                 <button class="btn btn-secondary mr-1" @onclick=@(async () => SetPagerSize("forward"))><span class="oi oi-media-skip-forward" title="forward" aria-hidden="true"></span></button> | ||||
|             } | ||||
|             @if (_endPage > 1) | ||||
|             { | ||||
|                 <button class="btn btn-secondary mr-1" @onclick=@(async () => UpdateList(_pages))><span class="oi oi-media-step-forward" title="last" aria-hidden="true"></span></button> | ||||
|             } | ||||
|             @if (_endPage > 1) | ||||
|             { | ||||
|                 <span class="btn btn-link disabled">Page @_page of @_pages</span> | ||||
|             } | ||||
|         </div> | ||||
|     } | ||||
|     @if (Format == "Table") | ||||
|     { | ||||
|         <table class="@Class"> | ||||
| @ -35,32 +72,43 @@ | ||||
|             } | ||||
|         </div> | ||||
|     } | ||||
|     <div class="mx-auto text-center"> | ||||
|         @if (_page > _maxPages) | ||||
|         { | ||||
|             <button class="btn btn-secondary" @onclick=@(async () => SetPagerSize("back"))><span class="oi oi-media-skip-backward" title="back" aria-hidden="true"></span></button> | ||||
|         } | ||||
|         @if (_endPage > 1) | ||||
|         { | ||||
|             <button class="btn btn-secondary" @onclick=@(async () => NavigateToPage("previous"))><span class="oi oi-chevron-left" title="previous" aria-hidden="true"></span></button> | ||||
|             @for (int i = _startPage; i <= _endPage; i++) | ||||
|     @if (Toolbar == "Bottom") | ||||
|     { | ||||
|         <div class="mx-auto text-center"> | ||||
|             @if (_endPage > 1) | ||||
|             { | ||||
|                 var pager = i; | ||||
|                 <button class="btn @((pager == _page) ? "btn-primary" : "btn-link")" @onclick=@(async () => UpdateList(pager))> | ||||
|                     @pager | ||||
|                 </button> | ||||
|                 <button class="btn btn-secondary mr-1" @onclick=@(async () => UpdateList(1))><span class="oi oi-media-step-backward" title="first" aria-hidden="true"></span></button> | ||||
|             } | ||||
|             <button class="btn btn-secondary" @onclick=@(async () => NavigateToPage("next"))><span class="oi oi-chevron-right" title="next" aria-hidden="true"></span></button> | ||||
|         } | ||||
|         @if (_endPage < _pages) | ||||
|         { | ||||
|             <button class="btn btn-secondary" @onclick=@(async () => SetPagerSize("forward"))><span class="oi oi-media-skip-forward" title="forward" aria-hidden="true"></span></button> | ||||
|         } | ||||
|         @if (_endPage > 1) | ||||
|         { | ||||
|             <span class="btn btn-link disabled">Page @_page of @_pages</span> | ||||
|         } | ||||
|     </div> | ||||
|             @if (_page > _maxPages) | ||||
|             { | ||||
|                 <button class="btn btn-secondary mr-1" @onclick=@(async () => SetPagerSize("back"))><span class="oi oi-media-skip-backward" title="back" aria-hidden="true"></span></button> | ||||
|             } | ||||
|             @if (_endPage > 1) | ||||
|             { | ||||
|                 <button class="btn btn-secondary mr-1" @onclick=@(async () => NavigateToPage("previous"))><span class="oi oi-chevron-left" title="previous" aria-hidden="true"></span></button> | ||||
|                 @for (int i = _startPage; i <= _endPage; i++) | ||||
|                 { | ||||
|                     var pager = i; | ||||
|                     <button class="btn @((pager == _page) ? "btn-primary" : "btn-link")" @onclick=@(async () => UpdateList(pager))> | ||||
|                         @pager | ||||
|                     </button> | ||||
|                 } | ||||
|                 <button class="btn btn-secondary mr-1" @onclick=@(async () => NavigateToPage("next"))><span class="oi oi-chevron-right" title="next" aria-hidden="true"></span></button> | ||||
|             } | ||||
|             @if (_endPage < _pages) | ||||
|             { | ||||
|                 <button class="btn btn-secondary mr-1" @onclick=@(async () => SetPagerSize("forward"))><span class="oi oi-media-skip-forward" title="forward" aria-hidden="true"></span></button> | ||||
|             } | ||||
|             @if (_endPage > 1) | ||||
|             { | ||||
|                 <button class="btn btn-secondary mr-1" @onclick=@(async () => UpdateList(_pages))><span class="oi oi-media-step-forward" title="last" aria-hidden="true"></span></button> | ||||
|             } | ||||
|             @if (_endPage > 1) | ||||
|             { | ||||
|                 <span class="btn btn-link disabled">Page @_page of @_pages</span> | ||||
|             } | ||||
|         </div> | ||||
|     } | ||||
| </p> | ||||
|  | ||||
| @code { | ||||
| @ -74,6 +122,9 @@ | ||||
|     [Parameter] | ||||
|     public string Format { get; set; } | ||||
|  | ||||
|     [Parameter] | ||||
|     public string Toolbar { get; set; } | ||||
|  | ||||
|     [Parameter] | ||||
|     public RenderFragment Header { get; set; } | ||||
|  | ||||
| @ -104,6 +155,11 @@ | ||||
|             Format = "Table"; | ||||
|         } | ||||
|  | ||||
|         if (string.IsNullOrEmpty(Toolbar)) | ||||
|         { | ||||
|             Toolbar = "Top"; | ||||
|         } | ||||
|  | ||||
|         if (string.IsNullOrEmpty(Class)) | ||||
|         { | ||||
|             if (Format == "Table") | ||||
|  | ||||
		Reference in New Issue
	
	Block a user
	 Shaun Walker
					Shaun Walker