редактируемая таблица php mysql js

Ajax редактирование таблиц и табличных данных

Ссылка на исходники обновлена 25.06.2020 (пока без комментариев)

Привет тебе дорогой читатель, сегодня мы немного поговорим об инлайновом редактировании данных в таблицах без перезагрузки страницы (inline edit ajax).

Как я уже сказал, передо мной встала задача редактирования данных в таблицах. После непродолжительных поисков нашел подходящий вариант, который не использует дополнительные плагины и библиотеки кроме самой jQuery. А таких на самом деле вагон и целая тележка и у каждого есть свои преимущества и недостатки. Один из самых неплохих по функционалу — jqGrid, но о нём мы поговорим в следующий раз.

Представим, что наши данные, по умолчанию, хранятся в базе. В моём примере это будет MySql, обновляться они будут с помощью JS и PHP по технологии AJAX.

AJAX, Ajax (ˈeɪdʒæks, от англ. Asynchronous Javascript and XML — «асинхронный JavaScript и XML») — подход к построению интерактивных пользовательских интерфейсов веб-приложений, заключающийся в «фоновом» обмене данными браузера с веб-сервером. В результате, при обновлении данных веб-страница не перезагружается полностью, и веб-приложения становятся быстрее и удобнее.

Итак обсудим то, что у нас имеется, и то, что мы хотим получит в итоге

Исходные данные:

ТаблицЫ с данными, которые генерируются на PHP, запросом из нашей базы данных.
Допустим у нас есть две таблицы: клиенты (clients) и сотрудники (workers)
Поля наших таблиц на самом деле неважно какие, но возьмём для примера такие:

Необходимый результат:

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

Что нам для этого потребуется?

Приступим к выполнению нашей задачи

Далее присваиваем нашей таблице уникальный идентификатор id, который соответствует названию таблицы в базе (это важно!).
Выводим все строки циклом и присваиваем строкам класс — edit, класс с названием столбца в БД и числовой класс с идентификатором строки в БД.

Далее нам необходим скрипт, который позволит редактировать данные в таблице. Как он работает, я опишу комментариями к каждой строке ниже в коде

Итак форма для редактирования текста у нас появилась, что же мы с ней будем делать дальше?
Теперь нам необходимо сохранять введенные данные при каком то событии, я приведу пример сохранения данных при нажатии Enter.

Также для удобства, добавляем несколько строчек кода, которые убирают наш input при нажатии вне поля ввода, ведь мы можем не захотеть сохранять введенную информацию.

Вам остаётся только обработать полученные данные в файле update_cell.php, все необходимые переменные у Вас есть, пусть это будем вашей самостоятельной работой.
Таким образом мы получаем компактный, универсальный скрипт для быстрого редактирования любых табличных данных.

Если кому нужны будут полные исходники моего варианта скрипта — пишите в коменты.

Дополнение №1

Источник

UPDATE. Редактирование записей в таблице базы данных MySQL

Команда UPDATE

Часто возникает необходимость изменения информации, хранящейся в базе данных. С помощью команды UPDATE вы сможете обновлять данные одной или нескольких колонок в каждой записи таблицы.

Синтаксис запроса на обновление данных.

Для примера заполним таблицу books для хранения книг из условной базы данных Bookstore, которую мы создали в одном из предыдущех постов.

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

Посмотрим какие данные сейчас хранятся в колонках id, title, author, price, discount, amount таблицы books для первых 5 записей.

mysql> SELECT id, title, author, price, discount, amount FROM books LIMIT 5;
+—-+—————————+——————-+———+———-+———+
| id | title | author | price | discount | amount |
+—-+—————————+——————-+———+———-+———+
| 1 | Дубровский | Александр Пушкин | 230.00 | 0 | 4 |
| 2 | Нос | Николай Гоголь | 255.20 | 0 | 7 |
| 3 | Мастер и Маргарита | Михаил Булгаков | 240.50 | 0 | 10 |
| 4 | Мёртвые души | Николай Гоголь | 173.00 | 0 | 3 |
| 5 | Преступление и наказание | Фёдор Достоевский | 245.00 | 0 | 3 |
+—-+—————————+——————-+———+———-+———+
5 rows in set (0.00 sec)

Обновим цену, процент скидки и уменьшим количество на 2 для книги с идентификатором 3.

Теперь проверим как обновились данные.

