DataTables поиск с PHP

Используя datatables bootstrap Php расписывая все подробно Автопоиск когда водиться в поле поиска значение минимальное значение 3 символа Запрос ajax в php осуществляется запрос к базе данных sqlite из таблицы и колонках БД при получении массива в котором удаляются все html тэги Сам поиск данных из формы поиска осуществляется во всем полученном массиве из запрос к базе данных Сам массив формируется так когда находится значение из поиска по ID сделать запрос к БД после и полное значение возвратить json в datables Удачный поиск добавляется в datatables Во время выполнения поиска запроса у datatables работает preloder Во время удачного запроса в поиске поисковый запрос добавляется session storage и создается ниже datatables облако тэгов при нажатии на которое повторяется запрос поиска Все запросы удачные в поиске и добавленные datables сохраняются при новом поиске А новый поиск добавляет удачно найденные значения верху datatables

Ты хочешь реализовать следующий функционал:

DataTables с Bootstrap + PHP + SQLite
Автопоиск (от 3 символов)
AJAX-запросы к PHP, которые обращаются к SQLite
Результаты очищаются от HTML-тегов
Поиск осуществляется по массиву, полученному от БД
Если найден ID, — делается дополнительный запрос и данные возвращаются в JSON
Удачные запросы добавляются в DataTables (сверху)
Работает прелоадер при запросе
Session Storage сохраняет запросы, создаёт "теги" под таблицей
Повторный клик по тегу — повторяет поиск

🔧 Шаг за шагом

1. 📁 Структура проекта

pgsql
/project
  ├── index.php
  ├── fetch.php
  ├── db.sqlite
  ├── js/
  │   └── main.js
  ├── css/
  │   └── styles.css

2. 📦 Подключение библиотек (в `index.php`)

php
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>DataTables с поиском</title>
    <link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/dataTables.bootstrap5.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="css/styles.css">
</head>
<body>

<div class="container mt-4">
    <h2>Поиск данных</h2>
    <table id="resultTable" class="table table-striped" style="width:100%">
        <thead>
            <tr><th>ID</th><th>Имя</th><th>Email</th></tr>
        </thead>
        <tbody></tbody>
    </table>
    
    <div id="preloader" style="display:none;">Загрузка...</div>
    <div id="tags" class="mt-3"></div>
</div>

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.13.6/js/dataTables.bootstrap5.min.js"></script>
<script src="js/main.js"></script>

</body>
</html>

3. 📜 JS: `main.js`

js
let table;
let previousData = [];

$(document).ready(function () {
    table = $('#resultTable').DataTable({
        data: [],
        columns: [
            { data: "id" },
            { data: "name" },
            { data: "email" }
        ]
    });

    const searchInput = $('div.dataTables_filter input');

    searchInput.off().on('input', function () {
        const query = $(this).val().trim();
        if (query.length >= 3) {
            $('#preloader').show();
            $.ajax({
                url: 'fetch.php',
                method: 'POST',
                data: { search: query },
                dataType: 'json',
                success: function (response) {
                    $('#preloader').hide();

                    if (response.success) {
                        let newData = response.data;

                        // Удалить дубли
                        newData = newData.filter(newItem =>
                            !previousData.some(item => item.id === newItem.id)
                        );

                        // Добавляем новые данные в начало
                        previousData = [...newData, ...previousData];
                        table.clear().rows.add(previousData).draw();

                        // Сохраняем запрос
                        saveTag(query);
                    }
                }
            });
        }
    });

    // Повторный поиск по тэгу
    $('#tags').on('click', '.tag', function () {
        const tag = $(this).text();
        $('div.dataTables_filter input').val(tag).trigger('input');
    });

    // Отрисовать теги из sessionStorage
    renderTags();
});

function saveTag(tag) {
    let tags = JSON.parse(sessionStorage.getItem('tags') || '[]');
    if (!tags.includes(tag)) {
        tags.push(tag);
        sessionStorage.setItem('tags', JSON.stringify(tags));
        renderTags();
    }
}

function renderTags() {
    let tags = JSON.parse(sessionStorage.getItem('tags') || '[]');
    $('#tags').empty();
    tags.forEach(tag => {
        $('#tags').append(`<span class="badge bg-primary me-2 tag" style="cursor:pointer;">${tag}</span>`);
    });
}

4. ⚙️ PHP: `fetch.php`

php
<?php
header('Content-Type: application/json');

if (!isset($_POST['search']) || strlen($_POST['search']) < 3) {
    echo json_encode(["success" => false, "message" => "Короткий запрос"]);
    exit;
}

$search = trim($_POST['search']);
$db = new SQLite3('db.sqlite');

$stmt = $db->prepare("SELECT id, name, email FROM users WHERE name LIKE :search OR email LIKE :search OR CAST(id AS TEXT) LIKE :search");
$stmt->bindValue(':search', "%$search%", SQLITE3_TEXT);
$result = $stmt->execute();

$data = [];
while ($row = $result->fetchArray(SQLITE3_ASSOC)) {
    // Удаляем HTML теги
    $row = array_map(fn($val) => strip_tags($val), $row);

    // Дополнительный запрос по ID (пример)
    if ($row['id']) {
        $stmt2 = $db->prepare("SELECT * FROM users WHERE id = :id");
        $stmt2->bindValue(':id', $row['id'], SQLITE3_INTEGER);
        $details = $stmt2->execute()->fetchArray(SQLITE3_ASSOC);
        if ($details) {
            $row = array_merge($row, $details); // Дополняем
        }
    }

    $data[] = $row;
}

