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 101

Development

Yellow
Project 102

Motion Graphics

Red
Project 103

Branding

Red
Project 104

Web Design

Red
Project 105

Web Design, Development

Blue
Project 106

Web Design, Development

Blue
Project 107

Strategy Consulting

Blue
Project 108

Web Design, Development

Red
Project 109

Web Design

Yellow
Project 110

Strategy Consulting

Green
Project 111

Branding, Motion Graphics

Blue
Project 112

Branding, Web Design

Blue
Project 113

Strategy Consulting

Yellow
Project 114

Branding, Web Design

Orange
Project 115

Branding, Web Design

Green
Project 116

Branding, Web Design

Yellow
Project 117

Branding, Strategy Consulting

Red
Project 118

Branding, Strategy Consulting

Red
Project 119

Motion Graphics

Red
Project 120

Motion Graphics

Blue
Project 121

Branding, Web Design

Blue
Project 122

Branding

Blue
Project 123

Web Design

Red
Project 124

Development

Yellow
Project 125

Development

Green
Project 126

Motion Graphics

Blue
Project 127

Branding

Blue
Project 128

Web Design

Yellow
Project 129

Web Design, Development

Orange
Project 130

Web Design, Development

Green
Project 131

Strategy Consulting

Yellow
Project 132

Web Design, Development

Red
Project 133

Web Design

Red
Project 134

Strategy Consulting

Red
Project 135

Branding, Motion Graphics

Blue
Project 136

Branding, Web Design

Blue
Project 137

Strategy Consulting

Blue
Project 138

Branding, Web Design

Red
Project 139

Branding, Web Design

Yellow
Project 140

Branding, Web Design

Green
Project 141

Branding, Strategy Consulting

Blue
Project 142

Branding, Strategy Consulting

Blue
Project 143

Motion Graphics

Yellow
Project 144

Motion Graphics

Orange
Project 145

Branding, Web Design

Green
Project 146

Branding

Yellow
Project 147

Web Design

Red
Project 148

Development

Red
Project 149

Development

Red
Project 150

Motion Graphics

Blue
Project 151

Branding

Blue
Project 152

Web Design

Blue
Project 153

Web Design, Development

Red
Project 154

Web Design, Development

Yellow
Project 155

Strategy Consulting

Green
Project 156

Web Design, Development

Blue
Project 157

Web Design

Blue
Project 158

Strategy Consulting

Yellow
Project 159

Branding, Motion Graphics

Orange
Project 160

Branding, Web Design

Green
Project 161

Strategy Consulting

Yellow
Project 162

Branding, Web Design

Red
Project 163

Branding, Web Design

Red
Project 164

Branding, Web Design

Red
Project 165

Branding, Strategy Consulting

Blue
Project 166

Branding, Strategy Consulting

Blue
Project 167

Motion Graphics

Blue
Project 168

Motion Graphics

Red
Project 169

Branding, Web Design

Yellow
Project 170

Branding

Green
Project 171

Web Design

Blue
Project 172

Development

Blue
Project 173

Development

Yellow
Project 174

Motion Graphics

Orange
Project 175

Branding

Green
Project 176

Web Design

Yellow
Project 177

Web Design, Development

Red
Project 178

Web Design, Development

Red
Project 179

Strategy Consulting

Red
Project 180

Web Design, Development

Blue
Project 181

Web Design

Blue
Project 182

Strategy Consulting

Blue
Project 183

Branding, Motion Graphics

Red
Project 184

Branding, Web Design

Yellow
Project 185

Strategy Consulting

Green
Project 186

Branding, Web Design

Blue
Project 187

Branding, Web Design

Blue
Project 188

Branding, Web Design

Yellow
Project 189

Branding, Strategy Consulting

Orange
Project 190

Branding, Strategy Consulting

Green
Project 191

Motion Graphics

Yellow
Project 192

Motion Graphics

Red
Project 193

Branding, Web Design

Red
Project 194

Branding

Red
Project 195

Web Design

Blue
Project 196

Development

Blue
Project 197

Development

Blue
Project 198

Motion Graphics

Red
Project 199

Branding

Yellow
Project 200

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!