Главная » Bootstrap » Как сделать поиск и сортировку в таблице на сайте

Как сделать поиск и сортировку в таблице на сайте

2016-12-26 / Вр:23:17 / просмотров: 6985

Всем привет!
Недавно я выложил на блоге статью с кодом «Как сделать поиск в таблице на сайте».
В этой статье вы увидите дополнение, а точнее более продвинутую таблицу с поиском и сортировкой.

Много писать не буду, просто выложу код на скачивание.
Пользуйтесь, экспериментируйте, меняйте.
Этот код отлично сработается на сайтах, которые сделаны на Bootstrap.

Для Bootstrap:

<br />
<div class="container">
<div class="row">
<!-- Таб панель -->
<div>
<div role="tabpanel" class="tab-pane fade in active" id="example2-tab1">
<table id="example2-tab1-dt" class="table table-striped table-bordered table-condensed" cellspacing="0" width="100%">
<thead>
<tr>
<th>Фамилия</th>
<th>Сайт</th>
<th>Телефон</th>
<th>Страна</th>
<th>Статус</th>
</tr>
</thead>
<tbody>
<tr>
<td>Костаневич</td>
<td>BlogGood.ru</td>
<td>+38(093)xxx-xx-xx</td>
<td>Украина</td>
<td>Оплачен</td>
</tr>
<tr>
<td>Морозов</td>
<td>StepkinBlog.ru</td>
<td>+7(812)ххх-хх-хх</td>
<td>Россия</td>
<td>Оплачен</td>
</tr>
<tr>
<td>Барановская</td>
<td>Nocrisise.ru</td>
<td>+38(067)xxx-xx-xx</td>
<td>Украина</td>
<td>Жду оплаты</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>

<script>
$(document).ready(function(){
$('#example2-tab1-dt').DataTable({
responsive: true
});
$('a[data-toggle="tab"]').on('shown.bs.tab', function(e){
$($.fn.dataTable.tables(true)).DataTable()
.columns.adjust()
.responsive.recalc();
});
});
</script>

Подключаем дополнительные скрипты JS и стили CSS:

<link rel="stylesheet" href="datatablestab.min.css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="datatablestab.min.js"></script>

[Посмотреть] || [Скачать архив]