Filter

Example 11 - Filter with pagination (complex filter)

Filter through a paginated list. Pagination element updates as items filter in and out of the Collection List.

See Finsweet
Walkthrough

What we will cover

  • The structure of our CMS Collection List

  • Inserting the pagination element inside a div on the page

  • The paginate option inside the.loadmore() component keep your loaded items inside pagination.

  • The .filter() component to filter within the paginated list.

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Branding
Web Design
Development
Motion
Strategy
All
Red
Yellow
Blue
Green
Orange
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Project 401
2018
Yellow
Not fun
used cms true

Strategy Consulting

Project 402
2018
Red
Not fun
used cms false

Branding, Web Design

Project 403
2019
Red
Not fun
used cms true

Branding, Web Design

Project 404
2020
Red
Not fun
used cms false

Branding, Web Design

Project 405
2020
Blue
Fun
used cms true

Branding, Strategy Consulting

Project 406
2020
Blue
Fun
used cms false

Branding, Strategy Consulting

Project 407
2019
Blue
Not fun
used cms true

Motion Graphics

Project 408
2017
Red
Fun
used cms false

Motion Graphics

Project 409
2019
Yellow
Fun
used cms true

Branding, Web Design

Project 410
2020
Green
Fun
used cms false

Branding

Project 411
2017
Blue
Not fun
used cms true

Web Design

Project 412
2018
Blue
Not fun
used cms false

Development

Project 413
2018
Yellow
Fun
used cms true

Development

Project 414
2018
Orange
Not fun
used cms false

Motion Graphics

Project 415
2019
Green
Fun
used cms true

Branding

Project 416
2020
Yellow
Fun
used cms false

Web Design

Project 417
2020
Red
Fun
used cms true

Web Design, Development

Project 418
2020
Red
Not fun
used cms false

Web Design, Development

Project 419
2019
Red
Not fun
used cms true

Strategy Consulting

Project 420
2017
Blue
Not fun
used cms false

Web Design, Development

Project 421
2019
Blue
Not fun
used cms true

Web Design

Project 422
2020
Blue
Fun
used cms false

Strategy Consulting

Project 423
2017
Red
Fun
used cms true

Branding, Motion Graphics

Project 424
2018
Yellow
Not fun
used cms false

Branding, Web Design

Project 425
2018
Green
Fun
used cms true

Strategy Consulting

Project 426
2018
Blue
Fun
used cms false

Branding, Web Design

Project 427
2019
Blue
Fun
used cms true

Branding, Web Design

Project 428
2020
Yellow
Not fun
used cms false

Branding, Web Design

Project 429
2020
Orange
Not fun
used cms true

Branding, Strategy Consulting

Project 430
2020
Green
Fun
used cms false

Branding, Strategy Consulting

Project 431
2019
Yellow
Not fun
used cms true

Motion Graphics

Project 432
2017
Red
Fun
used cms false

Motion Graphics

Project 433
2019
Red
Fun
used cms true

Branding, Web Design

Project 434
2020
Red
Fun
used cms false

Branding

Project 435
2017
Blue
Not fun
used cms true

Web Design

Project 436
2018
Blue
Not fun
used cms false

Development

Project 437
2018
Blue
Not fun
used cms true

Development

Project 438
2018
Red
Not fun
used cms false

Motion Graphics

Project 439
2019
Yellow
Fun
used cms true

Branding

Project 440
2020
Green
Fun
used cms false

Web Design

Project 441
2020
Blue
Not fun
used cms true

Web Design, Development

Project 442
2020
Blue
Fun
used cms false

Web Design, Development

Project 443
2019
Yellow
Fun
used cms true

Strategy Consulting

Project 444
2017
Orange
Fun
used cms false

Web Design, Development

Project 445
2019
Green
Not fun
used cms true

Web Design

Project 446
2019
Yellow
Not fun
used cms false

Strategy Consulting

Project 447
2020
Red
Fun
used cms true

Branding, Motion Graphics

Project 448
2017
Red
Not fun
used cms false

Branding, Web Design

Project 449
2018
Red
Fun
used cms true

Strategy Consulting

Project 450
2018
Blue
Fun
used cms false

