Общайтесь между PHP и Javascript

Question

У меня есть таблица в базе данных, которая имеет 2 столбца Имя | Возраст, я отображаю его на HTML-странице.

Я хочу отсортировать таблицу в HTML-странице на основе поля, когда пользователь нажимает на нее.

У меня есть функция PHP для сортировки по полю.

Но после получения строк в отсортированном порядке в PHP я ищу способы, с помощью которых я могу обновить таблицу HTML, не отходя от страницы.

Answer 1

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

Для этого есть плагин jQuery, который работает довольно хорошо:

http://tablesorter.com/docs/

Answer 2

Вы можете выполнять сортировку в javascript, не связываясь с сервером. Например, этот код будет сортировать таблицу на основе содержимого N-го столбца:

function sortTable(table, column, skipHeader) {
  // Stick each row into an array.
  var rows = [];
  for (var i = skipHeader ? 1 : 0; i < table.rows.length; i++) {
    rows.push(table.rows[i]);
  }

  // Sort the array based on the innerText of the column'th cell in each row
  rows.sort(function(a, b){ 
    a = a.cells[column].innerText;
    b = b.cells[column].innerText;
    return a < b ? -1 : (b < a ? 1 : 0);
  });

  // Re-order the rows by removing/appending in the sort order
  for (var i = 0; i < rows.length; i++) {
    var row = rows[i];
    var container = row.parentElement;
    container.removeChild(row);
    container.appendChild(row);
  }
}

Например, чтобы отсортировать первую таблицу в документе по первому столбцу и пропустить строку заголовка:

sortTable(document.getElementsByTagName('table')[0], 0, true);

Очевидно, что вы захотите изменить это по своему вкусу, особенно сортировке, но это намного проще, чем отправлять данные обратно на сервер, что я и думаю.

Answer 3

Поскольку другие уже рассмотрели тот факт, что сортировка на стороне клиента будет работать нормально, я просто укажу на ресурс, с которым у меня больше всего получилось сделать такую ​​вещь: Google Data Tables, часть их Библиотека визуализации . Вот deets о том, что вы можете сделать (спойлер: все, что вы хотите и многое другое).

Answer 4

Вот ссылка на библиотеку javascript для сортировки ваших таблиц с использованием javascript вместо php. Я использовал его много раз, он прекрасно работает.

Сортируемые таблицы Javascript: Стюарт Лэнгридж