данные о хранилище в DataTable - PullRequest
0 голосов
/ 27 апреля 2020

В настоящее время я работаю над созданием таблицы на моем html веб-сайте. Мой код html:

 <div class="table-responsive">
        <table id="defect_data" border="2" cellpadding="10" class="table table-striped table-bordered">
            <thead>
            <tr>
                <td width="5%" style="text-align: center; background-color: white">ID</td>
                <td width="20%" style="text-align: center; background-color: white">First name</td>
                <td width="20%" style="text-align: center; background-color: white">Last name</td>
                <td width="20%" style="text-align: center; background-color: white">RFID id</td>
                <td width="10%" style="text-align: center; background-color: white">Bus</td>
                <td width="10%" style="text-align: center; background-color: white">Status</td>
                <td width="5%" style="text-align: center; background-color:transparent">Detail</td>
            </tr>
            </thead>
            <tr>
            <td>1</td>
            <td>Amy</td>
            <td>Lee</td>
            <td>123qwwe</td>
                <td>4</td>
            <td>Empty</td>
            <td><form class="example" action="studentdetail.html">
                <button type="submit" class="btn review">Detail</button>
            </form></td>
            </tr>
            <td>2</td>
            <td>John</td>
            <td>Love</td>
            <td>1xr285exca923u63</td>
            <td>3</td>
            <td>Empty</td>
            <td><form class="example" action="studentdetail.html">
                <button type="submit" class="btn review">Detail</button>
            </form></td>
            </tr>
        </table>
    </div>

Результат получился неплохо

enter image description here

Но когда я начинаю получать данные из хранилища, таблица не соответствует формату. Это мой javascript код

var firebaseConfig = {
    apiKey: "...",
    authDomain: "...",
    databaseURL: "...",
    projectId: "...",
    storageBucket: "...",
    messagingSenderId: "...",
    appId: "...",
    measurementId: "..."
};
firebase.initializeApp(firebaseConfig);

var firestore = firebase.firestore();
const s = firestore.collection("Student");

s.get().then((snapshot) => {
    snapshot.docs.forEach(doc => {
        renderAccount(doc);
    });
});

const accountList = document.querySelector('#defect_data') ;
function renderAccount(doc){
    let tr = document.createElement('tr');
    let td_id = document.createElement('td');
    let td_first_name = document.createElement('td');
    let td_last_name = document.createElement('td');
    let td_rfid_id = document.createElement('td');
    let td_bus = document.createElement('td');
    let td_status = document.createElement('td');


    td_id.textContent = doc.data().ID;
    td_first_name.textContent = doc.data().firstName;
    td_last_name.textContent = doc.data().lastName;
    td_rfid_id.textContent = doc.data().tagID;
    td_bus.textContent = doc.data().busID;
    td_status.textContent = doc.data().status;

    tr.appendChild(td_id);
    tr.appendChild(td_first_name);
    tr.appendChild(td_last_name);
    tr.appendChild(td_rfid_id);
    tr.appendChild(td_bus);
    tr.appendChild(td_status);

    accountList.appendChild(tr);

}
$('#defect_data').DataTable({
            dom: 'lBfrtip',
            buttons: [
            ],

        });

И результат как ...... enter image description here

пожалуйста, помогите мне получить результат, как пи c 1. Большое спасибо

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...