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.
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 101
2018
Yellow
Not fun
used cms true

Development

Project 102
2018
Red
Fun
used cms false

Motion Graphics

Project 103
2019
Red
Fun
used cms true

Branding

Project 104
2020
Red
Fun
used cms false

Web Design

Project 105
2020
Blue
Not fun
used cms true

Web Design, Development

Project 106
2020
Blue
Not fun
used cms false

Web Design, Development

Project 107
2019
Blue
Fun
used cms true

Strategy Consulting

Project 108
2017
Red
Not fun
used cms false

Web Design, Development

Project 109
2019
Yellow
Fun
used cms true

Web Design

Project 110
2020
Green
Fun
used cms false

Strategy Consulting

Project 111
2017
Blue
Fun
used cms true

Branding, Motion Graphics

Project 112
2018
Blue
Not fun
used cms false

Branding, Web Design

Project 113
2018
Yellow
Not fun
used cms true

Strategy Consulting

Project 114
2018
Orange
Not fun
used cms false

Branding, Web Design

Project 115
2019
Green
Not fun
used cms true

Branding, Web Design

Project 116
2020
Yellow
Fun
used cms false

Branding, Web Design

Project 117
2020
Red
Fun
used cms true

Branding, Strategy Consulting

Project 118
2020
Red
Not fun
used cms false

Branding, Strategy Consulting

Project 119
2019
Red
Fun
used cms true

Motion Graphics

Project 120
2017
Blue
Fun
used cms false

Motion Graphics

Project 121
2019
Blue
Fun
used cms true

Branding, Web Design

Project 122
2020
Blue
Not fun
used cms false

Branding

Project 123
2017
Red
Not fun
used cms true

Web Design

Project 124
2018
Yellow
Fun
used cms false

Development

Project 125
2018
Green
Not fun
used cms true

Development

Project 126
2018
Blue
Fun
used cms false

Motion Graphics

Project 127
2019
Blue
Fun
used cms true

Branding

Project 128
2020
Yellow
Fun
used cms false

Web Design

Project 129
2020
Orange
Not fun
used cms true

Web Design, Development

Project 130
2020
Green
Not fun
used cms false

Web Design, Development

Project 131
2019
Yellow
Not fun
used cms true

Strategy Consulting

Project 132
2017
Red
Not fun
used cms false

Web Design, Development

Project 133
2019
Red
Fun
used cms true

Web Design

Project 134
2020
Red
Fun
used cms false

Strategy Consulting

Project 135
2017
Blue
Not fun
used cms true

Branding, Motion Graphics

Project 136
2018
Blue
Fun
used cms false

Branding, Web Design

Project 137
2018
Blue
Fun
used cms true

Strategy Consulting

Project 138
2018
Red
Fun
used cms false

Branding, Web Design

Project 139
2019
Yellow
Not fun
used cms true

Branding, Web Design

Project 140
2020
Green
Not fun
used cms false

Branding, Web Design

Project 141
2020
Blue
Fun
used cms true

Branding, Strategy Consulting

Project 142
2020
Blue
Not fun
used cms false

Branding, Strategy Consulting

Project 143
2019
Yellow
Fun
used cms true

Motion Graphics

Project 144
2017
Orange
Fun
used cms false

Motion Graphics

Project 145
2019
Green
Fun
used cms true

Branding, Web Design

Project 146
2020
Yellow
Not fun
used cms false

Branding

Project 147
2017
Red
Not fun
used cms true

Web Design

Project 148
2018
Red
Not fun
used cms false

Development

Project 149
2018
Red
Not fun
used cms true

Development

Project 150
2018
Blue
Fun
used cms false

Motion Graphics

Project 151
2019
Blue
Fun
used cms true

Branding

Project 152
2020
Blue
Not fun
used cms false

Web Design

Project 153
2020
Red
Fun
used cms true

Web Design, Development

Project 154
2020
Yellow
Fun
used cms false

Web Design, Development

Project 155
2019
Green
Fun
used cms true

Strategy Consulting

Project 156
2017
Blue
Not fun
used cms false

Web Design, Development

Project 157
2019
Blue
Not fun
used cms true

Web Design

Project 158
2020
Yellow
Fun
used cms false

Strategy Consulting

Project 159
2017
Orange
Not fun
used cms true

Branding, Motion Graphics

Project 160
2018
Green
Fun
used cms false

Branding, Web Design

Project 161
2018
Yellow
Fun
used cms true

Strategy Consulting

Project 162
2018
Red
Fun
used cms false

Branding, Web Design

Project 163
2019
Red
Not fun
used cms true

Branding, Web Design

Project 164
2020
Red
Not fun
used cms false

Branding, Web Design

Project 165
2020
Blue
Not fun
used cms true

Branding, Strategy Consulting

Project 166
2020
Blue
Not fun
used cms false

Branding, Strategy Consulting

Project 167
2019
Blue
Fun
used cms true

Motion Graphics

Project 168
2017
Red
Fun
used cms false

Motion Graphics

Project 169
2019
Yellow
Not fun
used cms true

Branding, Web Design

Project 170
2020
Green
Fun
used cms false

Branding

Project 171
2017
Blue
Fun
used cms true

Web Design

Project 172
2018
Blue
Fun
used cms false

Development

Project 173
2018
Yellow
Not fun
used cms true

Development

Project 174
2018
Orange
Not fun
used cms false

Motion Graphics

Project 175
2019
Green
Fun
used cms true

Branding

Project 176
2020
Yellow
Not fun
used cms false

Web Design

Project 177
2020
Red
Fun
used cms true

Web Design, Development

Project 178
2020
Red
Fun
used cms false

Web Design, Development

Project 179
2019
Red
Fun
used cms true

Strategy Consulting

Project 180
2017
Blue
Not fun
used cms false

Web Design, Development

Project 181
2019
Blue
Not fun
used cms true

Web Design

Project 182
2020
Blue
Not fun
used cms false

Strategy Consulting

Project 183
2017
Red
Not fun
used cms true

Branding, Motion Graphics

Project 184
2018
Yellow
Fun
used cms false

Branding, Web Design

Project 185
2018
Green
Fun
used cms true

Strategy Consulting

Project 186
2018
Blue
Not fun
used cms false

Branding, Web Design

Project 187
2019
Blue
Fun
used cms true

Branding, Web Design

Project 188
2020
Yellow
Fun
used cms false

Branding, Web Design

Project 189
2020
Orange
Fun
used cms true

Branding, Strategy Consulting

Project 190
2020
Green
Not fun
used cms false

Branding, Strategy Consulting

Project 191
2019
Yellow
Not fun
used cms true

Motion Graphics

Project 192
2017
Red
Fun
used cms false

Motion Graphics

Project 193
2019
Red
Not fun
used cms true

Branding, Web Design

Project 194
2020
Red
Fun
used cms false

Branding

Project 195
2017
Blue
Fun
used cms true

Web Design

Project 196
2018
Blue
Fun
used cms false

Development

Project 197
2018
Blue
Not fun
used cms true

Development

Project 198
2018
Red
Not fun
used cms false

Motion Graphics

Project 199
2019
Yellow
Not fun
used cms true

Branding

Project 200
2020
Green
Not fun
used cms false

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.