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 201
2020
Blue
Fun
used cms true

Web Design, Development

Project 202
2020
Blue
Fun
used cms false

Web Design, Development

Project 203
2019
Yellow
Not fun
used cms true

Strategy Consulting

Project 204
2017
Orange
Fun
used cms false

Web Design, Development

Project 205
2019
Green
Fun
used cms true

Web Design

Project 206
2020
Yellow
Fun
used cms false

Strategy Consulting

Project 207
2017
Red
Not fun
used cms true

Branding, Motion Graphics

Project 208
2018
Red
Not fun
used cms false

Branding, Web Design

Project 209
2018
Red
Fun
used cms true

Strategy Consulting

Project 210
2018
Blue
Not fun
used cms false

Branding, Web Design

Project 211
2019
Blue
Fun
used cms true

Branding, Web Design

Project 212
2020
Blue
Fun
used cms false

Branding, Web Design

Project 213
2020
Red
Fun
used cms true

Branding, Strategy Consulting

Project 214
2020
Yellow
Not fun
used cms false

Branding, Strategy Consulting

Project 215
2019
Green
Not fun
used cms true

Motion Graphics

Project 216
2017
Blue
Not fun
used cms false

Motion Graphics

Project 217
2019
Blue
Not fun
used cms true

Branding, Web Design

Project 218
2020
Yellow
Fun
used cms false

Branding

Project 219
2017
Orange
Fun
used cms true

Web Design

Project 220
2018
Green
Not fun
used cms false

Development

Project 221
2018
Yellow
Fun
used cms true

Development

Project 222
2018
Red
Fun
used cms false

Motion Graphics

Project 223
2019
Red
Fun
used cms true

Branding

Project 224
2020
Red
Not fun
used cms false

Web Design

Project 225
2020
Blue
Not fun
used cms true

Web Design, Development

Project 226
2020
Blue
Fun
used cms false

Web Design, Development

Project 227
2019
Blue
Not fun
used cms true

Strategy Consulting

Project 228
2017
Red
Fun
used cms false

Web Design, Development

Project 229
2019
Yellow
Fun
used cms true

Web Design

Project 230
2020
Green
Fun
used cms false

Strategy Consulting

Project 231
2017
Blue
Not fun
used cms true

Branding, Motion Graphics

Project 232
2018
Blue
Not fun
used cms false

Branding, Web Design

Project 233
2018
Yellow
Not fun
used cms true

Strategy Consulting

Project 234
2018
Orange
Not fun
used cms false

Branding, Web Design

Project 235
2019
Green
Fun
used cms true

Branding, Web Design

Project 236
2020
Yellow
Fun
used cms false

Branding, Web Design

Project 237
2020
Red
Not fun
used cms true

Branding, Strategy Consulting

Project 238
2020
Red
Fun
used cms false

Branding, Strategy Consulting

Project 239
2019
Red
Fun
used cms true

Motion Graphics

Project 240
2017
Blue
Fun
used cms false

Motion Graphics

Project 241
2019
Blue
Not fun
used cms true

Branding, Web Design

Project 242
2020
Blue
Not fun
used cms false

Branding

Project 243
2017
Red
Fun
used cms true

Web Design

Project 244
2018
Yellow
Not fun
used cms false

Development

Project 245
2018
Green
Fun
used cms true

Development

Project 246
2018
Blue
Fun
used cms false

Motion Graphics

Project 247
2019
Blue
Fun
used cms true

Branding

Project 248
2020
Yellow
Not fun
used cms false

Web Design

Project 249
2020
Orange
Not fun
used cms true

Web Design, Development

Project 250
2020
Green
Not fun
used cms false

Web Design, Development

Project 251
2019
Yellow
Not fun
used cms true

Strategy Consulting

Project 252
2017
Red
Fun
used cms false

Web Design, Development

Project 253
2019
Red
Fun
used cms true

Web Design

Project 254
2020
Red
Not fun
used cms false

Strategy Consulting

Project 255
2017
Blue
Fun
used cms true

Branding, Motion Graphics

Project 256
2018
Blue
Fun
used cms false

Branding, Web Design

Project 257
2018
Blue
Fun
used cms true

Strategy Consulting

Project 258
2018
Red
Not fun
used cms false

Branding, Web Design

Project 259
2019
Yellow
Not fun
used cms true

Branding, Web Design

Project 260
2020
Green
Fun
used cms false

Branding, Web Design

Project 261
2020
Blue
Not fun
used cms true

Branding, Strategy Consulting

Project 262
2020
Blue
Fun
used cms false

Branding, Strategy Consulting

Project 263
2019
Yellow
Fun
used cms true

Motion Graphics

Project 264
2017
Orange
Fun
used cms false

Motion Graphics

Project 265
2019
Green
Not fun
used cms true

Branding, Web Design

Project 266
2020
Yellow
Not fun
used cms false

Branding

Project 267
2017
Red
Not fun
used cms true

Web Design

Project 268
2018
Red
Not fun
used cms false

Development

Project 269
2018
Red
Fun
used cms true

Development

Project 270
2018
Blue
Fun
used cms false

Motion Graphics

Project 271
2019
Blue
Not fun
used cms true

Branding

Project 272
2020
Blue
Fun
used cms false

Web Design

Project 273
2020
Red
Fun
used cms true

Web Design, Development

Project 274
2020
Yellow
Fun
used cms false

Web Design, Development

Project 275
2019
Green
Not fun
used cms true

Strategy Consulting

Project 276
2017
Blue
Not fun
used cms false

Web Design, Development

Project 277
2019
Blue
Fun
used cms true

Web Design

Project 278
2020
Yellow
Not fun
used cms false

Strategy Consulting

Project 279
2017
Orange
Fun
used cms true

Branding, Motion Graphics

Project 280
2018
Green
Fun
used cms false

Branding, Web Design

Project 281
2018
Yellow
Fun
used cms true

Strategy Consulting

Project 282
2018
Red
Not fun
used cms false

Branding, Web Design

Project 283
2019
Red
Not fun
used cms true

Branding, Web Design

Project 284
2020
Red
Not fun
used cms false

Branding, Web Design

Project 285
2020
Blue
Not fun
used cms true

Branding, Strategy Consulting

Project 286
2020
Blue
Fun
used cms false

Branding, Strategy Consulting

Project 287
2019
Blue
Fun
used cms true

Motion Graphics

Project 288
2017
Red
Not fun
used cms false

Motion Graphics

Project 289
2019
Yellow
Fun
used cms true

Branding, Web Design

Project 290
2020
Green
Fun
used cms false

Branding

Project 291
2017
Blue
Fun
used cms true

Web Design

Project 292
2018
Blue
Not fun
used cms false

Development

Project 293
2018
Yellow
Not fun
used cms true

Development

Project 294
2018
Orange
Fun
used cms false

Motion Graphics

Project 295
2019
Green
Not fun
used cms true

Branding

Project 296
2020
Yellow
Fun
used cms false

Web Design

Project 297
2020
Red
Fun
used cms true

Web Design, Development

Project 298
2020
Red
Fun
used cms false

Web Design, Development

Project 299
2019
Red
Not fun
used cms true

Strategy Consulting

Project 300
2017
Blue
Not fun
used cms false

Web Design, Development

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