echo json_encode([
    "success" => true,
    "data" => $data
]);

5. 🎨 CSS: `styles.css`

css
#preloader {
    text-align: center;
    font-weight: bold;
    padding: 10px;
}

#tags .tag {
    margin: 3px;
    padding: 5px 10px;
}

🧪 Пример SQLite таблицы

sql
CREATE TABLE users (
    id INTEGER PRIMARY KEY AUTOINCREMENT,
    name TEXT,
    email TEXT
);

INSERT INTO users (name, email) VALUES
('Иван Петров', 'ivan@example.com'),
('Анна Смирнова', 'anna@example.com'),
('Петр Иванов', 'petr@example.com');

✅ Что реализовано

✅ AJAX-поиск при вводе 3+ символов
✅ Поиск в SQLite и доп. запрос по ID
✅ Очищение HTML
✅ Добавление новых результатов в начало таблицы
✅ Сохранение поисков в sessionStorage
✅ Повторный запрос по нажатию на теги
✅ Прелоадер на время поиска

Если хочешь — могу сделать это как архив zip с полным проектом. Или хочешь доработку на Vue/React?

В fetch.php получаем все данные в общий массив формируем его так чтобы было понятно какие данные принадлежат ID записи в БД И поиск происходит именно в массиве во всем и при удачном поиске значения в массиве идет запрос по ID из массива которой принадлежит найденному значению Значений совпадений может быть много и по всем ID в массиве вывод для datatables найденные значения в массиве

Отлично! Ты хочешь:

Получить все записи из БД в PHP.
Сформировать один общий массив, где видно, какие данные принадлежат каждому ID.
Далее поиск должен происходить внутри этого массива (а не сразу в SQLite).
При нахождении совпадений — получить ID этих записей и затем по ним сделать дополнительные запросы к БД, чтобы получить полные данные.
Вернуть результат в DataTables (может быть много совпадений).

🔄 Новый подход (улучшенная логика)

🔁 Общая логика `fetch.php`:

При первом поиске загружается вся таблица (SELECT * FROM users).
Все данные помещаются в массив $allRows, индексируя по id.
Затем выполняется поиск по значению в массиве, без SQL.
По найденным ID делаем SELECT * FROM users WHERE id IN (...), чтобы получить полные данные.
Возвращаем их в JSON для отображения в DataTables.

✅ Новый `fetch.php`

php
<?php
header('Content-Type: application/json');

if (!isset($_POST['search']) || strlen($_POST['search']) < 3) {
    echo json_encode(["success" => false, "message" => "Минимум 3 символа"]);
    exit;
}

$search = mb_strtolower(trim($_POST['search']));
$db = new SQLite3('db.sqlite');

// 1. Загружаем всю таблицу users
$result = $db->query("SELECT * FROM users");
$allRows = [];
while ($row = $result->fetchArray(SQLITE3_ASSOC)) {
    $cleanRow = [];
    foreach ($row as $key => $value) {
        // Удаляем HTML-теги
        $cleanRow[$key] = strip_tags($value);
    }
    // Индексируем по ID
    $allRows[$row['id']] = $cleanRow;
}

// 2. Поиск по всем значениям в массиве
$matchedIDs = [];

foreach ($allRows as $id => $row) {
    foreach ($row as $key => $value) {
        if (mb_stripos($value, $search) !== false) {
            $matchedIDs[] = $id;
            break; // Один матч — достаточно
        }
    }
}

$matchedIDs = array_unique($matchedIDs);

if (empty($matchedIDs)) {
    echo json_encode(["success" => true, "data" => []]);
    exit;
}

// 3. Получение полных данных по найденным ID
$placeholders = implode(',', array_fill(0, count($matchedIDs), '?'));
$stmt = $db->prepare("SELECT * FROM users WHERE id IN ($placeholders)");

foreach ($matchedIDs as $i => $id) {
    $stmt->bindValue($i + 1, $id, SQLITE3_INTEGER);
}

$result = $stmt->execute();

$finalData = [];
while ($row = $result->fetchArray(SQLITE3_ASSOC)) {
    // Чистим HTML
    $cleanRow = array_map(fn($val) => strip_tags($val), $row);
    $finalData[] = $cleanRow;
}

// 4. Ответ клиенту
echo json_encode([
    "success" => true,
    "data" => $finalData
]);

🧪 Пример: что делает этот код

Допустим, в таблице есть:

id	name	email
1	Иван Иванов	ivan@example.com
2	Анна Смирнова	anna@mail.ru
3	Петр Сидоров	peter@some.ru

Ты ввёл анн, поиск идёт по массиву $allRows, находит ID 2, делает SELECT * FROM users WHERE id IN (2), возвращает полную строку Анны.

➕ Плюсы такого подхода

🔄 Работает по памяти — один SQL-запрос в начале.
🔍 Гибкий поиск по всем полям.
🔐 Защищён от XSS — теги удалены.
📈 Можно легко расширять (например, добавить кеш, фильтрацию по колонке и т.д.)

Хочешь ускорить работу?

Можно загрузить $allRows один раз (например, в session или временный JSON-файл) и работать с ним.

Если хочешь — могу помочь это реализовать.

ChatGPT может допускать ошибки. Рекомендуем проверять важную информацию.

Вы сказали:

ChatGPT сказал: