angular - 带有分页、排序和过滤器的 Angular 7 表格
问题描述
嗨，有谁知道如何用分页、排序和角度过滤来制作表格。我正在使用 Creative Tim 的 Argon Dashboard for Angular，我很困惑如何将它集成到我的项目中
这是模板的文档点击我
这是表格的示例代码
<div class="table-responsive">
<table class="table align-items-center table-flush">
<thead class="thead-light">
<tr>
<th scope="col">Project</th>
<th scope="col">Budget</th>
<th scope="col">Status</th>
<th scope="col">Users</th>
<th scope="col">Completion</th>
<th scope="col"></th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">
<div class="media align-items-center">
<a href="#" class="avatar rounded-circle mr-3">
<img alt="Image placeholder" src="assets/img/theme/bootstrap.jpg">
</a>
<div class="media-body">
<span class="mb-0 text-sm">Argon Design System</span>
</div>
</div>
</th>
<td>
$2,500 USD
</td>
<td>
<span class="badge badge-dot mr-4">
<i class="bg-warning"></i> pending
</span>
</td>
<td>
<div class="avatar-group">
<a href="#" class="avatar avatar-sm" data-toggle="tooltip" data-original-title="Ryan Tompson">
<img alt="Image placeholder" src="assets/img/theme/team-1-800x800.jpg" class="rounded-circle">
</a>
<a href="#" class="avatar avatar-sm" data-toggle="tooltip" data-original-title="Romina Hadid">
<img alt="Image placeholder" src="assets/img/theme/team-2-800x800.jpg" class="rounded-circle">
</a>
<a href="#" class="avatar avatar-sm" data-toggle="tooltip" data-original-title="Alexander Smith">
<img alt="Image placeholder" src="assets/img/theme/team-3-800x800.jpg" class="rounded-circle">
</a>
<a href="#" class="avatar avatar-sm" data-toggle="tooltip" data-original-title="Jessica Doe">
<img alt="Image placeholder" src="assets/img/theme/team-4-800x800.jpg" class="rounded-circle">
</a>
</div>
</td>
<td>
<div class="d-flex align-items-center">
<span class="mr-2">60%</span>
<div>
<div class="progress">
<div class="progress-bar bg-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"></div>
</div>
</div>
</div>
</td>
<td class="text-right">
<div ngbDropdown placement="bottom-right">
<a class="btn btn-sm btn-icon-only text-light" ngbDropdownToggle>
<i class="fas fa-ellipsis-v"></i>
</a>
<div ngbDropdownMenu class=" dropdown-menu-right dropdown-menu-arrow">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
</td>
</tr>
<tr>
<th scope="row">
<div class="media align-items-center">
<a href="#" class="avatar rounded-circle mr-3">
<img alt="Image placeholder" src="assets/img/theme/angular.jpg">
</a>
<div class="media-body">
<span class="mb-0 text-sm">Angular Now UI Kit PRO</span>
</div>
</div>
</th>
<td>
$1,800 USD
</td>
<td>
<span class="badge badge-dot">
<i class="bg-success"></i> completed
</span>
</td>
<td>
<div class="avatar-group">
<a href="#" class="avatar avatar-sm" data-toggle="tooltip" data-original-title="Ryan Tompson">
<img alt="Image placeholder" src="assets/img/theme/team-1-800x800.jpg" class="rounded-circle">
</a>
<a href="#" class="avatar avatar-sm" data-toggle="tooltip" data-original-title="Romina Hadid">
<img alt="Image placeholder" src="assets/img/theme/team-2-800x800.jpg" class="rounded-circle">
</a>
<a href="#" class="avatar avatar-sm" data-toggle="tooltip" data-original-title="Alexander Smith">
<img alt="Image placeholder" src="assets/img/theme/team-3-800x800.jpg" class="rounded-circle">
</a>
<a href="#" class="avatar avatar-sm" data-toggle="tooltip" data-original-title="Jessica Doe">
<img alt="Image placeholder" src="assets/img/theme/team-4-800x800.jpg" class="rounded-circle">
</a>
</div>
</td>
<td>
<div class="d-flex align-items-center">
<span class="mr-2">100%</span>
<div>
<div class="progress">
<div class="progress-bar bg-success" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%;"></div>
</div>
</div>
</div>
</td>
<td class="text-right">
<div ngbDropdown placement="bottom-right">
<a class="btn btn-sm btn-icon-only text-light" ngbDropdownToggle>
<i class="fas fa-ellipsis-v"></i>
</a>
<div ngbDropdownMenu class=" dropdown-menu-right dropdown-menu-arrow">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
</td>
</tr>
<tr>
<th scope="row">
<div class="media align-items-center">
<a href="#" class="avatar rounded-circle mr-3">
<img alt="Image placeholder" src="assets/img/theme/sketch.jpg">
</a>
<div class="media-body">
<span class="mb-0 text-sm">Black Dashboard</span>
</div>
</div>
</th>
<td>
$3,150 USD
</td>
<td>
<span class="badge badge-dot mr-4">
<i class="bg-danger"></i> delayed
</span>
</td>
<td>
<div class="avatar-group">
<a href="#" class="avatar avatar-sm" data-toggle="tooltip" data-original-title="Ryan Tompson">
<img alt="Image placeholder" src="assets/img/theme/team-1-800x800.jpg" class="rounded-circle">
</a>
<a href="#" class="avatar avatar-sm" data-toggle="tooltip" data-original-title="Romina Hadid">
<img alt="Image placeholder" src="assets/img/theme/team-2-800x800.jpg" class="rounded-circle">
</a>
<a href="#" class="avatar avatar-sm" data-toggle="tooltip" data-original-title="Alexander Smith">
<img alt="Image placeholder" src="assets/img/theme/team-3-800x800.jpg" class="rounded-circle">
</a>
<a href="#" class="avatar avatar-sm" data-toggle="tooltip" data-original-title="Jessica Doe">
<img alt="Image placeholder" src="assets/img/theme/team-4-800x800.jpg" class="rounded-circle">
</a>
</div>
</td>
<td>
<div class="d-flex align-items-center">
<span class="mr-2">72%</span>
<div>
<div class="progress">
<div class="progress-bar bg-danger" role="progressbar" aria-valuenow="72" aria-valuemin="0" aria-valuemax="100" style="width: 72%;"></div>
</div>
</div>
</div>
</td>
<td class="text-right">
<div ngbDropdown placement="top-right">
<a class="btn btn-sm btn-icon-only text-light" ngbDropdownToggle>
<i class="fas fa-ellipsis-v"></i>
</a>
<div ngbDropdownMenu class=" dropdown-menu-right dropdown-menu-arrow">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
</td>
</tr>
<tr>
<th scope="row">
<div class="media align-items-center">
<a href="#" class="avatar rounded-circle mr-3">
<img alt="Image placeholder" src="assets/img/theme/react.jpg">
</a>
<div class="media-body">
<span class="mb-0 text-sm">React Material Dashboard</span>
</div>
</div>
</th>
<td>
$4,400 USD
</td>
<td>
<span class="badge badge-dot">
<i class="bg-info"></i> on schedule
</span>
</td>
<td>
<div class="avatar-group">
<a href="#" class="avatar avatar-sm" data-toggle="tooltip" data-original-title="Ryan Tompson">
<img alt="Image placeholder" src="assets/img/theme/team-1-800x800.jpg" class="rounded-circle">
</a>
<a href="#" class="avatar avatar-sm" data-toggle="tooltip" data-original-title="Romina Hadid">
<img alt="Image placeholder" src="assets/img/theme/team-2-800x800.jpg" class="rounded-circle">
</a>
<a href="#" class="avatar avatar-sm" data-toggle="tooltip" data-original-title="Alexander Smith">
<img alt="Image placeholder" src="assets/img/theme/team-3-800x800.jpg" class="rounded-circle">
</a>
<a href="#" class="avatar avatar-sm" data-toggle="tooltip" data-original-title="Jessica Doe">
<img alt="Image placeholder" src="assets/img/theme/team-4-800x800.jpg" class="rounded-circle">
</a>
</div>
</td>
<td>
<div class="d-flex align-items-center">
<span class="mr-2">90%</span>
<div>
<div class="progress">
<div class="progress-bar bg-info" role="progressbar" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100" style="width: 90%;"></div>
</div>
</div>
</div>
</td>
<td class="text-right">
<div ngbDropdown placement="top-right">
<a class="btn btn-sm btn-icon-only text-light" ngbDropdownToggle>
<i class="fas fa-ellipsis-v"></i>
</a>
<div ngbDropdownMenu class=" dropdown-menu-right dropdown-menu-arrow">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
</td>
</tr>
<tr>
<th scope="row">
<div class="media align-items-center">
<a href="#" class="avatar rounded-circle mr-3">
<img alt="Image placeholder" src="assets/img/theme/vue.jpg">
</a>
<div class="media-body">
<span class="mb-0 text-sm">Vue Paper UI Kit PRO</span>
</div>
</div>
</th>
<td>
$2,200 USD
</td>
<td>
<span class="badge badge-dot mr-4">
<i class="bg-success"></i> completed
</span>
</td>
<td>
<div class="avatar-group">
<a href="#" class="avatar avatar-sm" data-toggle="tooltip" data-original-title="Ryan Tompson">
<img alt="Image placeholder" src="assets/img/theme/team-1-800x800.jpg" class="rounded-circle">
</a>
<a href="#" class="avatar avatar-sm" data-toggle="tooltip" data-original-title="Romina Hadid">
<img alt="Image placeholder" src="assets/img/theme/team-2-800x800.jpg" class="rounded-circle">
</a>
<a href="#" class="avatar avatar-sm" data-toggle="tooltip" data-original-title="Alexander Smith">
<img alt="Image placeholder" src="assets/img/theme/team-3-800x800.jpg" class="rounded-circle">
</a>
<a href="#" class="avatar avatar-sm" data-toggle="tooltip" data-original-title="Jessica Doe">
<img alt="Image placeholder" src="assets/img/theme/team-4-800x800.jpg" class="rounded-circle">
</a>
</div>
</td>
<td>
<div class="d-flex align-items-center">
<span class="mr-2">100%</span>
<div>
<div class="progress">
<div class="progress-bar bg-success" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%;"></div>
</div>
</div>
</div>
</td>
<td class="text-right">
<div ngbDropdown placement="top-right">
<a class="btn btn-sm btn-icon-only text-light" ngbDropdownToggle>
<i class="fas fa-ellipsis-v"></i>
</a>
<div ngbDropdownMenu class=" dropdown-menu-right dropdown-menu-arrow">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
这是使用的分页示例代码
<nav aria-label="...">
<ul class="pagination pagination-sm">
<li class="page-item disabled">
<a class="page-link" href="#" tabindex="-1">1</a>
</li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item active"><a class="page-link" href="#">3</a></li>
</ul>
我不知道过滤器。我真的不知道如何开始我对此有点陌生。我来自 AngularJS 1.6.x
编辑：我想知道如果我整合了你的一些建议，我仍然可以使用模板中的表格设计
解决方案
您可以使用Angular-Datatable。集成非常简单。
HTML：
<table datatable >
</table
应用程序模块：
import { DataTablesModule } from 'angular-datatables';
imports: [
DataTablesModule
]
推荐阅读
- reactjs - 当我尝试更新时，输入字段取消选择
- azure-sql-database - Azure SQL 数据库或 SQL 数据仓库
- image - 我的 PNG IDAT 块有什么问题？
- r - purrr::possibly function 可能不适用于 map2_chr 函数
- c# - C# 查询的 Python 等效项
- ajax - 在codeigniter中删除没有页面刷新的记录不起作用
- mxgraph - 端点如何在 mxGraph 中作用于边？需要边在顶点的左侧中间高度连接
- php - 使用串联写属性名
- algorithm - 找到给定序列中不出现的最小正整数
- android - 在应用程序处于后台或应用程序未运行时来电时，不会调用广播接收器