orga0063
/
BootstrapAdmin
4
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

feat: 分页栏增加自定义每页数据数量

This commit is contained in:
Argo Window10 2019-11-28 17:50:46 +08:00
parent 8bda9c416f
commit 9484a6e598
3 changed files with 70 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
src/admin/Bootstrap.Admin/Components/PaginationBase.cs
View File

@ -1,8 +1,6 @@
using Bootstrap.Admin.Extensions;
using Microsoft.AspNetCore.Components;
using Microsoft.AspNetCore.Components;
using Microsoft.JSInterop;
using System;
using System.Threading.Tasks;
namespace Bootstrap.Admin.Components
{
@ -18,7 +16,19 @@ namespace Bootstrap.Admin.Components
public int PageCount { get; set; } = 0;
/// <summary>
///
/// 获得/设置 每页显示数据数量
/// </summary>
[Parameter]
public int PageItems { get; set; } = 20;
/// <summary>
/// 获得/设置 数据总数
/// </summary>
[Parameter]
public int ItemsCount { get; set; } = 0;
/// <summary>
/// 获得/设置 当前页码
/// </summary>
[Parameter]
public int PageIndex { get; set; } = 1;
@ -32,14 +42,19 @@ namespace Bootstrap.Admin.Components
/// <summary>
///
/// </summary>
public Action<int>? ClickPageCallback { get; set; }
public Action<int> ClickPageCallback { get; set; } = new Action<int>(i => { });
/// <summary>
///
/// </summary>
public Action PageItemsChangeCallback { get; set; } = new Action(() => { });
/// <summary>
///
/// </summary>
protected void MovePrev()
{
if (PageIndex > 1) ClickPageCallback?.Invoke(PageIndex - 1);
if (PageIndex > 1) ClickPageCallback(PageIndex - 1);
}
/// <summary>
@ -47,7 +62,17 @@ namespace Bootstrap.Admin.Components
/// </summary>
protected void MoveNext()
{
if (PageIndex < PageCount) ClickPageCallback?.Invoke(PageIndex + 1);
if (PageIndex < PageCount) ClickPageCallback(PageIndex + 1);
}
/// <summary>
///
/// </summary>
/// <param name="pageItems"></param>
protected void ClickItem(int pageItems)
{
PageItems = pageItems;
PageItemsChangeCallback();
}
}
}

28
src/admin/Bootstrap.Admin/Pages/Admin/Dicts.razor
View File

@ -60,7 +60,7 @@
<td>@context.Define</td>
</RowTemplate>
</Table>
<Pagination @ref="Pagination" PageCount="PageCount" PageIndex="PageIndex"></Pagination>
<Pagination @ref="Pagination" PageCount="PageCount" PageIndex="PageIndex" ItemsCount="ItemsCount"></Pagination>
</div>
</div>
<div id="tableButtons" class="d-none">
@ -129,8 +129,6 @@
protected Select? DictCate { get; set; }
protected int PageItem { get; set; } = 20;
protected Pagination? Pagination { get; set; }
protected override void OnInitialized()
@ -140,14 +138,22 @@
protected override void OnAfterRender(bool firstRender)
{
if (firstRender && Pagination != null) Pagination.ClickPageCallback = pageIndex =>
if (firstRender && Pagination != null)
{
if (pageIndex != PageIndex)
Pagination.ClickPageCallback = pageIndex =>
{
Query(pageIndex);
if (pageIndex != PageIndex)
{
Query(pageIndex);
StateHasChanged();
}
};
Pagination.PageItemsChangeCallback = () =>
{
Query(1);
StateHasChanged();
}
};
};
}
}
protected void Query(int pageIndex)
@ -155,8 +161,10 @@
var data = DataAccess.DictHelper.RetrieveDicts();
if (!string.IsNullOrEmpty(DictCate?.SelectedItem?.Value)) data = data.Where(d => d.Define.ToString() == DictCate?.SelectedItem?.Value);
ItemsCount = data.Count();
Items = data.Skip((pageIndex - 1) * PageItem).Take(PageItem);
PageCount = (int)Math.Ceiling(data.Count() * 1.0d / PageItem);
var pageItems = Pagination?.PageItems ?? 20;
Items = data.Skip((pageIndex - 1) * pageItems).Take(pageItems);
PageCount = (int)Math.Ceiling(data.Count() * 1.0d / pageItems);
PageIndex = pageIndex;
}
}

29
src/admin/Bootstrap.Admin/Shared/Pagination.razor
View File

@ -1,18 +1,29 @@
@inherits PaginationBase
<nav class="d-flex align-items-center" aria-label="分页组件">
<div class="pagination-bar">显示第 1 到第 20 条记录，总共 264 条记录 每页显示 条记录</div>
<ul class="pagination">
<li class="page-item" @onclick="MovePrev"><div class="page-link" aria-label="上一页"><i class="fa fa-angle-double-left"></i></div></li>
<CascadingValue Value="this">
<CascadingValue Value="this">
<nav class="d-flex align-items-center" aria-label="分页组件">
<div class="pagination-bar">
显示第 <span>@((PageIndex - 1) * PageItems + 1)</span> 到第 <span>@(Math.Min(PageIndex * PageItems, ItemsCount))</span> 条记录，总共 <span>@ItemsCount</span> 条记录 每页显示
<div class="btn-group dropup">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">@PageItems</button>
<div class="dropdown-menu">
<div class="@(PageItems == 20 ? "dropdown-item active" : "dropdown-item")" @onclick="@(e => ClickItem(20))">20</div>
<div class="@(PageItems == 40 ? "dropdown-item active" : "dropdown-item")" @onclick="@(e => ClickItem(40))">40</div>
<div class="@(PageItems == 80 ? "dropdown-item active" : "dropdown-item")" @onclick="@(e => ClickItem(80))">80</div>
</div>
</div>
条记录
</div>
<ul class="@(PageCount == 1 ? "pagination d-none" : "pagination")">
<li class="page-item" @onclick="MovePrev"><div class="page-link" aria-label="上一页"><i class="fa fa-angle-double-left"></i></div></li>
@for (int i = 1; i <= PageCount; i++)
{
<PaginationItem Active="i == PageIndex" PageIndex="i"></PaginationItem>
}
</CascadingValue>
<li class="page-item" @onclick="MoveNext"><div class="page-link" aria-label="下一页"><i class="fa fa-angle-double-right"></i></div></li>
</ul>
</nav>
<li class="page-item" @onclick="MoveNext"><div class="page-link" aria-label="下一页"><i class="fa fa-angle-double-right"></i></div></li>
</ul>
</nav>
</CascadingValue>
@code {