Untitled

<html class="">
<head>
<meta charset="UTF-8">
<title>Таблица с сортировкой и фильтром</title>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<style>
.header {
	cursor:pointer;
}
.header:after {
	content:"\e150";
	position:relative;
	top:1px;
	float:right;
	display:inline-block;
	font-family:'Glyphicons Halflings';
	font-style:normal;
	font-weight:400;
	line-height:1;
	-webkit-font-smoothing:antialiased;
	-moz-osx-font-smoothing:grayscale
}

.header.headerSortDown:after {
	content:"\e155";
}

.header.headerSortUp:after {
	content:"\e156";
}

</style>
</head>
<body>
<br>
<hr>
<section class="container">
	<div class="page-header">
		<h1>Таблица с сортировкой и фильтром</h1>
	</div>
	<div class="row col-sm-3 col-sm-offset-9">
		<input class="table-filter form-control" data-table="order-table" placeholder="Фильтр" type="search">
	</div>

	<table class="order-table table-striped table">
		<thead>
			<tr>
				<th>Имя</th>
				<th>Email</th>
				<th>Телефон</th>
				<th>Стоимость</th>
			</tr>
		</thead>
		<tbody>
			<tr >
				<td>Джон До</td>
				<td>[email protected]</td>
				<td>+79081708691</td>
				<td>99</td>
			</tr>
			<tr >
				<td>Джейн Ванда</td>
				<td>[email protected]</td>
				<td>+79876543210</td>
				<td>349</td>
			</tr>
			<tr >
				<td>Альфред Пенивортх</td>
				<td>[email protected]</td>
				<td>+76754328901</td>
				<td>199</td>
			</tr>
		</tbody>
	</table>

</section>
<hr>
<script type="text/javascript" src="http://tablesorter.com/jquery-latest.js"></script>
<script type="text/javascript" src="http://tablesorter.com/__jquery.tablesorter.min.js"></script>
<script>
(function (document) {
    'use strict';
    var LightTableFilter = function (Arr) {
        var _input;
        function _onInputEvent(e) {
            _input = e.target;
            var tables = document.getElementsByClassName(_input.getAttribute('data-table'));
            Arr.forEach.call(tables, function (table) {
                Arr.forEach.call(table.tBodies, function (tbody) {
                    Arr.forEach.call(tbody.rows, _filter);
                });
            });
        }
        function _filter(row) {
            var text = row.textContent.toLowerCase(), val = _input.value.toLowerCase();
            row.style.display = text.indexOf(val) === -1 ? 'none' : 'table-row';
        }
        return {
            init: function () {
                var inputs = document.getElementsByClassName('table-filter');
                Arr.forEach.call(inputs, function (input) {
                    input.oninput = _onInputEvent;
                });
            }
        };
    }(Array.prototype);
    document.addEventListener('readystatechange', function () {
        if (document.readyState === 'complete') {
            LightTableFilter.init();
        }
    });

	$(".order-table").tablesorter();

}(document));
</script>
</body></html>