BloGGood.ru

Блог Костаневича Степана

WordPress, PHP, HTML, CSS, Windows

Блог на разные темы, seo-оптимизация, раскрутка сайта, создание сайта, вкусные эффекты для сайта и многое другое…

Главная » 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>

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

Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓

Получай обновления блога!!! Подпишись:

Популярные статьи:

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

  1. alexsteel

    Здраствуйте
    А если будет это все выводться в цикле на сайте ВП (например на странице архива или таксономии) и будет пагинация … я так понимаю поиск будет работать только на первой странице?

Добавить комментарий

;-) :| :x :twisted: :smokes: :smile: :shock: :sad: :rose: :roll: :razz: :pop-corne: :oops: :o :mrgreen: :lol: :idea: :grin: :gazeta: :evil: :cry: :cool: :coffe: :arrow: :???: :?: :!:

Чтобы добавить в комментарий код HTML, PHP, CSS, JavaScript, нужно сделать так: [code] ваш код [/code]

Метки: , , ,

Мои цели на 2018-2019:

1). Закончить тему «Bootstrap»

2). Закончить тему «Все про PHP и MySQL»

3). Создать портфолио и мини интернет-магазин шаблонов

4). Довести количество статей до 800

5). Добиться посещаемости 3000 человек/сутки

6). Увеличить число подписчиков до 250

Статистика по блогу

Количество записей на блоге: 810
Количество страниц на блоге: 20
Количество рубрик на блоге: 28
Количество меток на блоге: 72
Количество комментариев на блоге: 4716