Ajax редактирование значение в ячейке прямо в таблице

В данном примере я покажу, как сделать любую таблицу редактируемой. Чтобы можно было кликнуть по значению любого поля в таблице и отредактировать значение, сохранив его прямо в Базу MySQL (в моём примере).

Для редактирования записи из поля в таблице с использование Ajax, нам потребуются следующие атрибуты:

  1. Наименование таблицы, значение поля которой мы будем обновлять.
  2. Наименование поля в таблице, которое мы будем обновлять.
  3. ID записи из этой таблицы.
  4. Значение поля, которое надо записать в таблицу.

Реализация задачи разделится на несколько этапов:

  1. Подготовка таблицы и полей для редактирования с использованием Ajax.
  2. Подготовка Скрипта (javascript), который сделает ячейку таблицы редактируемой, и передаст нужные нам параметры таблицы и полей в обработчик.
  3. Подготовка обработчика, который получит значения, переданные из скрипта и обновит поле в базе данных (MySQL в моём случае)

 

Подготовка таблицы и полей для реализации Ajax обновления значения поля.

Для моего примера нам потребуется указать ID таблицы следующим образом

 

Где:

  • orders — наименование таблицы в базе данных
  • orderID — наименование столбца, определяющего ID наших записей в таблице (ключ)

остальные параметры вашей таблицы могут быть любыми.

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

Где:

  • edit — класс поля, по которому наш будущий скрипт определит, что поле редактируемое.
  • opstatus — наименование поля в таблице в базе данных, которое мы будем редактировать. (в моём примере — Статус)
  • {$product[‘orderProductID’]} — в моём случае и примере — 146
    ( вывод значения поля в цикле вывода PHP скрипта,  на странице будет ID нужно нам записи в таблице. )
    Вывод в вашем примере может отличаться, главное, чтобы на странице class вашего поля <td> имел следующий вид:

     

По такому же примеру задаём класс для каждой ячейки таблицы, которую мы хотим сделать редактируемой.

Вот пример моей таблицы:

Таблица готова — переходим к подготовке скрипта.

 

Подготовка JavaScript для обработки событий для обновления данных без перезагрузки страницы ( Ajax )

Создайте в папке с вашими скриптами файл script.js и добавьте следующее содержимое, можно просто вставить данный скрипт прямо на страницу с нашей таблицей. Если файл отдельный его нужно «вызвать» в нашем файле с таблицей вот таким образом:

<?php include(«scripts.php»); ?> — лучше вызывать скрипт в самом конце PHP файла, перед закрывающим тэгом </body>

Подготовка обрабатывающего скрипта

Итак, мы сделали таблицу, в которой указали что будем передавать в базу данных для обновления, создали скрипт, который перехватывает введённое значение и передаёт в обработчик. Теперь осталось сделать обработчик передаваемых в базу данных параметров.

Создайте файл save_product.php (если имя файла будет другим или вы просто добавите функцию обновления в существующий у вас файл, переименуйте его в скрипте)

содержимое файла save_product.php:

! обратите внимание на синтаксис, кавычки, апострофы  — это важно  !

Вот и всё, теперь все поля, которые имеют class — edit —  редактируемые. Если кликнуть по ним появляется поле для редактирования, после нажатия Enter — запись сохраняется.

Если что-то не получается пишите в комментариях — я обязательно помогу!

Параметры соединения с базой данных