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 401

Strategy Consulting

Yellow
Project 402

Branding, Web Design

Red
Project 403

Branding, Web Design

Red
Project 404

Branding, Web Design

Red
Project 405

Branding, Strategy Consulting

Blue
Project 406

Branding, Strategy Consulting

Blue
Project 407

Motion Graphics

Blue
Project 408

Motion Graphics

Red
Project 409

Branding, Web Design

Yellow
Project 410

Branding

Green
Project 411

Web Design

Blue
Project 412

Development

Blue
Project 413

Development

Yellow
Project 414

Motion Graphics

Orange
Project 415

Branding

Green
Project 416

Web Design

Yellow
Project 417

Web Design, Development

Red
Project 418

Web Design, Development

Red
Project 419

Strategy Consulting

Red
Project 420

Web Design, Development

Blue
Project 421

Web Design

Blue
Project 422

Strategy Consulting

Blue
Project 423

Branding, Motion Graphics

Red
Project 424

Branding, Web Design

Yellow
Project 425

Strategy Consulting

Green
Project 426

Branding, Web Design

Blue
Project 427

Branding, Web Design

Blue
Project 428

Branding, Web Design

Yellow
Project 429

Branding, Strategy Consulting

Orange
Project 430

Branding, Strategy Consulting

Green
Project 431

Motion Graphics

Yellow
Project 432

Motion Graphics

Red
Project 433

Branding, Web Design

Red
Project 434

Branding

Red
Project 435

Web Design

Blue
Project 436

Development

Blue
Project 437

Development

Blue
Project 438

Motion Graphics

Red
Project 439

Branding

Yellow
Project 440

Web Design

Green
Project 441

Web Design, Development

Blue
Project 442

Web Design, Development

Blue
Project 443

Strategy Consulting

Yellow
Project 444

Web Design, Development

Orange
Project 445

Web Design

Green
Project 446

Strategy Consulting

Yellow
Project 447

Branding, Motion Graphics

Red
Project 448

Branding, Web Design

Red
Project 449

Strategy Consulting

Red
Project 450

Branding, Web Design

Blue
Project 451

Branding, Web Design

Blue
Project 452

Branding, Web Design

Blue
Project 453

Branding, Strategy Consulting

Red
Project 454

Branding, Strategy Consulting

Yellow
Project 455

Motion Graphics

Green
Project 456

Motion Graphics

Blue
Project 457

Branding, Web Design

Blue
Project 458

Branding

Yellow
Project 459

Web Design

Orange
Project 460

Development

Green
Project 461

Development

Yellow
Project 462

Motion Graphics

Red
Project 463

Branding

Red
Project 464

Web Design

Red
Project 465

Web Design, Development

Blue
Project 466

Web Design, Development

Blue
Project 467

Strategy Consulting

Blue
Project 468

Web Design, Development

Red
Project 469

Web Design

Yellow
Project 470

Strategy Consulting

Green
Project 471

Branding, Motion Graphics

Blue
Project 472

Branding, Web Design

Blue
Project 473

Strategy Consulting

Yellow
Project 474

Branding, Web Design

Orange
Project 475

Branding, Web Design

Green
Project 476

Branding, Web Design

Yellow
Project 477

Branding, Strategy Consulting

Red
Project 478

Branding, Strategy Consulting

Red
Project 479

Motion Graphics

Red
Project 480

Motion Graphics

Blue
Project 481

Branding, Web Design

Blue
Project 482

Branding

Blue
Project 483

Web Design

Red
Project 484

Development

Yellow
Project 485

Development

Green
Project 486

Motion Graphics

Blue
Project 487

Branding

Blue
Project 488

Web Design

Yellow
Project 489

Web Design, Development

Orange
Project 490

Web Design, Development

Green
Project 491

Strategy Consulting

Yellow
Project 492

Web Design, Development

Red
Project 493

Web Design

Red
Project 494

Strategy Consulting

Red
Project 495

Branding, Motion Graphics

Blue
Project 496

Branding, Web Design

Blue
Project 497

Strategy Consulting

Blue
Project 498

Branding, Web Design

Red
Project 499

Branding, Web Design

Yellow
Project 500

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!