Squeak.ru - шаблоны программирования

Обновить jQuery dataTable из Firestore в реальном времени querySnapshot

Я использую jQuery dataTable в своем проекте, чтобы показать некоторые данные из Firestore. Все работает правильно, проблема в том, что когда некоторые данные обновляются в Firestore, в браузере появляется следующее предупреждение:

DataTables warning: table id=student-dataTable - Cannot reinitialise DataTable. 
For more information about this error, please see http://datatables.net/tn/3

Я понимаю, что ошибка пытается сказать, но как мне решить проблему?

Ниже приведен мой код:

$(document).ready(function() {
    var dataSet = [];
    let db = firebase.firestore();

    let query = db.collectionGroup("members").where("class", "==", "9");

    let observer = query.onSnapshot(function(querySnapshot){
        console.log("Got data");
        if (!querySnapshot.empty) {
            querySnapshot.forEach(function(doc) {
                dataSet.push([doc.data().memberName, doc.data().phone ]);
            });
        } else {
            console.log("querySnapshot in empty");
        }
        $('#student-dataTable').DataTable({
            data: dataSet,
            destroy: true,
            columns: [
                { title: "Name" },
                { title: "Phone" },
            ]
        });
    });    
  });

И HTML-код:

<table id="student-dataTable">

Так может ли кто-нибудь помочь мне в том, как восстановить мою таблицу при обновлении данных Firestore. По этой ссылке есть некоторая информация, предлагается использовать table.destroy();< /strong> но как я могу использовать это, чтобы решить эту проблему?

Я обновил код с помощью destroy: true, но когда таблица повторно инициализируется, все данные каждый раз помещаются в переменную dataSet, поэтому при каждом обновлении данных каждая строка повторяется в таблице. Как очищать переменную dataSet каждый раз.


  • сохранить данные в переменную примерно так - var table; if(table) table.destroy(); table = $('#student-dataTable').DataTable({ options...}); 10.04.2020
  • Отвечает ли это на ваш вопрос? Невозможно повторно инициализировать DataTable — динамические данные для datatable 10.04.2020
  • Использование in Datatable({destroy: true}) — это повторная инициализация таблицы, но все строки повторяются. 10.04.2020
  • повторил как? и проверили ли вы, что данные, которые вы передаете в таблицу данных, не имеют повторяющихся строк? 11.04.2020
  • Как сбросить переменную dataSet перед перестроением таблицы. Потому что он также содержит старые данные, а новые данные снова помещаются в dataSet. 11.04.2020

Новые материалы

Угловая структура архитектуры
Обратите внимание, что эта статья устарела, я решил создать новую с лучшей структурой и с учетом автономных компонентов: https://medium.com/@marekpanti/angular-standalone-architecture-b645edd0d54a..

«Данные, которые большинство людей используют для обучения своих моделей искусственного интеллекта, поставляются со встроенным…
Первоначально опубликовано HalkTalks: https://hacktown.com.br/blog/blog/os-dados-que-a-maioria-das-pessoas-usa-para-treinar-seus-modelos-de-inteligencia-artificial- ja-vem-com-um-vies-embutido/..

Сильный ИИ против слабого ИИ: различия парадигм искусственного интеллекта
В последние годы изучению и развитию искусственного интеллекта (ИИ) уделяется большое внимание и прогресс. Сильный ИИ и Слабый ИИ — две основные парадигмы в области искусственного интеллекта...

Правильный способ добавить Firebase в ваш проект React с помощью React Hooks
React + Firebase - это мощная комбинация для быстрого и безопасного создания приложений, от проверки концепции до массового производства. Раньше (знаете, несколько месяцев назад) добавление..

Создайте API с помощью Python FastAPI
Создание API с помощью Python становится очень простым при использовании пакета FastAPI. После установки и импорта вы можете создать приложение FastAPI и указать несколько конечных точек. Каждой..

Веселье с прокси-сервером JavaScript
Прокси-серверы JavaScript — это чистый сахар, если вы хотите создать некоторую общую логику в своих приложениях, чтобы облегчить себе жизнь. Вот один пример: Связь клиент-сервер Мы..

Получить бесплатный хостинг для разработчиков | Разместите свой сайт за несколько шагов 🔥
Статические веб-сайты — это веб-страницы с фиксированным содержанием и его постоянным содержанием. Но теперь статические сайты также обрабатывают динамические данные с помощью API и запросов...


© 2024 squeak.ru, Squeak.ru - шаблоны программирования