Filter

Example 10: Filter with pagination (simple 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.

Can select multiple at once. Watch as the pagination element updates as you filter.
Blue
Red
Yellow
Orange
Green
Project 201

Web Design, Development

Blue
Project 202

Web Design, Development

Blue
Project 203

Strategy Consulting

Yellow
Project 204

Web Design, Development

Orange
Project 205

Web Design

Green
Project 206

Strategy Consulting

Yellow
Project 207

Branding, Motion Graphics

Red
Project 208

Branding, Web Design

Red
Project 209

Strategy Consulting

Red
Project 210

Branding, Web Design

Blue
Project 211

Branding, Web Design

Blue
Project 212

Branding, Web Design

Blue
Project 213

Branding, Strategy Consulting

Red
Project 214

Branding, Strategy Consulting

Yellow
Project 215

Motion Graphics

Green
Project 216

Motion Graphics

Blue
Project 217

Branding, Web Design

Blue
Project 218

Branding

Yellow
Project 219

Web Design

Orange
Project 220

Development

Green
Project 221

Development

Yellow
Project 222

Motion Graphics

Red
Project 223

Branding

Red
Project 224

Web Design

Red
Project 225

Web Design, Development

Blue
Project 226

Web Design, Development

Blue
Project 227

Strategy Consulting

Blue
Project 228

Web Design, Development

Red
Project 229

Web Design

Yellow
Project 230

Strategy Consulting

Green
Project 231

Branding, Motion Graphics

Blue
Project 232

Branding, Web Design

Blue
Project 233

Strategy Consulting

Yellow
Project 234

Branding, Web Design

Orange
Project 235

Branding, Web Design

Green
Project 236

Branding, Web Design

Yellow
Project 237

Branding, Strategy Consulting

Red
Project 238

Branding, Strategy Consulting

Red
Project 239

Motion Graphics

Red
Project 240

Motion Graphics

Blue
Project 241

Branding, Web Design

Blue
Project 242

Branding

Blue
Project 243

Web Design

Red
Project 244

Development

Yellow
Project 245

Development

Green
Project 246

Motion Graphics

Blue
Project 247

Branding

Blue
Project 248

Web Design

Yellow
Project 249

Web Design, Development

Orange
Project 250

Web Design, Development

Green
Project 251

Strategy Consulting

Yellow
Project 252

Web Design, Development

Red
Project 253

Web Design

Red
Project 254

Strategy Consulting

Red
Project 255

Branding, Motion Graphics

Blue
Project 256

Branding, Web Design

Blue
Project 257

Strategy Consulting

Blue
Project 258

Branding, Web Design

Red
Project 259

Branding, Web Design

Yellow
Project 260

Branding, Web Design

Green
Project 261

Branding, Strategy Consulting

Blue
Project 262

Branding, Strategy Consulting

Blue
Project 263

Motion Graphics

Yellow
Project 264

Motion Graphics

Orange
Project 265

Branding, Web Design

Green
Project 266

Branding

Yellow
Project 267

Web Design

Red
Project 268

Development

Red
Project 269

Development

Red
Project 270

Motion Graphics

Blue
Project 271

Branding

Blue
Project 272

Web Design

Blue
Project 273

Web Design, Development

Red
Project 274

Web Design, Development

Yellow
Project 275

Strategy Consulting

Green
Project 276

Web Design, Development

Blue
Project 277

Web Design

Blue
Project 278

Strategy Consulting

Yellow
Project 279

Branding, Motion Graphics

Orange
Project 280

Branding, Web Design

Green
Project 281

Strategy Consulting

Yellow
Project 282

Branding, Web Design

Red
Project 283

Branding, Web Design

Red
Project 284

Branding, Web Design

Red
Project 285

Branding, Strategy Consulting

Blue
Project 286

Branding, Strategy Consulting

Blue
Project 287

Motion Graphics

Blue
Project 288

Motion Graphics

Red
Project 289

Branding, Web Design

Yellow
Project 290

Branding

Green
Project 291

Web Design

Blue
Project 292

Development

Blue
Project 293

Development

Yellow
Project 294

Motion Graphics

Orange
Project 295

Branding

Green
Project 296

Web Design

Yellow
Project 297

Web Design, Development

Red
Project 298

Web Design, Development

Red
Project 299

Strategy Consulting

Red
Project 300

Web Design, Development

Blue
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
Show 8, load 8
Show 50, load 50
Load all
Sort
Component
Filter
Component
Made with
by
This "Loading more items..." button will disappear as there are no more items left to load!