7、构建高效搜索与动态 UI：从 Bootstrap 分页到 Angular 集成

DLC#

于 2025-11-27 12:16:14 发布

阅读量9

点赞数

CC 4.0 BY-SA版权

分类专栏：全栈开发的艺术文章标签： Bootstrap AngularJS 分页

本文链接：https://blog.youkuaiyun.com/f9g0h/article/details/155622115

全栈开发的艺术专栏收录该内容

16 篇文章 ¥499.90

订阅专栏¥69.90

会员秒杀 ¥9.9 重磅福利

超级会员免费看

构建高效搜索与动态 UI：从 Bootstrap 分页到 Angular 集成

1. 利用 Bootstrap 实现搜索结果分页

普通搜索往往会返回大量结果，为了提升用户体验，我们可以对搜索结果进行分页处理，让用户每次只看到十条结果。使用 Bootstrap 组件进行分页，只需两个步骤：调整查询以找到正确的“页面”，并在视图中添加分页控件。

1.1 控制器中处理分页

为了简化操作，我们将每页的结果数量硬编码为十条，并查找一个新的参数 :page ，该参数表示用户想要查看的页面，默认值为 0。以下是控制器中的代码：

# search/pagination/shine/app/controllers/customers_controller.rb
class CustomersController < ApplicationController
  PAGE_SIZE = 10

  def index
    @page = (params[:page] || 0).to_i
    if params[:keywords].present?
      @keywords = params[:keywords]
      customer_search_term = CustomerSearchTerm.new(@keywords)
      @customers = Customer.where(
        customer_search_term.where_clause,
        customer_search_term.where_arg