В этом уроке Вы узнаете как сделать красивую таблицу с данными с возможностью сортировки по любому столбцу.
Это довольно полезная штука, особенно когда таблицы очень большие.
Первым делом подключаем стили оформления между тегами :
Внешний вид таблицы можно легко изменить, если покопаться в стилях.
Далее создаем непосредственно саму таблицу:
Вместо многоточия должны быть ряды с информацией. Как Вы видите столбцу ID мы придали класс «nosort», таким образом мы убрали возможность сортировки для него. Всей таблице был присвоен класс «sortable».
Далее идет блок с кнопками навигации по таблице:
Вначале идет настройка отображения количества рядов на странице (по умолчанию стоит 10, но Вы можете выбрать любое значение), далее кнопки ручного перехода со страницы на страницу и текстовая информация о странице, на которой Вы находитесь.
И в конце нам необходимо инициализировать саму функцию сортировки (можно это сделать после таблицы):
Все готово. Пользуйтесь 🙂 Всего наилучшего.
Данный урок подготовлен для вас командой сайта ruseller.com Источник урока: www.leigeber.com Перевел: Максим Шкурупий Урок создан: 25 Мая 2009 Просмотров: 67960 Правила перепечатки
5 последних уроков рубрики «Разное»
Как выбрать хороший хостинг для своего сайта?
Выбрать хороший хостинг для своего сайта достаточно сложная задача. Особенно сейчас, когда на рынке услуг хостинга действует несколько сотен игроков с очень привлекательными предложениями. Хорошим вариантом является лидер рейтинга Хостинг Ниндзя — Макхост.
Проект готов, Все проверено на локальном сервере OpenServer и можно переносить сайт на хостинг. Вот только какую компанию выбрать? Предлагаю рассмотреть хостинг fornex.com. Отличное место для твоего проекта с перспективами бурного роста.
Разработка веб-сайтов с помощью онлайн платформы Wrike
20 ресурсов для прототипирования
Подборка из нескольких десятков ресурсов для создания мокапов и прототипов.
Топ 10 бесплатных хостингов
Небольшая подборка провайдеров бесплатного хостинга с подробным описанием.
HTML-таблицы упорядочивают и выводят на экран данные с помощью строк или столбцов. Таблицы состоят из ячеек, образующихся при пересечении строк и столбцов.
Ячейки таблиц могут содержать любые HTML-элементы, такие как заголовки, списки, текст, изображения, элементы форм, а также другие таблицы. Каждой таблице можно добавить связанный с ней заголовок, расположив его перед таблицей или после неё.
Таблицы больше не используются для вёрстки веб-страниц и компоновки отдельных элементов, потому что такой приём не обеспечивает гибкость структуры и адаптивность сайта, существенно увеличивая HTML-разметку.
Для всех элементов таблицы доступны глобальные атрибуты, а также собственные атрибуты.
Создание таблиц в HTML
1. Как создать таблицу
Например, с помощью данной разметки можно создать таблицу, состоящую из двух столбцов и двух строк:
текст заголовка
текст заголовка
данные
данные
Фигура 1. Внешний вид таблицы без форматирования css-свойствами
По умолчанию таблица и ячейки не имеют видимых границ. Границы задаются с помощью свойства border :
Промежутки между ячейками таблицы убираются с помощью свойства table .
Ширина таблицы по умолчанию равна ширине её внутреннего содержимого. Чтобы установить ширину, нужно задать значение для свойства width :
Если заданы ширина и границы ячеек, то ширина таблицы будет складываться из ширины ячеек плюс ширина border-left и ширина border-right последней ячейки в ряду.
2. Как создать строки (ряды) таблицы
3. Как сделать ячейку заголовка столбца таблицы
4. Как сделать ячейку тела таблицы
5. Как добавить подпись (заголовок) к таблице
Элемент создает подпись таблицы. Добавляется непосредственно после тега
, вне строки или ячейки.
6. Группирование строк и столбцов таблицы
Элемент создает структурную группу столбцов, выделяя логически однородные ячейки. Группирует один или более столбцов для единого форматирования, позволяя применить стили к столбцам вместо того, чтобы повторять стили для каждой ячейки и для каждой строки.
Рис. 2. Выделение столбцов таблицы другим цветом с использованием элементов и
7. Группировка разделов таблицы
Элемент
создает группу заголовков для строк таблицы с целью задания единого оформления. Используется в сочетании с элементамии для указания каждой части таблицы.
Элемент создает группу строк для представления информации о суммах или итогах, расположенную в нижней части таблицы. Используется в таблице один раз. Располагается после элемента
, перед элементамии
.
Такая группировка строк была заложена в стандарте в расчете на то, что обозреватели при отображении длинных таблиц обеспечат прокрутку строк данных при сохранении надзаголовка и подзаголовка неподвижными, а при их выводе на принтер смогут использовать надзаголовок и подзаголовок в качестве колонтитулов страницы. Однако, современные обозреватели этого не делают и либо просто отображают
и как строки данных, либо, в лучшем случае, просто помещают соответствующие строки в начало и конец таблицы.
8. Как объединить ячейки таблицы
Атрибуты colspan и rowspan объединяют ячейки таблицы. Атрибут colspan задает количество ячеек, объединенных по горизонтали, а rowspan — по вертикали.
Рис. 3. Пример объединения ячеек таблицы по горизонтали при помощи атрибута colspan
Здравствуйте, уважаемые читатели блога LifeExample, сегодня мы будем говорить о том, как работает jQuery сортировка таблицы, и попробуем вместе разобраться с этой насущной проблемой каждого веб программиста. Уверен, что если вы еще не сталкивались с задачей сортировки таблицы на JavaScript, то рано или поздно вам это понадобится.
Таблицы в сайтах — это очень нужный и полезный элемент представления информационных данных, и работы с ними. Кроме того, когда-то без таблиц не обходилась ни одна верстка сайта.
Сегодня с появлением различных инструментов, таких как библиотека jQuery, пользователи избалованы интерактивность HTML страниц. Например, для того, чтобы изменить свои личные данные, им не нужно ждать долгой перезагрузки страницы, и можно с легкостью, перетаскивать нужное изображение в отведенную область. И таких примеров куча, одним из примеров интерактивности как раз и является функция сортировки таблицы.
Представим, что у нас есть огромное количество сводной информации, которую мы выдали пользователю в виде HTML таблицы. К примеру, это может быть скрипт, выдающий текущий курс рубля к иностранным валютам.
PHP парсер курсов валют:
Скрипт получает информацию в виде XML файла, с официального сайта Центрального банк Российской Федерации, парсит ее и выводит в виде готовой неотсортированной таблицы HTML.
Так как к теме статьи его работа не относится, я не стану описывать, что конкретно происходит в коде, но если вам интересно, спрашивайте в комментариях.
Сделать сортировку HTML таблицы с помощью библиотеки jQuery очень просто, но мы пойдем еще более простым способом и обратимся к использованию специально плагина для, сортировки таблицы, под названием Tablesorter.
Подключим к вышеприведенному скрипту последнюю версию jQuery и данный плагин. А так же сразу повесим на нашу таблицу событие tablesorter.
Давайте еще установим некоторые css стили для лучшей наглядности
Выполненных операций должно быть достаточно, чтобы jQuery сортировка таблицы заработала должным образом. Попробуем проверить и запустим скрипт. Вот что должно получиться:
Как видите в заголовках колонок, не только появились иконки для сортировки, но и фон строк начал чередоваться, придавая таблице удобный для работы вид.
Чередование строк в сортировочной таблице можно отменить, если не указывать в функции события, параметр:
Так как именно он отвечает за чередование классов строк.
На данном этапе можно успокоиться и оставить все как есть, но вскоре мы поймем, что для работы с таблицей неплохо было бы иметь систему пагинации, т.е. разбивать имеющийся набор строк таблицы на части, и переключаться между ними.
Пагинация таблицы
Как это ни странно но, и эта задача решается очень просто при использовании, очередного, плагина пагинации.
Скачайте плагин пагинации на jQuery для сортировочной таблицы:
Подключим его в коде скрипта
Добавим элементы для пайджера:
Немного изменим JavaScript:
И вот у нас уже все готово:
Вот так вот, малой кровью, можно организовать сортировку таблицы по столбцам. Стоит заметить, что не каждая таблица подойдет плагину Tablesorter! Необходимо, чтобы сортировочная таблица была построена по всем HTML правилам, а именно содержала в своей конструкции теги такой структуры:
В завершении статьи «jQuery сортировка» таблицы, я бы хотел предложить вам полную версию разработанного скрипта:
Читайте также похожие статьи:
Чтобы не пропустить публикацию следующей статьи подписывайтесь на рассылку по E-mail или RSS ленту блога.
В статье я покажу стандартную табличную разметку, какие у неё есть альтернативы. Дам пример собственной таблицы и разметки, а также опишу общие моменты её реализации.
Стандартная HTML4 таблица
Когда появилась необходимость в HTML разметке показывать таблицы — изобрели тег
. Что же даёт нам таблица в браузере? Вот несколько основных «фич»:
Если мы не указали ширину таблицы/столбцов, то ширина таблицы подстраивается и растягивается, чтобы вместить содержимое любого из столбцов.
В данном случае вычисляется процентное соотношение каждого столбца к общей ширине и каждый столбец растягивается соответственно процентному соотношению.
Так мы ломаем автоподстройку ширины таблицы и теперь таблица слушается заданных ширин для каждого столбца (или всей таблицы), но зато таблица точно вписывается в указанную ширину.
Использование стандартной таблицы
Во всех вышеприведенный примерах в разметке таблицы я использовал сокращенную разметку:
Однако можно использовать «каноничную» разметку:
Если нужна таблица без шапки и в то же время нам необходимо контроллировать ширину столбцов:
Чаще всего нам в разметке необходимо получить следующее. У нас есть некий контейнер с заданной шириной или с заданной максимальной шириной. Внутри него мы хотим вписать таблицу.
Если ширина таблицы больше чем контейнер, тогда необходимо показывать скролл для контейнера. Если ширина таблицы меньше чем контейнер, тогда необходимо расширять таблицу до ширины контейнера.
Но ни в коем случае мы не хотим, чтобы таблица сделала наш контейнер шире чем мы задали.
По этой ссылке можно уведеть контейнер с таблицей в действии. Если мы будем сужать контейнер, то в тот момент, когда таблица уже больше не сможет сужаться — появиться скролл.
Подстройка таблицы
Задание ширины таблицы и столбцов
Первая дилемма с которой сталкиваются фронт-энд разработчики — это задавать или не задавать ширину столбцов.
Если не задавать, тогда ширина каждого столбца будет вычисляться в зависимости от содержимого.
Исходя из логики, можно понять, что в этом случае браузеру нужно два прохода. На первом он просто отображает все в таблице, подсчитывает ширину столбцов (мин, макс). На втором подстраивает ширину столбцов в зависимости от ширины таблицы.
Со временем вам скажут что таблица выглядит некрасиво, т.к. один из столбцов слишком широкий и
И самая распространенная «фича»:
Первое разочарование, что если не задавать ширину столбцов, то сокращение не работает. В этом есть своя логика, т.к. на первом проходе браузер высчитывает мин/макс ширину колонки без сокращения, а тут мы пытаемся сократить текст. Необходимо либо все пересчитать повторно, либо игнорировать сокращение.
Сокращение реализуется просто, необходимо указать CSS свойства для ячейки:
И соответственно задать ширину колонки. По этой ссылке можно увидеть, что все настроено, но сокращение не работает.
В спецификации есть заметка, немного объясняющая, почему сокращение не работает:
Опять же сужаться таблица будет до минимальной ширины содержимого. Но если применить свойство table-layout: fixed то таблица начнёт «слушаться» и сокращение заработает. Но автоподстройка ширины столбцов уже не работает.
Задание прокрутки таблицы
Вышеприведенный пример будет работать со скроллом и пользоваться этим можно. Однако возникает следующее требование:
Вторая дилемма с которой сталкиваются фронт-энд разработчики:
В спецификации таблицы есть прямое указание, что тело таблицы может быть с шапкой и подвалом. Т.е. шапка и подвал всегда видимы.
А есть и указание о том, что тело таблицы можно скроллить, а шапка и подвал будут оставаться на месте:
А по факту браузеры этого не делают и скролл для таблицы необходимо придумывать/настраивать вручную.
Есть много способов это сделать, но все они сводяться к тому, что:
Этот вариант, где все предлагают/строят решения.
Примеры составных таблиц
Если нам необходима прокрутка тела таблицы, то без составных разметок не обойтись. Все примеры составных таблиц используют свои пользовательские разметки.
Одна из самых известных таблиц Data Tables использует следующую разметку:
Я намеренно сокращаю разметку, чтобы можно было составить общую картину, как выглядит разметка.
Мы видим в разметке две таблицы, хотя для пользователя это «видится» как одна. Следующий пример React Bootstrap Table, если посмотреть в разметку, использует тоже две таблицы:
Верхняя таблица отображает шапку, нижняя — тело. Хотя для пользователя кажется как будто бы это одна таблица.
Опять же пример использует синхронизацию прокрутки, если прокрутить тело таблицы, то произойдет синхронизация шапки.
А как же так получается, что тело таблицы (одна таблица) и шапка (другая таблица) подстраиваются под ширину контейнера и они никак не разъезжаются по ширине и совпадают друг с другом?
Тут кто как умеет так и синхронизирует, например, вот функция синхронизации ширины из вышеприведенной библиотеки:
Возникает вполне логичный вопрос, а зачем тогда вообще использовать тег
, если используется только автоподстройка ширины из стандартной таблицы?
И тут мы окажемся не первыми, некоторые вообще не используют табличную разметку. Например Fixed Data Table или React Table.
Разметка в примерах примерно такая:
Следующая таблица Reactabular использует интересный подход в синхронизации.
Автор пошел дальше и сделал прокручиваемым не только тело, но и шапку таблицы. В браузерах которые показывают ползунок скролла — выглядит ужасно, зато в touch браузерах очень классно и функционально.
Если мы скроллим тело таблицы, то происходит синхронизация шапки, а если мы скроллим шапку, то происходит синхронизация тела.
А как же сделать автоподстройку ширины колонки в составной таблице спросите вы? Вот интересный способ использовать дополнительный проход браузера. Например в этой таблице ag Grid можно автоматически рассчитать подходящую ширину столбца.
Реализация собственной таблицы
Получается, что составная таблица требует дополнительной синхронизации между частями, чтобы для пользователя все вместе казалось как одна таблица.
Все составные таблицы (и моя) страдают недостатком, у них нет стандарта как их кастомизировать/настраивать (и это логично, т.к. при реализации отказались от HTML4 таблицы).
Когда ты начинаешь изучать одну составную таблицу, потом начинаешь тратить время на её кастомизацию.
Затем для другого проекта изучаешь другую таблицу (например при переходе с Angular1 на React, или с jQuery на Vue), а кастомизация совсем другая.
Возникает логичный вопрос, а стоит ли потраченное время того? Стоит ли учить снова и снова связку фреймворк-таблица?
Может легче освоить для себя базовые моменты составной таблицы и тогда вы сможете делать свою таблицу на любом фреймворке (Angular/React/Vue/будущее. )? Например, на свою таблицу вы будете тратить 2 дня на старт, потом в течении 30 мин кастомизировать.
А можно подключить готовую фреймворк-таблицу за 30 мин и потом кастомизировать каждую фичу за 1 день.
К премеру, я покажу как сделать свою составную таблицу на React.
Дальше будет объяснение только некоторых аспектов разработки, можете сразу посмотреть результат.
Разметка
Для разметки будем использовать div элементы. Если использовать display: inline-block для ячеек, тогда будет следующая разметка:
Но есть одна проблема — браузер (не все браузеры) интерпретирует пустые места между ячейками как текстовые ноды.
Есть отличная статья, как с этим бороться.
И если мы используем шаблонизатор (EJS, JSX, Angular, Vue), то это легко решить:
Однако уже 2017 год, flexbox давно поддерживается, я делал на нем проекты еще в 2014 для IE11.
А сегодня можно вообще не стесняться его. Это упростит нам задачу, можно будет делать столько пустых нод, сколько нужно:
Общие моменты использования
Мне этот подход не нравится. По моему мнению, разработчик должен контроллировать процесс сортировки, фильтрации. Это требует дополнительного кода.
Вместо такого «черного ящика», который потом сложно кастомизировать:
разработчик должен будет писать:
Разработчик должен сам прописывать шаги: вычислить описание колонок, отфильтровать, отсортировать.
Все функции/конструкторы getColumnDescriptions, filterBy, sortBy, TableHeader, TableBody, TableColumn будут импортироваться из моей таблицы.
В качестве данных будет использоваться массив объектов:
Мне понравился подход создания описания колонок в jsx в качестве элементов.
Будем использовать ту же идею, однако, чтобы сделать независимыми шапку и тело таблицы, будем вычислять описание один раз и передавать его и в шапку и в тело:
В функции getTableColumns мы создаем описание колонок.
Обязательно указываем row — число, которое показывает индекс строки в шапке (если шапка будет группироваться).
Ширина width тоже обязательный параметр, может задаватся как числом или как массивом ключей от которых зависит ширина.
Элемент TableColumn «фейковый», он никогда не будет отображаться, а вот его содержимое this.props.children — отображается в ячейке шапки.
Разработка
На основе описаний колонок сделаем функцию, которая будет разбивать описания по рядам и по ключам, а также будет сортировать описания по рядам в результирующем массиве:
Теперь обработанные описания передаём в шапку и в тело для отображения ячеек. Шапка будет строить ячейки так:
Тело таблицы будет строить ячейки тоже на основе обработанных описаний колонок:
Тело таблицы будет слушать события изменения размеров экрана, а также прокрутки самого тела таблицы:
Подстройка ширины таблицы происходит следующим образом.
После отображения берётся ширина контейнера, сравнивается с шириной всех ячеек, если ширина контейнера больше, увеличивается ширина всех ячеек.
Для этого разработчик должен хранить состояние коэффициента ширины (который будет меняться).
Следующие функции реализованы в таблице, однако разработчик может использовать свои. Чтобы использовать уже реализованные, необходимо их импортировать и прилинковать к текущему компоненту:
Функция подстройки ширины:
Функция синхронизация шапки:
Ключевая особенность таблицы для redux — это то, что она не имеет своего внутреннего состояния (она должна иметь состояние, но только в том месте, где укажет разработчик).
И подстройка ширины adjustBody и синхронизация скролла adjustScroll — это функции которые изменяют состояние у прилинкованного компонента.
Внутрь TableColumn можно вставлять любую jsx разметку. Зачастую используются такие варианты: текст, кнопка сортировки и кнопка фильтрации.
Для массива активных сортировок/фильтраций разработчик должен создать состояние и передавать его в таблицу.
Передаем в таблицу массив активных сортировок/фильтраций:
Компонент сортировки SortButton и компонент фильтрации MultiselectDropdown при изменении «выбрасывают» новые активные фильтры/сортировки, которые разработчик должен заменить в состоянии. Массивы activeSorts и activeFilters как раз и предполагают, что возможна множественная сортировка и множественная фильтрация по каждой колонке.
К сожалению, формат статьи не позволяет описать всех тонкостей, поэтому предлагаю сразу посмотреть результат.
Итого разработчику в таблице необходимо:
Все это я реализовал в примере. Надеюсь теперь, при переходе на новый фреймворк, у вас как минимум появился выбор — брать готовую или сделать свою таблицу.
Рис. 2. Выделение столбцов таблицы другим цветом с использованием элементов и
Рис. 3. Пример объединения ячеек таблицы по горизонтали при помощи атрибута colspan
