AngularJS UI Bootstrap终极指南：3步实现表格分页+排序+筛选

AngularJS UI Bootstrap终极指南：3步实现表格分页+排序+筛选

【免费下载链接】bootstrapPLEASE READ THE PROJECT STATUS BELOW. Native AngularJS (Angular) directives for Bootstrap. Smaller footprint (20kB gzipped), no 3rd party JS dependencies (jQuery, bootstrap JS) required. Please read the README.md file before submitting an issue!项目地址: https://gitcode.com/gh_mirrors/boot/bootstrap

GitHub 加速计划 / boot / bootstrap 是一套原生 AngularJS 指令集，专为 Bootstrap 设计，无需依赖 jQuery 和 Bootstrap JS，压缩后仅 20kB，让 Angular 开发更轻量高效。本文将带你通过简单三步，利用该项目轻松实现表格的分页、排序和筛选功能，提升数据展示体验。

1️⃣ 快速集成：5分钟搭建基础环境

要使用 AngularJS UI Bootstrap 的表格功能，首先需要完成项目的引入和配置。通过以下步骤快速上手：

安装与引入

通过 git clone 命令获取项目源码：

git clone https://gitcode.com/gh_mirrors/boot/bootstrap

在 AngularJS 项目中引入核心模块，分页功能主要依赖pagination组件，对应的源码路径为 src/pagination/pagination.js。在应用模块中注入依赖：

angular.module('myApp', ['ui.bootstrap.pagination']);

基础表格结构

在 HTML 模板中创建表格骨架，为后续功能实现奠定基础：

<table class="table table-striped"> <thead> <tr> <th>ID</th> <th>名称</th> <th>状态</th> </tr> </thead> <tbody> <tr ng-repeat="item in displayedItems"> <td>{{item.id}}</td> <td>{{item.name}}</td> <td>{{item.status}}</td> </tr> </tbody> </table>

2️⃣ 核心功能实现：分页+排序+筛选一步到位

分页功能：轻松控制数据展示数量

利用项目提供的uib-pagination指令，快速实现分页控件。该指令的模板定义在 template/pagination/pagination.html，支持多种配置参数：

<!-- 基础分页控件 --> <ul uib-pagination total-items="totalItems" ng-model="currentPage" max-size="5" class="pagination-sm" boundary-links="true"> </ul>

在控制器中添加分页逻辑：

$scope.totalItems = 100; // 总数据量 $scope.currentPage = 1; // 当前页码 $scope.itemsPerPage = 10; // 每页显示数量 // 计算当前页数据 $scope.$watch('currentPage', function() { var startIndex = ($scope.currentPage - 1) * $scope.itemsPerPage; $scope.displayedItems = $scope.allItems.slice(startIndex, startIndex + $scope.itemsPerPage); });

排序功能：点击表头实现数据排序

结合 AngularJS 的orderBy过滤器实现排序功能，虽然项目中未直接提供排序指令，但可通过原生过滤器轻松实现：

<!-- 可点击排序的表头 --> <th ng-click="sortField = 'name'; reverseSort = !reverseSort"> 名称 <span ng-if="sortField === 'name'">{{reverseSort ? '↑' : '↓'}}</span> </th>

控制器中添加排序逻辑：

$scope.sortField = 'id'; // 默认排序字段 $scope.reverseSort = false; // 默认升序 // 应用排序 $scope.sortedItems = $filter('orderBy')($scope.allItems, $scope.sortField, $scope.reverseSort);

筛选功能：实时搜索表格数据

使用 AngularJS 的filter过滤器实现实时筛选，参考 src/typeahead/docs/demo.html 中的筛选模式：

<!-- 筛选输入框 --> <input type="text" ng-model="searchText" placeholder="搜索名称或状态..." class="form-control"> <!-- 应用筛选 --> <tr ng-repeat="item in displayedItems | filter:searchText"> <!-- 表格内容 --> </tr>

3️⃣ 高级配置：打造个性化表格体验

分页控件样式定制

通过修改 CSS 类来自定义分页控件外观，项目文档中提到的样式修复方案位于 misc/demo/index.html：

/* 修复空 href 导致的样式问题 */ .nav, .pagination, .carousel, .panel-title a { cursor: pointer; }

性能优化：大数据集处理

当处理大量数据时，建议结合limitTo过滤器和分页功能，减少 DOM 渲染压力：

<tr ng-repeat="item in sortedItems | filter:searchText | limitTo:itemsPerPage:(currentPage-1)*itemsPerPage"> <!-- 表格内容 --> </tr>

完整示例代码

完整的表格功能实现可参考以下文件路径：

• 分页演示：src/pagination/docs/demo.html
• 筛选演示：src/typeahead/docs/demo.html

通过以上三步，你已经掌握了使用 AngularJS UI Bootstrap 实现表格分页、排序和筛选的核心方法。该项目轻量高效的特性，让你无需引入额外依赖即可构建功能丰富的数据表格，提升 AngularJS 应用的用户体验。赶快尝试将这些功能集成到你的项目中吧！

【免费下载链接】bootstrapPLEASE READ THE PROJECT STATUS BELOW. Native AngularJS (Angular) directives for Bootstrap. Smaller footprint (20kB gzipped), no 3rd party JS dependencies (jQuery, bootstrap JS) required. Please read the README.md file before submitting an issue!项目地址: https://gitcode.com/gh_mirrors/boot/bootstrap