List.js with Multiple Filters, Search, and Pagination

index.html

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

list-js-with-multiple-filters-search-and-pagination.markdown

List.js with Multiple Filters, Search, and Pagination

A Pen by Whitney Gainer on CodePen.

License.

script.js

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('');
	//console.log('Reset Successfully!');
};
  
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();
	//console.log('Filtered: ' + values_gender);
}
                               
$(function(){
  //updateList();
  $("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()
		}
	});
});

scripts

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/list.js/1.5.0/list.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/list.pagination.js/0.1.1/list.pagination.js"></script>

style.scss

$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;
}

styles

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.1/animate.min.css" rel="stylesheet" />