mysql> UPDATE books
-> SET price=263.00, discount=10, amount=amount-2
-> WHERE id=3;
Query OK, 1 rows affected (0.00 sec)
Rows matched: 1 Changed: 1 Warnings: 0

mysql> SELECT id, title, author, price, discount, amount FROM books LIMIT 5;
+—-+—————————+——————-+———+———-+———+
| id | title | author | price | discount | amount |
+—-+—————————+——————-+———+———-+———+
| 1 | Дубровский | Александр Пушкин | 230.00 | 0 | 4 |
| 2 | Нос | Николай Гоголь | 255.20 | 0 | 7 |
| 3 | Мастер и Маргарита | Михаил Булгаков | 263.00 | 10 | 8 |
| 4 | Мёртвые души | Николай Гоголь | 173.00 | 0 | 3 |
| 5 | Преступление и наказание | Фёдор Достоевский | 245.00 | 0 | 3 |
+—-+—————————+——————-+———+———-+———+
5 rows in set (0.00 sec)

Обновление данных для нескольких записей в MySQL

Используя команду WHERE можно задавать сразу несколько записей для обновления данных.

Попробуем добавить скидку в 5% для всех книг под авторством Николая Гоголя, а также в название книги добавим слово «(Акция)».

Запрос на обновление данных, в этом случае, будет выглядеть так:

В результате получим следующие изменения.

mysql> UPDATE books
-> SET discount=5, title=CONCAT(title, » (Акция)» )
-> WHERE author= «Николай Гоголь» ;
Query OK, 2 rows affected (0.00 sec)
Rows matched: 2 Changed: 2 Warnings: 0

mysql> SELECT id, title, author, price, discount, amount FROM books LIMIT 5;
+—-+—————————+———————+———+———-+———+
| id | title | author | price | discount | amount |
+—-+—————————+———————+———+———-+———+
| 1 | Дубровский | Александр Пушкин | 230.00 | 0 | 4 |
| 2 | Нос (Акция) | Николай Гоголь | 255.20 | 5 | 7 |
| 3 | Мастер и Маргарита | Михаил Булгаков | 263.00 | 10 | 8 |
| 4 | Мёртвые души (Акция) | Николай Гоголь | 173.00 | 5 | 3 |
| 5 | Преступление и наказание | Фёдор Достоевский | 245.00 | 0 | 3 |
+———+—————————+———————+———+———-+———+
5 rows in set (0.00 sec)

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

mysql> UPDATE books SET price=103.90, title= «Барышня-крестьянка» ;
Query OK, 5 rows affected (0.00 sec)
Rows matched: 5 Changed: 5 Warnings: 0

mysql> SELECT id, title, author, price, discount FROM books LIMIT 5;
+—-+————————+———————+———+———-+
| id | title | author | price | discount |
+—-+————————+———————+———+———-+
| 1 | Барышня-крестьянка | Александр Пушкин | 103.90 | 0 |
| 2 | Барышня-крестьянка | Николай Гоголь | 103.90 | 5 |
| 3 | Барышня-крестьянка | Михаил Булгаков | 103.90 | 10 |
| 4 | Барышня-крестьянка | Николай Гоголь | 103.90 | 5 |
| 5 | Барышня-крестьянка | Фёдор Достоевский | 103.90 | 0 |
+—-+————————+———————+———+———-+
5 rows in set (0.00 sec)

Как обновить записи в таблице базы данных MySQL с помощью PHP (PDO)

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

Источник

MnogoBlog

как создать сайт на wordpress, настроить и оптимизировать wordpress

Создаём и редактируем таблицы MySQL с помощью PHP

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

Для тестирования нижеуказанного кода можно использовать плагин – Hello (скачать данный плагин по этой ссылке) – в нем нижеуказанный код закомментирован (с помощью /* и */).
Можете установить и активировать плагин hello, далее зайти в админке в пункт “Плагины”, подпункт “Редактор”, выбрать плагин hello, разкомментировать нужный код и протестировать изменения с помощью phpMyAdmin.

Грамотно разработанный сайт залог успеха Вашего бизнеса в Сети. Чтобы создать сайт, который будет корректно представлять ваш бренд нужно обратиться к профессионалам своего дела –
здесь на базе платформы «1С-Битрикс» Вам помогут создать и осуществить продвижения сайта любой сложности.

