разрешить редактирование / удаление в таблицах данных - PullRequest
Новая
       19

разрешить редактирование / удаление в таблицах данных

1 голос
/ 03 августа 2020

У меня есть веб-приложение с облачным хранилищем огня в качестве серверной части. Я использовал DataTable для экспорта данных из облачного хранилища и отображения на веб-странице, и таблица выглядит так: Таблица

Код для загрузки коллекции «заказы» из Cloud firestore и добавить в DataTables: 


var dataTable;

db.collection("orders").orderBy('timestamp', 'desc')
    .get()
    .then(function (querySnapshot) {
        if (querySnapshot.size) {
            var firestore_source = [];
            querySnapshot.forEach(function (data) {
                var obj = data.data();
                obj.id = data.id;
                firestore_source.push(obj);
            });
            //console.log('data:', firestore_source);
            dataTable.clear();
            dataTable.rows.add(firestore_source);
            dataTable.order([0, 'desc']).draw();
        }
    })
    .catch(function (error) {
        console.log("Error getting documents: ", error);
    });


$(document).ready(function () {
    dataTable = $('#example').DataTable({
        columns: [
            { data: 'Name' },
            { data: "Date" },
            { data: "Ins" },
            { data: "Phone" },
            { data: "Item" },
            { data: "Price"},
            { data: "Commision"},
            { data: "Revenue"},
            {
                data: null,
                className: "center",
                defaultContent: '<a href="" class="editor_edit">Edit</a> / <a href="" class="editor_remove">Delete</a>'
            }
        ],
        "columnDefs": [
            {"className": "dt-center", "targets": "_all"}
          ],
    });

    
    $('#example').on('click', 'a.editor_remove', function (e) {
        e.preventDefault();
        console.log("delete clicked");
        console.log($(this).closest('tr'));
         
         // what I should do here?

    } );
});

И таблицы данных в HTML: 

        <table id="example" class="table table-striped table-bordered" style="width:100%">
            <thead>
                <tr>
                    <th>Customer</th>
                    <th>Order Date</th>
                    <th>Instagram</th>
                    <th>Phone</th>
                    <th>Item</th>
                    <th>Price $</th>
                    <th>Commission</th>
                    <th>Earnings $</th>
                    <th>Edit / Delete</th> 
                </tr>
            </thead>

        </table>

В настоящее время загружены все данные в коллекции «заказов», и, очевидно, нет такие функции, как редактирование и удаление данных в каждой строке. Итак, я застрял здесь, потому что не знаю , как идентифицировать каждую строку в моей таблице при нажатии кнопок редактирования / удаления в этой строке , чтобы я мог использовать ее в качестве параметров для запроса облачного хранилища?

Я видел, что есть встроенный инструмент Editor , но я ищу собственные методы.

1 Ответ

1 голос
/ 03 августа 2020

Что касается API с поддержкой данных, вы можете получить данные о выбранной / выбранной строке с помощью этого кода, что означает, что вы можете получить идентификатор для редактирования или удаления выбранной строки.

...