DataTable Tests

by Neviton

HTML

<link rel="stylesheet" href="https://cdn.datatables.net/v/bs/jqc-1.12.3/dt-1.10.12/datatables.css">
<script src="https://cdn.datatables.net/v/bs/dt-1.10.12/datatables.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/awesome-bootstrap-checkbox/0.3.7/awesome-bootstrap-checkbox.css">
<div class="container">
<div class="table-responsive">
<table id="dt" class="table table-striped table-hover">
	<thead>
		<tr>
			<th>Heading 1</th>
			<th>
				<div class="btn-group">
				 <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
				   Heading 2
				 </button>
				 <ul class="dropdown-menu">
					<li>
						<div class="checkbox">
							<input type="checkbox" id="checkbox1" class="styled" name="filter" value="Laboriosam quasi"><label for="checkbox1">Laboriosam quasi</label>
						</div>
					</li>
					<li>
						<div class="checkbox">
							<input type="checkbox" id="checkbox2" class="styled" name="filter" value="lorem"><label for="checkbox2">lorem</label>
						</div>
					</li>
					<li>
						<div class="checkbox">
							<input type="checkbox" id="checkbox3" class="styled" name="filter" value="odio"><label for="checkbox3">odio</label>
						</div>
					</li>
					<li>
						<div class="checkbox">
							<input type="checkbox" id="checkbox4" class="styled" name="filter" value="tenetur"><label for="checkbox4">tenetur</label>
						</div>
					</li>
					<li>
						<div class="checkbox">
							<input type="checkbox" id="checkbox5" class="styled" name="filter" value="dicta"><label for="checkbox5">dicta</label>
						</div>
					</li>
					<li>
						<div...

CSS

.dropdown-menu {
	height: 70px;
	/*min-height: 100px;*/
	overflow-x: auto;
}

ul.pagination > li.previous > a,
ul.pagination > li.next > a {
    font-family: FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
}

JavaScript

$(document).ready(function(){
    var table = $('#dt').DataTable({
		lengthChange: false,
		searching: true,
		ordering: false,
		info: false,
		pageLength: 2,
		dom: 'lrtip',
		sPaginationType: 'full_numbers',
		language: {
			paginate: {
				first: '<i class="fa fa-angle-double-left"></i>',
				last: '<i class="fa fa-angle-double-right"></i>',
				previous: '<i class="fa fa-angle-left"></i>',
				next: '<i class="fa fa-angle-right"></i>'
			}
		}
	});
	
	$('input[name=filter]').on('click', function() {
		var $checkboxes = $('input[name=filter]:checked'),
			filters = '';
		$checkboxes.each(function(index, checkbox) {
		 	if (index > 0) {
				filters += '|';
			}
			
			filters += checkbox.value;
		});
		
		console.log(filters);
		table.search(filters, true, false).draw();
	})
});