Обновить HTML-таблицу данных, если база данных изменилась - PullRequest
Новая
       1

Обновить HTML-таблицу данных, если база данных изменилась

0 голосов
/ 05 декабря 2018

У меня есть пользовательская таблица на моей панели, использующая следующий код Php: 

<html>
<body>
<div id="order_table">
    <table>
        <thead>
        <tr>
            <th>Name</th>
            <th>Mobile</th>
        </tr>
        </thead>
        <?php
        Include_once("db/connection.php");
        $stmt_select_users = $conn->prepare("SELECT name,mobile FROM api_user order by create_date DESC limit 5;");
        $stmt_select_users->execute();
        while ($row_select_users = $stmt_select_users->fetch(PDO::FETCH_ASSOC)) {
            ?>
            <tr>
                <td><?php echo $row_select_users['name']; ?></td>
                <td><?php echo $row_select_users['mobile']; ?></td>
            </tr>
            <?php
        }
        ?>
    </table>
</div>
</body>
</html>

Я знаю о следующей функции: 

$(document).ready(function () {
   setInterval(function () {
       $("#order_table").load("users_table.php")
   }, 3000);
});

но яне хотите обновлять полную таблицу, просто если строка вставлена, таблица добавляет эту строку. Любая помощь?

1 Ответ

0 голосов
/ 05 декабря 2018

Вы должны создать файл PHP, который возвращает только те записи, которые вам нужны, и манипулировать таблицей с помощью javascript.

Предполагается, что у вас есть этот скрипт, который возвращает элемент строки таблицы HTML, например: 

<tr>
    <td>Some value</td>
    <td>Another value</td>
</tr>

Вы можете сделать что-то подобное. 

$(document).ready(function () {
    setInterval(function () {
        $.get("my-script.php", function(data) {
            $("#order_table table").append(data);
        });
   }, 3000);
});

Для получения дополнительной информации http://api.jquery.com/append/ и https://api.jquery.com/jquery.get/

Я надеюсь, что смогу помочь.

РЕДАКТИРОВАТЬ: Пример кода

Отказ от ответственности: Это действительно простой фрагмент кода, и вы должны выполнить проверки и оптимизации. 

<?php
// request.php
$data = [
    ['valor 1 - linha 1', 'valor 2 - linha 1'],
    ['valor 1 - linha 2', 'valor 2 - linha 2'],
    ['valor 1 - linha 3', 'valor 2 - linha 3'],
];

$afterIndex = $_GET['afterIndex'];
$count = sizeof($data);

$tableRows = [];
if ($afterIndex < $count)  {
    for ($i = $afterIndex; $i < $count; $i++) {
        $item = $data[$i];
        $tableRows[] = '<tr><td>' .$item[0] . '</td><td>' . $item[1] . '</td></tr>';
    }
}

echo json_encode([
    'index' => $count, 
    'rows' => $tableRows
]);

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

<script>
  document.addEventListener('DOMContentLoaded', function() {
    $(document).ready(function () {
        var index = 0;
        setInterval(function () {
            $.get("/request.php?afterIndex="+index, function(data) {
                var response = JSON.parse(data);
                index = response.index;
                for (var i = 0; i < response.rows.length; i++) {
                    $("#order_table table tbody").append(response.rows[i]);
                }
            });
    }, 3000);
    });
  });
  </script>

Приведенный выше скрипт выполняет запрос к коду php и отображает строки ответа в таблице.

Таблица выглядит примерно так: 

<div id="order_table">
    <table>
        <thead>
            <tr>
                <th>1</th>
                <th>2</th>
            </tr>
        </thead>
        <tbody>
        </tbody>
    </table>
</div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...