AngularJS UI Bootstrap响应式表格组件：排序、筛选与分页-优快云博客

AngularJS UI Bootstrap响应式表格组件：排序、筛选与分页

【免费下载链接】bootstrap angular-ui/bootstrap: AngularJS UI Bootstrap是Bootstrap组件的一个AngularJS版本实现，它将Twitter Bootstrap的CSS样式和组件转化为AngularJS指令，便于在AngularJS应用中进行更自然、易于管理的UI开发。项目地址: https://gitcode.com/gh_mirrors/boot/bootstrap

在现代Web应用开发中，数据展示往往需要处理大量信息，而表格是最常用的数据展示方式之一。AngularJS UI Bootstrap提供了一系列强大的指令，帮助开发者轻松实现表格的排序、筛选和分页功能，提升用户体验和数据管理效率。本文将详细介绍如何结合AngularJS UI Bootstrap的分页、筛选和排序功能，构建一个功能完善的响应式表格组件。

组件概述

AngularJS UI Bootstrap是Bootstrap组件的AngularJS版本实现，它将Twitter Bootstrap的CSS样式和组件转化为AngularJS指令，便于在AngularJS应用中进行更自然、易于管理的UI开发。在表格数据处理方面，主要涉及以下核心组件：

分页组件（Pagination）：src/pagination/pagination.js 提供了分页导航功能，支持自定义页码显示、边界链接等特性。
筛选功能：通过AngularJS内置的filter过滤器实现数据筛选，如src/typeahead/docs/demo.html中展示的示例。
排序功能：结合AngularJS的orderBy过滤器实现表格列排序。

这些组件可以无缝集成，共同构建一个功能强大的响应式表格。

分页组件详解

分页组件是处理大量表格数据的基础，它允许用户分批次查看数据，减少页面加载时间和数据处理压力。AngularJS UI Bootstrap的分页组件通过uib-pagination指令实现，提供了丰富的配置选项和灵活的使用方式。

基本用法

分页组件的基本用法非常简单，只需在HTML中添加uib-pagination指令，并绑定必要的属性：

<ul uib-pagination total-items="totalItems" ng-model="currentPage" ng-change="pageChanged()"></ul>

在控制器中，需要定义相关的作用域变量：

$scope.totalItems = 100;  // 总数据条数
$scope.currentPage = 1;   // 当前页码
$scope.pageChanged = function() {
  // 页码变化时的回调函数
  console.log('Page changed to: ' + $scope.currentPage);
};

高级配置

分页组件提供了多种高级配置选项，以满足不同的需求。以下是一些常用的配置示例：

小型分页样式：

<ul uib-pagination boundary-links="true" total-items="totalItems" ng-model="currentPage" class="pagination-sm" previous-text="&lsaquo;" next-text="&rsaquo;" first-text="&laquo;" last-text="&raquo;"></ul>

限制可见页码数量：

<ul uib-pagination total-items="bigTotalItems" ng-model="bigCurrentPage" max-size="maxSize" class="pagination-sm" boundary-links="true" force-ellipses="true"></ul>

其中，max-size属性限制了可见页码的数量，force-ellipses属性用于在页码过多时显示省略号。

配置参数详解

分页组件提供了丰富的配置参数，以下是一些常用参数的说明：

参数名	类型	默认值	描述
`total-items`	数字	-	总数据条数，必填
`ng-model`	数字	-	当前页码，必填
`max-size`	数字	null	限制可见页码数量
`boundary-links`	布尔值	false	是否显示首页和末页链接
`direction-links`	布尔值	true	是否显示上一页和下一页链接
`force-ellipses`	布尔值	false	是否强制显示省略号
`rotate`	布尔值	true	是否将当前页保持在可见页码中间

更多配置参数可以参考官方文档：src/pagination/docs/readme.md

筛选功能实现

筛选功能允许用户根据关键词快速查找表格中的数据。在AngularJS中，可以使用内置的filter过滤器结合输入框实现简单高效的筛选功能。

基本筛选

以下是一个基本的表格筛选示例：

<input type="text" ng-model="searchText" placeholder="搜索...">
<table class="table">
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>邮箱</th>
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat="person in persons | filter:searchText">
      <td>{{person.name}}</td>
      <td>{{person.age}}</td>
      <td>{{person.email}}</td>
    </tr>
  </tbody>
</table>

在控制器中，定义persons数组和searchText模型：

$scope.persons = [
  {name: '张三', age: 25, email: 'zhangsan@example.com'},
  {name: '李四', age: 30, email: 'lisi@example.com'},
  {name: '王五', age: 35, email: 'wangwu@example.com'}
];
$scope.searchText = '';

高级筛选

对于更复杂的筛选需求，可以自定义筛选函数：

<input type="text" ng-model="searchText" placeholder="搜索姓名或邮箱...">
<table class="table">
  <tbody>
    <tr ng-repeat="person in persons | filter:customFilter">
      <td>{{person.name}}</td>
      <td>{{person.age}}</td>
      <td>{{person.email}}</td>
    </tr>
  </tbody>
</table>

在控制器中定义customFilter函数：

$scope.customFilter = function(person) {
  if (!$scope.searchText) return true;
  var search = $scope.searchText.toLowerCase();
  return person.name.toLowerCase().indexOf(search) !== -1 || 
         person.email.toLowerCase().indexOf(search) !== -1;
};

这种方式可以实现更灵活的筛选逻辑，例如多字段组合筛选、模糊匹配等。

排序功能实现

排序功能允许用户根据表格列对数据进行升序或降序排列。AngularJS提供了orderBy过滤器，可以轻松实现这一功能。

基本排序

以下是一个基本的表格排序示例：

<table class="table">
  <thead>
    <tr>
      <th ng-click="sortBy('name')">姓名 <span ng-if="sortKey === 'name'">{{sortReverse ? '↑' : '↓'}}</span></th>
      <th ng-click="sortBy('age')">年龄 <span ng-if="sortKey === 'age'">{{sortReverse ? '↑' : '↓'}}</span></th>
      <th ng-click="sortBy('email')">邮箱 <span ng-if="sortKey === 'email'">{{sortReverse ? '↑' : '↓'}}</span></th>
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat="person in persons | orderBy:sortKey:sortReverse">
      <td>{{person.name}}</td>
      <td>{{person.age}}</td>
      <td>{{person.email}}</td>
    </tr>
  </tbody>
</table>

在控制器中定义排序相关的模型和函数：

$scope.sortKey = 'name'; // 默认排序字段
$scope.sortReverse = false; // 默认排序方式（升序）

$scope.sortBy = function(key) {
  $scope.sortKey = key;
  $scope.sortReverse = !$scope.sortReverse;
};

结合筛选的排序

排序功能可以与筛选功能结合使用，先筛选后排序，提供更强大的数据处理能力：

<input type="text" ng-model="searchText" placeholder="搜索...">
<table class="table">
  <thead>
    <tr>
      <th ng-click="sortBy('name')">姓名 <span ng-if="sortKey === 'name'">{{sortReverse ? '↑' : '↓'}}</span></th>
      <th ng-click="sortBy('age')">年龄 <span ng-if="sortKey === 'age'">{{sortReverse ? '↑' : '↓'}}</span></th>
      <th ng-click="sortBy('email')">邮箱 <span ng-if="sortKey === 'email'">{{sortReverse ? '↑' : '↓'}}</span></th>
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat="person in persons | filter:searchText | orderBy:sortKey:sortReverse">
      <td>{{person.name}}</td>
      <td>{{person.age}}</td>
      <td>{{person.email}}</td>
    </tr>
  </tbody>
</table>

综合示例：响应式表格

下面我们将分页、筛选和排序功能结合起来，创建一个完整的响应式表格示例。

HTML结构

<div class="container">
  <div class="row">
    <div class="col-md-4">
      <input type="text" ng-model="searchText" class="form-control" placeholder="搜索...">
    </div>
  </div>
  
  <table class="table table-striped">
    <thead>
      <tr>
        <th ng-click="sortBy('id')">ID <span ng-if="sortKey === 'id'">{{sortReverse ? '↑' : '↓'}}</span></th>
        <th ng-click="sortBy('name')">姓名 <span ng-if="sortKey === 'name'">{{sortReverse ? '↑' : '↓'}}</span></th>
        <th ng-click="sortBy('position')">职位 <span ng-if="sortKey === 'position'">{{sortReverse ? '↑' : '↓'}}</span></th>
        <th ng-click="sortBy('salary')">薪资 <span ng-if="sortKey === 'salary'">{{sortReverse ? '↑' : '↓'}}</span></th>
      </tr>
    </thead>
    <tbody>
      <tr ng-repeat="employee in filteredEmployees = (employees | filter:searchText | orderBy:sortKey:sortReverse | startFrom:(currentPage-1)*itemsPerPage | limitTo:itemsPerPage)">
        <td>{{employee.id}}</td>
        <td>{{employee.name}}</td>
        <td>{{employee.position}}</td>
        <td>{{employee.salary | currency}}</td>
      </tr>
    </tbody>
  </table>
  
  <div class="text-center">
    <ul uib-pagination total-items="filteredEmployees.length" ng-model="currentPage" items-per-page="itemsPerPage" max-size="5" boundary-links="true" class="pagination-sm" previous-text="上一页" next-text="下一页" first-text="首页" last-text="末页"></ul>
  </div>
  
  <div class="text-center">
    显示 {{filteredEmployees.length > 0 ? (currentPage-1)*itemsPerPage + 1 : 0}} 到 {{Math.min(currentPage*itemsPerPage, filteredEmployees.length)}} 条，共 {{filteredEmployees.length}} 条记录
  </div>
</div>

控制器代码

angular.module('tableDemoApp', ['ui.bootstrap'])
.controller('TableDemoCtrl', ['$scope', function($scope) {
  // 模拟员工数据
  $scope.employees = [
    {id: 1, name: '张三', position: '前端开发工程师', salary: 15000},
    {id: 2, name: '李四', position: '后端开发工程师', salary: 18000},
    {id: 3, name: '王五', position: '产品经理', salary: 20000},
    // ... 更多数据
  ];
  
  // 分页配置
  $scope.currentPage = 1;
  $scope.itemsPerPage = 10;
  
  // 排序配置
  $scope.sortKey = 'id';
  $scope.sortReverse = false;
  
  $scope.sortBy = function(key) {
    $scope.sortKey = key;
    $scope.sortReverse = !$scope.sortReverse;
  };
}])
// 自定义分页过滤器
.filter('startFrom', function() {
  return function(input, start) {
    start = +start; // 转换为数字
    return input.slice(start);
  };
});

代码解析

在这个综合示例中，我们实现了以下功能：

筛选功能：使用filter:searchText实现基于输入框的实时筛选。
排序功能：使用orderBy:sortKey:sortReverse实现基于列标题点击的排序。
分页功能：结合startFrom自定义过滤器和uib-pagination指令实现分页。

需要注意的是，AngularJS本身没有startFrom过滤器，我们需要自定义一个，用于从指定索引开始显示数据。

样式优化与响应式设计

为了使表格在不同设备上都能良好显示，我们可以结合Bootstrap的响应式类和一些自定义样式进行优化。

响应式表格

使用Bootstrap的.table-responsive类可以使表格在小屏幕设备上水平滚动，避免内容溢出：

<div class="table-responsive">
  <table class="table table-striped">
    <!-- 表格内容 -->
  </table>
</div>

自定义样式

可以添加以下自定义CSS来优化表格的视觉效果：

/* 表头点击样式 */
th[ng-click] {
  cursor: pointer;
  user-select: none;
}

th[ng-click]:hover {
  background-color: #f5f5f5;
}

/* 排序指示样式优化 */
th .sort-indicator {
  margin-left: 5px;
  color: #999;
}

/* 分页控件样式 */
.pagination {
  margin-top: 20px;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .table th, .table td {
    padding: 8px 5px;
  }
  
  .pagination {
    font-size: 12px;
  }
}

常见问题与解决方案

在使用AngularJS UI Bootstrap表格组件时，可能会遇到一些常见问题，以下是一些解决方案：

性能优化

当处理大量数据时，表格渲染可能会变慢。可以通过以下方式优化性能：

使用track by：在ng-repeat中添加track by $index可以提高渲染性能：

<tr ng-repeat="item in items | filter:search | orderBy:sortKey:sortReverse track by $index">

限制每页数据量：合理设置itemsPerPage，避免一页显示过多数据。

分页与筛选的冲突

当使用筛选功能后，分页控件应基于筛选后的数据重新计算页码。在综合示例中，我们通过filteredEmployees = (employees | filter:searchText ...)的方式解决了这个问题，使分页控件基于筛选后的结果进行计算。

国际化

如果需要支持多语言，可以通过自定义分页控件的文本实现：

<ul uib-pagination 
    total-items="totalItems" 
    ng-model="currentPage" 
    first-text="首页" 
    previous-text="上一页" 
    next-text="下一页" 
    last-text="末页">
</ul>

总结与展望

AngularJS UI Bootstrap提供的分页、筛选和排序功能可以帮助开发者快速构建功能完善的响应式表格组件。通过本文介绍的方法，你可以轻松实现数据的高效展示和管理，提升用户体验。

未来，随着Web技术的发展，表格组件可能会向更智能化、可视化的方向发展，例如集成图表、数据导出、行内编辑等功能。AngularJS UI Bootstrap作为一个成熟的UI组件库，也将持续更新以适应新的需求。

希望本文对你理解和使用AngularJS UI Bootstrap的表格相关组件有所帮助。如果你有任何问题或建议，欢迎在评论区留言讨论。

官方文档：README.md 组件源码：src/pagination/ 示例代码：src/pagination/docs/demo.html

创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考