1. Создаём таблицу MySQL:

1.1. Подключаемся к базе данных MySQL:

Вот мой тестовый сайт со следующими данными:

Вставляем данные в код и получим следующее:

1.2. Добавим новую таблицу в существующую базу данных MySQL:

Создадим новую таблицу “store_details”.

В таблице будет 4 столбца:

ID – этот столбец будет первичным ключом для таблицы
store_name
store_owner
store_country

Для столбца ID будет использоваться целочисленный тип данных (тип int), в то время как остальные столбцы будут установлены на строковый тип данных, а именно – varchar(255) – по желанию можете установить другие типы.

Vы добавили таблицу с названием store_details в нашу базу данных MySQL, теперь если мы зайдем в phpMyAdmin:

, то увидим, что появилась новая таблица store_details:

, давайте же приступим к её наполнению.

2. Вставляем данные в таблицу базы данных MySQL с помощью PHP:

2.1. Проверяем подключение к базе данных:

2.2. Вставляем данные в таблицу:

Добавим в таблицу store_details новую строку со следующими данными для столбцов:
MyShop (столбец store_name)
Kostya (столбец store_owner)
Russia (столбец store_country)
Первый столбец (“ID”) оставим без изменений – он будет заполняться автоматически.

Код, который мы будем использовать:

Каждый новый php запрос будет создавать новую строку в таблице.

Давайте запустим вышеуказанный код несколько раз и посмотрим, что получится.

Заходим в phpMyAdmin, выбираем нашу таблицу – store_details

Как видим у нас создалось несколько одинаковых строк.

3. Как извлечь данные из таблицы MySQL:

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

Наша таблица store_details выглядит следующим образом:

Предположим, что мы знаем название нашего магазина – “MyShop” и хотим вывести имя владельца магазина (столбец store_owner) и страну магазина (столбец store_country).

Мы будем использовать имя магазина (“MyShop”) в качестве условия для поиска по таблице – условие будет выглядеть так:
“найти строку со столбцом “store_name” в значении MyShop” и получить значения для других столбцов в этой строке”.

3.1. Проверяем подключение к базе данных:

3.2. Извлекаем значения из таблицы MySQL

А далее с помощью конструкции echo мы вывели их значения на экран.

4. Изменяем значения столбцов в конкретной строке таблицы:

4.1. Проверяем подключение к базе данных:

4.2. Меняем значение столбцов в конкретной строке таблицы:

Для напримера, давайте для первой строки поменяем собственника магазина (store_owner) с Kostya на Mnogoblog.

5. Удаляем запись таблицы:

5.1. Проверяем подключение к базе данных:

5.2. Удаляем запись таблицы:

В данном примере, обработчик удалит запись с идентификатором «id», равным “2”.

На этом всё! Красивых и успешных Вам сайтов!

Источник

jqGrid — Динамические таблицы на jQuery. Сложный Поиск

Введение

На мой взгляд, jqGrid — самый успешный и удобный на данный момент плагин для jQuery, работающий с таблицами БД через AJAX запросы и PHP (Так же существует версия для ASP.NET).

И так, мы создали документ HTML:

Подключили JavaScript код:

Подключили необходимые стили и скрипты (скачать можно тут):

Обратите внимание, что я не подключаю библиотеку одним файлом или отдельными частями, как это можно было сделать, а использую файл «grid.loader.js», который также поставляется с исходниками на оффициальном сайте плагина. Я его немного изменил и привожу измененный отрывок кода:

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

Расширенный поиск

Форма расширенного поиска:

Вот код, который необходимо вставить перед запросом в БД (в примере используется POST-запрос):

Вот «сердце» данной статьи, функции генерации условия для поиска в БД.

Рекурсивная функция generateSearchStringFromObj() генерации условий для выборки из БД:

Форма inline-поиска:

ВНИМАНИЕ: данная формула не будет работать при inline-поиске. При inline-поиске jqGrid будет передавать в параметрах запроса имена колонок и их значения.

Таким образом для реализации inline-поиска по `id` достаточно написать такой код:

Для поиска по нескольким полям к условию соответственно будут добавляться дополнительные строки, соединенные между собой «AND». Естественно вместо равенства можно использовать любой условие, позволительное для вашей БД.

Исходник файла-обработчика запросов AJAX от jqGrid. (Внимательно читайте комментарии, скрипт будет работать, только если вы настроете подключение к БД и впишите вместо моего обращение к модулю свой запроса к БД).

