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 301
2019
Blue
Not fun
used cms true

Web Design

Project 302
2020
Blue
Not fun
used cms false

Strategy Consulting

Project 303
2017
Red
Fun
used cms true

Branding, Motion Graphics

Project 304
2018
Yellow
Fun
used cms false

Branding, Web Design

Project 305
2018
Green
Not fun
used cms true

Strategy Consulting

Project 306
2018
Blue
Fun
used cms false

Branding, Web Design

Project 307
2019
Blue
Fun
used cms true

Branding, Web Design

Project 308
2020
Yellow
Fun
used cms false

Branding, Web Design

Project 309
2020
Orange
Not fun
used cms true

Branding, Strategy Consulting

Project 310
2020
Green
Not fun
used cms false

Branding, Strategy Consulting

Project 311
2019
Yellow
Fun
used cms true

Motion Graphics

Project 312
2017
Red
Not fun
used cms false

Motion Graphics

Project 313
2019
Red
Fun
used cms true

Branding, Web Design

Project 314
2020
Red
Fun
used cms false

Branding

Project 315
2017
Blue
Fun
used cms true

Web Design

Project 316
2018
Blue
Not fun
used cms false

Development

Project 317
2018
Blue
Not fun
used cms true

Development

Project 318
2018
Red
Not fun
used cms false

Motion Graphics

Project 319
2019
Yellow
Not fun
used cms true

Branding

Project 320
2020
Green
Fun
used cms false

Web Design

Project 321
2020
Blue
Fun
used cms true

Web Design, Development

Project 322
2020
Blue
Not fun
used cms false

Web Design, Development

Project 323
2019
Yellow
Fun
used cms true

Strategy Consulting

Project 324
2017
Orange
Fun
used cms false

Web Design, Development

Project 325
2019
Green
Fun
used cms true

Web Design

Project 326
2020
Yellow
Not fun
used cms false

Strategy Consulting

Project 327
2017
Red
Not fun
used cms true

Branding, Motion Graphics

Project 328
2018
Red
Fun
used cms false

Branding, Web Design

Project 329
2018
Red
Not fun
used cms true

Strategy Consulting

Project 330
2018
Blue
Fun
used cms false

Branding, Web Design

Project 331
2019
Blue
Fun
used cms true

Branding, Web Design

Project 332
2020
Blue
Fun
used cms false

Branding, Web Design

Project 333
2020
Red
Not fun
used cms true

Branding, Strategy Consulting

Project 334
2020
Yellow
Not fun
used cms false

Branding, Strategy Consulting

Project 335
2019
Green
Not fun
used cms true

Motion Graphics

Project 336
2017
Blue
Not fun
used cms false

Motion Graphics

Project 337
2019
Blue
Fun
used cms true

Branding, Web Design

Project 338
2020
Yellow
Fun
used cms false

Branding

Project 339
2017
Orange
Not fun
used cms true

Web Design

Project 340
2018
Green
Fun
used cms false

Development

Project 341
2018
Yellow
Fun
used cms true

Development

Project 342
2018
Red
Fun
used cms false

Motion Graphics

Project 343
2019
Red
Not fun
used cms true

Branding

Project 344
2020
Red
Not fun
used cms false

Web Design

Project 345
2020
Blue
Fun
used cms true

Web Design, Development

Project 346
2020
Blue
Not fun
used cms false

Web Design, Development

Project 347
2019
Blue
Fun
used cms true

Strategy Consulting

Project 348
2017
Red
Fun
used cms false

Web Design, Development

Project 349
2019
Yellow
Fun
used cms true

Web Design

Project 350
2020
Green
Not fun
used cms false

Strategy Consulting

Project 351
2017
Blue
Not fun
used cms true

Branding, Motion Graphics

Project 352
2018
Blue
Not fun
used cms false

Branding, Web Design

Project 353
2018
Yellow
Not fun
used cms true

Strategy Consulting

Project 354
2018
Orange
Fun
used cms false

Branding, Web Design

Project 355
2019
Green
Fun
used cms true

Branding, Web Design

Project 356
2020
Yellow
Not fun
used cms false

Branding, Web Design

Project 357
2020
Red
Fun
used cms true

Branding, Strategy Consulting

Project 358
2020
Red
Fun
used cms false

Branding, Strategy Consulting

Project 359
2019
Red
Fun
used cms true

Motion Graphics

Project 360
2017
Blue
Not fun
used cms false

Motion Graphics

Project 361
2019
Blue
Not fun
used cms true

Branding, Web Design

Project 362
2020
Blue
Fun
used cms false

Branding

Project 363
2017
Red
Not fun
used cms true

Web Design

Project 364
2018
Yellow
Fun
used cms false

Development

Project 365
2018
Green
Fun
used cms true

Development

Project 366
2018
Blue
Fun
used cms false

Motion Graphics

Project 367
2019
Blue
Not fun
used cms true

Branding

Project 368
2020
Yellow
Not fun
used cms false

Web Design

Project 369
2020
Orange
Not fun
used cms true

Web Design, Development

Project 370
2020
Green
Not fun
used cms false

Web Design, Development

Project 371
2019
Yellow
Fun
used cms true

Strategy Consulting

Project 372
2017
Red
Fun
used cms false

Web Design, Development

Project 373
2019
Red
Not fun
used cms true

Web Design

Project 374
2020
Red
Fun
used cms false

Strategy Consulting

Project 375
2017
Blue
Fun
used cms true

Branding, Motion Graphics

Project 376
2018
Blue
Fun
used cms false

Branding, Web Design

Project 377
2018
Blue
Not fun
used cms true

Strategy Consulting

Project 378
2018
Red
Not fun
used cms false

Branding, Web Design

Project 379
2019
Yellow
Fun
used cms true

Branding, Web Design

Project 380
2020
Green
Not fun
used cms false

Branding, Web Design

Project 381
2020
Blue
Fun
used cms true

Branding, Strategy Consulting

Project 382
2020
Blue
Fun
used cms false

Branding, Strategy Consulting

Project 383
2019
Yellow
Fun
used cms true

Motion Graphics

Project 384
2017
Orange
Not fun
used cms false

Motion Graphics

Project 385
2019
Green
Not fun
used cms true

Branding, Web Design

Project 386
2020
Yellow
Not fun
used cms false

Branding

Project 387
2017
Red
Not fun
used cms true

Web Design

Project 388
2018
Red
Fun
used cms false

Development

Project 389
2018
Red
Fun
used cms true

Development

Project 390
2018
Blue
Not fun
used cms false

Motion Graphics

Project 391
2019
Blue
Fun
used cms true

Branding

Project 392
2020
Blue
Fun
used cms false

Web Design

Project 393
2020
Red
Fun
used cms true

Web Design, Development

Project 394
2020
Yellow
Not fun
used cms false

Web Design, Development

Project 395
2019
Green
Not fun
used cms true

Strategy Consulting

Project 396
2017
Blue
Fun
used cms false

Web Design, Development

Project 397
2019
Blue
Not fun
used cms true

Web Design

Project 398
2020
Yellow
Fun
used cms false

Strategy Consulting

Project 399
2017
Orange
Fun
used cms true

Branding, Motion Graphics

Project 400
2018
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