Branding, Web Design

Project 451
2018
Blue
Fun
used cms true

Branding, Web Design

Project 452
2019
Blue
Not fun
used cms false

Branding, Web Design

Project 453
2020
Red
Not fun
used cms true

Branding, Strategy Consulting

Project 454
2020
Yellow
Not fun
used cms false

Branding, Strategy Consulting

Project 455
2020
Green
Not fun
used cms true

Motion Graphics

Project 456
2019
Blue
Fun
used cms false

Motion Graphics

Project 457
2017
Blue
Fun
used cms true

Branding, Web Design

Project 458
2019
Yellow
Not fun
used cms false

Branding

Project 459
2020
Orange
Fun
used cms true

Web Design

Project 460
2017
Green
Fun
used cms false

Development

Project 461
2018
Yellow
Fun
used cms true

Development

Project 462
2018
Red
Not fun
used cms false

Motion Graphics

Project 463
2018
Red
Not fun
used cms true

Branding

Project 464
2019
Red
Fun
used cms false

Web Design

Project 465
2020
Blue
Not fun
used cms true

Web Design, Development

Project 466
2020
Blue
Fun
used cms false

Web Design, Development

Project 467
2020
Blue
Fun
used cms true

Strategy Consulting

Project 468
2019
Red
Fun
used cms false

Web Design, Development

Project 469
2017
Yellow
Not fun
used cms true

Web Design

Project 470
2019
Green
Not fun
used cms false

Strategy Consulting

Project 471
2020
Blue
Not fun
used cms true

Branding, Motion Graphics

Project 472
2017
Blue
Not fun
used cms false

Branding, Web Design

Project 473
2018
Yellow
Fun
used cms true

Strategy Consulting

Project 474
2018
Orange
Fun
used cms false

Branding, Web Design

Project 475
2018
Green
Not fun
used cms true

Branding, Web Design

Project 476
2019
Yellow
Fun
used cms false

Branding, Web Design

Project 477
2020
Red
Fun
used cms true

Branding, Strategy Consulting

Project 478
2020
Red
Fun
used cms false

Branding, Strategy Consulting

Project 479
2020
Red
Not fun
used cms true

Motion Graphics

Project 480
2019
Blue
Not fun
used cms false

Motion Graphics

Project 481
2017
Blue
Fun
used cms true

Branding, Web Design

Project 482
2019
Blue
Not fun
used cms false

Branding

Project 483
2020
Red
Fun
used cms true

Web Design

Project 484
2017
Yellow
Fun
used cms false

Development

Project 485
2018
Green
Fun
used cms true

Development

Project 486
2018
Blue
Not fun
used cms false

Motion Graphics

Project 487
2018
Blue
Not fun
used cms true

Branding

Project 488
2019
Yellow
Not fun
used cms false

Web Design

Project 489
2020
Orange
Not fun
used cms true

Web Design, Development

Project 490
2020
Green
Fun
used cms false

Web Design, Development

Project 491
2020
Yellow
Fun
used cms true

Strategy Consulting

Project 492
2019
Red
Not fun
used cms false

Web Design, Development

Project 493
2017
Red
Fun
used cms true

Web Design

Project 494
2019
Red
Fun
used cms false

Strategy Consulting

Project 495
2020
Blue
Fun
used cms true

Branding, Motion Graphics

Project 496
2017
Blue
Not fun
used cms false

Branding, Web Design

Project 497
2018
Blue
Not fun
used cms true

Strategy Consulting

Project 498
2018
Red
Fun
used cms false

Branding, Web Design

Project 499
2018
Yellow
Not fun
used cms true

Branding, Web Design

Project 500
2019
Green
Fun
used cms false

Branding, Web Design

Clone me!

You are almost there! Clone this template by clicking the link above. Learn, play around, test, use your own content, and have fun.

You can delete all .delete-me divs! All of the How-To content is in the .clonable divs.

More examples
1 filter, exclusive
1 filter, multi
2 filters, exclusive and multi
Filter by search
Really crazy complex filter with every filter option
1 nested collection, dynamic filter buttons
Load More
Component
Sort
Component
Made with
by