Источник

Работа с MySQL в PHP

PHP поддерживает работу с базой данных MySQL.
Специальные встроенные функции для работы с MySQL позволяют просто и эффективно работать с этой СУБД: выполнять любые запросы, читать и записывать данные, обрабатывать ошибки.
Сценарий, который подключается к БД, выполняет запрос и показывает результат, будет состоять всего из нескольких строк. Для работы с MySQL не надо ничего дополнительно устанавливать и настраивать; всё необходимое уже доступно вместе со стандартной поставкой PHP.

Что такое mysqli?

mysqli (MySQL Improved) — это расширение PHP, которое добавляет в язык полную поддержку баз данных MySQL. Это расширение поддерживает множество возможностей современных версий MySQL.

Как выглядит работа с базой данных

Типичный процесс работы с СУБД в PHP-сценарии состоит из нескольких шагов:

Функция mysqli connect: соединение с MySQL

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

Базовый синтаксис функции mysqli_connect() :

Проверка соединения

Первое, что нужно сделать после соединения с СУБД — это выполнить проверку, что оно было успешным.
Эта проверка нужна, чтобы исключить ошибку при подключении к БД. Неверные параметры подключения, неправильная настройка или высокая нагрузка заставит MySQL отвеграть новые подключения. Все эти ситуации приведут к невозможности соединения, поэтому программист должен проверить успешность подключения к серверу, прежде чем выполнять следующие действия.

Соединение с MySQL и проверка на ошибки:

Функция mysqli_connect_error() просто возвращает текстовое описание последней ошибки MySQL.

Установка кодировки

Первым делом после установки соединения крайне желательно явно задать кодировку, которая будет использоваться при обмене данными с MySQL. Если этого не сделать, то вместо записей со значениями, написанными кириллицей, можно получить последовательность из знаков вопроса: ‘. ’.
Вызови эту функцию сразу после успешной установки соединения: mysqli_set_charset($con, «utf8»);

Выполнение запросов

Установив соединение и определив кодировку мы готовы выполнить свои первые SQL-запросы. Вы уже умеете составлять корректные SQL команды и выполнять их через консольный или визуальный интерфейс MySQL-клиента.
Те же самые запросы можно отправлять без изменений и из PHP-сценария. Помогут в этом несколько встроенных функций языка.

Два вида запросов

Следует разделять все SQL-запросы на две группы:

При выполнении запросов из среды PHP, запросы из второй группы возвращают только результат их исполнения: успех или ошибку.
Запросы первой группы при успешном выполнении возвращают специальный ресурс результата. Его, в свою очередь, можно преобразовать в ассоциативный массив (если нужна одна запись) или в двумерный массив (если требуется список записей).

Добавление записи

Вернёмся к нашему проекту — дневнику наблюдений за погодой. Начнём практическую работу с заполнения таблиц данными. Для начала добавим хотя бы один город в таблицу cities.

Выражение INSERT INTO используется для добавления новых записей в таблицу базы данных.

Функция insert id: как получить идентификатор добавленной записи

Теперь у нас есть всё необходимое, чтобы добавить погодную запись.
Вот как будет выглядеть комплексный пример с подключением к MySQL и добавлением двух новых записей:

Чтение записей

В этом примере показано, как вывести все существующие города из таблицы cities:

Чтобы получить действительные данные, то есть записи из таблицы, следует использовать другую функцию — mysqli_fetch_array() — и передать ей единственным параметром эту самую ссылку.
Теперь каждый вызов функции mysqli_fetch_array() будет возвращать следующую запись из всего результирующего набора записей в виде ассоциативного массива.

Цикл while здесь используется для «прохода» по всем записям из полученного набора записей.
Значение поля каждой записи можно узнать просто обратившись по ключу этого ассоциативного массива.

Как получить сразу все записи в виде двумерного массива

Иногда бывает удобно после запроса на чтение не вызывать в цикле mysqli_fetch_array для извлечения очередной записи по порядку, а получить их сразу все одним вызовом. PHP так тоже умеет. Функция mysqli_fetch_all($res, MYSQLI_ASSOC) вернёт двумерный массив со всеми записями из результата последнего запроса.
Перепишем пример с показом существующих городов с её использованием:

Как узнать количество записей

Источник