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 1

Branding, Web Design

Blue
Project 2

Branding

Blue
Project 3

Web Design

Red
Project 4

Development

Yellow
Project 5

Development

Green
Project 6

Motion Graphics

Blue
Project 7

Branding

Blue
Project 8

Web Design

Yellow
Project 9

Web Design, Development

Orange
Project 10

Web Design, Development

Green
Project 11

Strategy Consulting

Yellow
Project 12

Web Design, Development

Red
Project 13

Web Design

Red
Project 14

Strategy Consulting

Red
Project 15

Branding, Motion Graphics

Blue
Project 16

Branding, Web Design

Blue
Project 17

Strategy Consulting

Blue
Project 18

Branding, Web Design

Red
Project 19

Branding, Web Design

Yellow
Project 20

Branding, Web Design

Green
Project 21

Branding, Strategy Consulting

Blue
Project 22

Branding, Strategy Consulting

Blue
Project 23

Motion Graphics

Yellow
Project 24

Motion Graphics

Orange
Project 25

Branding, Web Design

Green
Project 26

Branding

Yellow
Project 27

Web Design

Red
Project 28

Development

Red
Project 29

Development

Red
Project 30

Motion Graphics

Blue
Project 31

Branding

Blue
Project 32

Web Design

Blue
Project 33

Web Design, Development

Red
Project 34

Web Design, Development

Yellow
Project 35

Strategy Consulting

Green
Project 36

Web Design, Development

Blue
Project 37

Web Design

Blue
Project 38

Strategy Consulting

Yellow
Project 39

Branding, Motion Graphics

Orange
Project 40

Branding, Web Design

Green
Project 41

Strategy Consulting

Yellow
Project 42

Branding, Web Design

Red
Project 43

Branding, Web Design

Red
Project 44

Branding, Web Design

Red
Project 45

Branding, Strategy Consulting

Blue
Project 46

Branding, Strategy Consulting

Blue
Project 47

Motion Graphics

Blue
Project 48

Motion Graphics

Red
Project 49

Branding, Web Design

Yellow
Project 50

Branding

Green
Project 51

Web Design

Blue
Project 52

Development

Blue
Project 53

Development

Yellow
Project 54

Motion Graphics

Orange
Project 55

Branding

Green
Project 56

Web Design

Yellow
Project 57

Web Design, Development

Red
Project 58

Web Design, Development

Red
Project 59

Strategy Consulting

Red
Project 60

Web Design, Development

Blue
Project 61

Web Design

Blue
Project 62

Strategy Consulting

Blue
Project 63

Branding, Motion Graphics

Red
Project 64

Branding, Web Design

Yellow
Project 65

Strategy Consulting

Green
Project 66

Branding, Web Design

Blue
Project 67

Branding, Web Design

Blue
Project 68

Branding, Web Design

Yellow
Project 69

Branding, Strategy Consulting

Orange
Project 70

Branding, Strategy Consulting

Green
Project 71

Motion Graphics

Yellow
Project 72

Motion Graphics

Red
Project 73

Branding, Web Design

Red
Project 74

Branding

Red
Project 75

Web Design

Blue
Project 76

Development

Blue
Project 77

Development

Blue
Project 78

Motion Graphics

Red
Project 79

Branding

Yellow
Project 80

Web Design

Green
Project 81

Web Design, Development

Blue
Project 82

Web Design, Development

Blue
Project 83

Strategy Consulting

Yellow
Project 84

Web Design, Development

Orange
Project 85

Web Design

Green
Project 86

Strategy Consulting

Yellow
Project 87

Branding, Motion Graphics

Red
Project 88

Branding, Web Design

Red
Project 89

Strategy Consulting

Red
Project 90

Branding, Web Design

Blue
Project 91

Branding, Web Design

Blue
Project 92

Branding, Web Design

Blue
Project 93

Branding, Strategy Consulting

Red
Project 94

Branding, Strategy Consulting

Yellow
Project 95

Motion Graphics

Green
Project 96

Motion Graphics

Blue
Project 97

Branding, Web Design

Blue
Project 98

Branding

Yellow
Project 99

Web Design

Orange
Project 100

Development

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.

This "Loading more items..." button will disappear as there are no more items left to load!