文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
首页
学习
活动
专区
圈层
工具
MCP广场
返回腾讯云官网
社区首页 >问答首页 >具有分页、排序和筛选功能的Angular 7表

问具有分页、排序和筛选功能的Angular 7表
EN

Stack Overflow用户
提问于 2019-05-28 15:40:19
回答 4查看 388关注 0票数 0

大家好，有谁知道如何在angular中创建具有分页、排序和过滤功能的表格？我正在使用Creative Tim的Argon Dashboard for Angular，我对如何将其集成到我的项目中感到困惑

下面是模板click me的文档

下面是该表的示例代码

代码语言：javascript
运行
复制
<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>

下面是所使用的分页的示例代码

代码语言：javascript
运行
复制
<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

编辑:我想知道如果我整合了你的一些建议，我仍然可以使用模板中的表格设计

datatable
pagination
tablesorter
angular
filter
EN

回答 4

Stack Overflow用户

发布于 2019-05-28 15:44:14

您可以使用Angular-Datatable。集成起来非常简单。

HTML：

代码语言：javascript
运行
复制
<table datatable >
</table

app.module：

import { DataTablesModule } from 'angular-datatables';

代码语言：javascript
运行
复制
  imports: [
    DataTablesModule
  ]
票数 0
EN

Stack Overflow用户

发布于 2019-05-28 15:45:24

如果您在使用上没有限制，我建议您也许可以看看angular材料，特别是集成了过滤、分页等功能的表格组件。

https://material.angular.io/components/table/overview

总的来说，使用起来非常简单。

票数 0
EN

Stack Overflow用户

发布于 2019-05-28 15:48:04

另一个很好的免费库是PrimeNG，它包含数据表和更多内容。

它很容易集成，并且有许多控件。基本的设计是免费的，如果你想要，完全成熟的设计是付费的。

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/56337247

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2025 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号 | 京公网安备号11010802020287

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档