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 301

Web Design

Blue
Project 302

Strategy Consulting

Blue
Project 303

Branding, Motion Graphics

Red
Project 304

Branding, Web Design

Yellow
Project 305

Strategy Consulting

Green
Project 306

Branding, Web Design

Blue
Project 307

Branding, Web Design

Blue
Project 308

Branding, Web Design

Yellow
Project 309

Branding, Strategy Consulting

Orange
Project 310

Branding, Strategy Consulting

Green
Project 311

Motion Graphics

Yellow
Project 312

Motion Graphics

Red
Project 313

Branding, Web Design

Red
Project 314

Branding

Red
Project 315

Web Design

Blue
Project 316

Development

Blue
Project 317

Development

Blue
Project 318

Motion Graphics

Red
Project 319

Branding

Yellow
Project 320

Web Design

Green
Project 321

Web Design, Development

Blue
Project 322

Web Design, Development

Blue
Project 323

Strategy Consulting

Yellow
Project 324

Web Design, Development

Orange
Project 325

Web Design

Green
Project 326

Strategy Consulting

Yellow
Project 327

Branding, Motion Graphics

Red
Project 328

Branding, Web Design

Red
Project 329

Strategy Consulting

Red
Project 330

Branding, Web Design

Blue
Project 331

Branding, Web Design

Blue
Project 332

Branding, Web Design

Blue
Project 333

Branding, Strategy Consulting

Red
Project 334

Branding, Strategy Consulting

Yellow
Project 335

Motion Graphics

Green
Project 336

Motion Graphics

Blue
Project 337

Branding, Web Design

Blue
Project 338

Branding

Yellow
Project 339

Web Design

Orange
Project 340

Development

Green
Project 341

Development

Yellow
Project 342

Motion Graphics

Red
Project 343

Branding

Red
Project 344

Web Design

Red
Project 345

Web Design, Development

Blue
Project 346

Web Design, Development

Blue
Project 347

Strategy Consulting

Blue
Project 348

Web Design, Development

Red
Project 349

Web Design

Yellow
Project 350

Strategy Consulting

Green
Project 351

Branding, Motion Graphics

Blue
Project 352

Branding, Web Design

Blue
Project 353

Strategy Consulting

Yellow
Project 354

Branding, Web Design

Orange
Project 355

Branding, Web Design

Green
Project 356

Branding, Web Design

Yellow
Project 357

Branding, Strategy Consulting

Red
Project 358

Branding, Strategy Consulting

Red
Project 359

Motion Graphics

Red
Project 360

Motion Graphics

Blue
Project 361

Branding, Web Design

Blue
Project 362

Branding

Blue
Project 363

Web Design

Red
Project 364

Development

Yellow
Project 365

Development

Green
Project 366

Motion Graphics

Blue
Project 367

Branding

Blue
Project 368

Web Design

Yellow
Project 369

Web Design, Development

Orange
Project 370

Web Design, Development

Green
Project 371

Strategy Consulting

Yellow
Project 372

Web Design, Development

Red
Project 373

Web Design

Red
Project 374

Strategy Consulting

Red
Project 375

Branding, Motion Graphics

Blue
Project 376

Branding, Web Design

Blue
Project 377

Strategy Consulting

Blue
Project 378

Branding, Web Design

Red
Project 379

Branding, Web Design

Yellow
Project 380

Branding, Web Design

Green
Project 381

Branding, Strategy Consulting

Blue
Project 382

Branding, Strategy Consulting

Blue
Project 383

Motion Graphics

Yellow
Project 384

Motion Graphics

Orange
Project 385

Branding, Web Design

Green
Project 386

Branding

Yellow
Project 387

Web Design

Red
Project 388

Development

Red
Project 389

Development

Red
Project 390

Motion Graphics

Blue
Project 391

Branding

Blue
Project 392

Web Design

Blue
Project 393

Web Design, Development

Red
Project 394

Web Design, Development

Yellow
Project 395

Strategy Consulting

Green
Project 396

Web Design, Development

Blue
Project 397

Web Design

Blue
Project 398

Strategy Consulting

Yellow
Project 399

Branding, Motion Graphics

Orange
Project 400

Branding, Web Design

Green
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!