List.js is a powerful JavaScript library for adding search, sort, and filtering capabilities to HTML lists. In this guide, we will create an interactive user list with multiple filters, search functionality, and pagination using List.js.
Step 1: HTML Structure
First, define the HTML structure with a search input, radio buttons for filters, and a list of users:
<div class="container">
<div class="row">
<div id="users" class="col-xs-12">
<div class="filter-group row">
<div class="form-group col-xs-12 col-sm-12 col-md-4">
<input type="text" class="search form-control" placeholder="Search" />
</div>
<div class="form-group col-xs-12 col-sm-12 col-md-4">
<div class="radio-inline">
<label>
<input class="filter-all" type="radio" value="all" name="gender" id="gender-all" checked /> All
</label>
</div>
<div class="radio-inline">
<label>
<input class="filter" type="radio" value="female" name="gender" id="gender-female" /> Female
</label>
</div>
<div class="radio-inline">
<label>
<input class="filter" type="radio" value="male" name="gender" id="gender-male" /> Male
</label>
</div>
</div>
<div class="form-group col-xs-12 col-sm-12 col-md-4">
<div class="radio-inline">
<label>
<input class="filter" type="radio" value="Blvd" name="address" id="address-all" /> Boulevard
</label>
</div>
<div class="radio-inline">
<label>
<input class="filter" type="radio" value="St" name="address" id="address-street" /> Street
</label>
</div>
<div class="radio-inline">
<label>
<input class="filter" type="radio" value="Dr" name="address" id="address-drive" /> Drive
</label>
</div>
</div>
<div class="form-group col-xs-12 col-sm-12">
<button class="btn btn-danger" onclick="resetList();">Clear</button>
</div>
</div>
<ul class="list">
<li class="list--list-item" data-gender="male">
<h3 class="name">Jonny Wayne</h3>
<p class="born">1986</p>
<p class="address">13 Oak St.</p>
</li>
<li class="list--list-item" data-gender="male">
<h3 class="name">Jonas</h3>
<p class="born">1985</p>
<p class="address">3 Main N Ave.</p>
</li>
<li class="list--list-item" data-gender="male">
<h3 class="name">Jonas</h3>
<p class="born">1985</p>
<p class="address">123 Main St.</p>
</li>
<li class="list--list-item" data-gender="male">
<h3 class="name">Jonas</h3>
<p class="born">1985</p>
<p class="address">953 Lake Square</p>
</li>
<li class="list--list-item" data-gender="female">
<h3 class="name">Martina</h3>
<p class="born">1986</p>
<p class="address">1313 Deadend Dr.</p>
</li>
<li class="list--list-item" data-gender="male">
<h3 class="name">Gustaf</h3>
<p class="born">1983</p>
<p class="address">24 Busch Blvd.</p>
</li>
</ul>
<div class="no-result">No Results</div>
<ul class="pagination"></ul>
</div>
</div>
</div>
<script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.min.js"></script>
Step 2: SCSS Styling
Next, add the SCSS to style the list and its elements:
$BorderColor: #cccccc !global;
.container {
margin-top: 30px;
margin-bottom: 30px;
}
.list {
list-style-type: none;
padding: 0;
margin: 0;
}
.list--list-item {
padding-bottom: 20px;
margin-bottom: 20px;
border-bottom: 1px solid $BorderColor;
&:last-child {
border-bottom: 0;
margin: 0;
}
}
.no-result {
display: none;
}
Step 3: JavaScript Functionality
Finally, implement the JavaScript to enable filtering, searching, and pagination:
var options = {
valueNames: [
'name',
'born',
'address',
{ data: ['gender'] }
],
page: 3,
pagination: true
};
var userList = new List('users', options);
function resetList(){
userList.search();
userList.filter();
userList.update();
$(".filter-all").prop('checked', true);
$('.filter').prop('checked', false);
$('.search').val('');
};
function updateList(){
var values_gender = $("input[name=gender]:checked").val();
var values_address = $("input[name=address]:checked").val();
console.log(values_gender, values_address);
userList.filter(function (item) {
var genderFilter = false;
var addressFilter = false;
if(values_gender == "all") {
genderFilter = true;
} else {
genderFilter = item.values().gender == values_gender;
}
if(values_address == null) {
addressFilter = true;
} else {
addressFilter = item.values().address.indexOf(values_address) >= 0;
}
return addressFilter && genderFilter;
});
userList.update();
}
$(function(){
$("input[name=gender]").change(updateList);
$('input[name=address]').change(updateList);
userList.on('updated', function (list) {
if (list.matchingItems.length > 0) {
$('.no-result').hide();
} else {
$('.no-result').show();
}
});
});
Result:
By following these steps, you can create a dynamic, filterable list with search and pagination functionalities using List.js. This setup allows users to easily filter and find items in a large list, improving the user experience significantly.
Top comments (0)