Как я могу просто сделать мою таблицу HTML «динамической»?

Question

Я пишу Multimarkdown из Perl для создания таблицы HTML.

Интересно, есть ли простой способ сделать таблицу динамической, то есть позволить зрителю отсортировать ее, щелкнув заголовок столбца, или даже отфильтровать записи, введя простое правило.

Я действительно не знаю HTML. Я пишу на Perl и генерирую только HTML (на самом деле, Multimarkdown конвертируется в HTML) для приятного вывода некоторых данных. Я упоминаю об этом, поскольку уверен, что есть разные способы создания красивых динамичных таблиц, но я действительно ищу простой.

Answer 1

Простой способ *1002* состоит в том, чтобы использовать инструментарий / библиотеку, которая уже поддерживает такие функции.

(быстрый поиск в Google для "сортировки таблицы JavaScript" обнаружен Таблица с сортировкой / фильтрацией из JavaScript Toolbox , Сортировка таблиц HTML с использованием JavaScript (более подробно) и Плагин jQuery: Tablesorter 2.0 .)

AJAX - это один механизм, который можно использовать для динамического извлечения данных - однако, если все данные уже присутствуют в таблице и / или таблица не нуждается в разбивке по страницам, то это излишнее.Оба эти метода требуют , чтобы на стороне клиента был включен JavaScript.(Альтернативой, не относящейся к стороне клиента, будет постбэк и работа сервера и генерация нового HTML. Но это так, Web-one-point-oh: -)

CSS (Каскадный стильSheets) только для применения стилей, таких как цвета, фоновое изображение, шрифты или границы и т. Д. (Селекторы CSS могут работать на основе классов CSS, которые часто предоставляются в элементе HTML атрибут класса . Документацияпросто заявляет, что некоторые предопределенные имена классов CSS динамически добавляются - с помощью JavaScript - и, таким образом, могут быть легко «выбраны» для стилизации - например, превращение отсортированного столбца в зеленый цвет). Сам CSS, однако, не может управлять сортировкой или фильтрацией.

Даксим предложил сортируемую Стюартом Ленгриджем , которая обсуждается в следующем вопросе SO: howвыполнить сортировку на стороне клиента с помощью строки запроса в гиперссылке, связанной с заголовком таблицы, используя Perl? (перейдите туда, если это изменение было полезным: -)

Счастливое кодирование.

Answer 2

Я использовал код ниже:

$sql= "select * from table";
$sth = $dbh->prepare($sql);
$sth->execute() or die "Cannot execute sth: $DBI::errstr";
my $fields = join(',', @{ $sth->{NAME} });
my @th = split(',',$fields);
print '<table><thead><tr>';
foreach(@th){
  print '<th>'.$_.'</th>';
}
print '</tr></thead><tbody>';
while (my @next_row_fields = $sth->fetchrow_array()) {
  print '<tr>';
  foreach(@next_row_fields){
    print '<td>'.$_.'</td>';
  }
  print '</tr>';
}
print '</tbody></table>';

Answer 3

Элемент управления датами Yahoo YUI имеет встроенную сортировку столбцов.

YUI имеет множество функций js, которые вы можете просто вызвать и использовать.

Answer 4

JQuery - это библиотека Javascript, которая позволяет вам выполнять все виды аккуратного интерфейса, включая сортировку таблиц. С ним неплохо работать (вроде php), и вам не нужно много знать о html / css (хотя это никогда не повредит).

http://jquery.com/