При разбивке таблицы по JS данные из базы данных Firebase не отображаются - PullRequest
Новая
       8

При разбивке таблицы по JS данные из базы данных Firebase не отображаются

0 голосов
/ 06 ноября 2019

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

JS Pagination URL: https://datatables.net/examples/styling/bootstrap

Моя проблема в том, что данныеприходит из базы данных, поэтому этот скрипт не видит мои данные, не разбивает их на страницы и записывает в index.html. «Нет данных, доступных в таблице»

Это потому, что эта функция подкачки запускается сразу при первой загрузке скрипта.

Функция: 

$(document).ready(function() {
    $('#userlist-table').DataTable();
} );

Это также прекрасно работает, когда я помещаю данные, загруженные из базы данных, в «таблицу» в виде HTML. 

<tbody><tr id="++-LstSrLoH2UdYFvYJRn9" role="row" class="odd"><td class="sorting_1">John Doe</td><td>A</td><td>Melbourne</td></tr><tr id="++-LstSrLoH2UdYFvYJRnA" role="row" class="even"><td class="sorting_1">John Doe</td><td>A</td><td>Melbourne</td></tr><tr id="++-LstSrLoH2UdYFvYJRnB" role="row" class="odd"><td class="sorting_1">John Doe</td><td>A</td><td>Melbourne</td></tr><tr id="++-LstSrLoH2UdYFvYJRnC" role="row" class="even"><td class="sorting_1">John Doe</td><td>A</td><td>Melbourne</td></tr></tbody>

Каким-то образом мне нужно запустить эту функцию чуть позже и ввести данные из таблицы в HTML в функцию подкачки. Я пытался использовать таймер, но у меня не было результатов, и я не смог генерировать идею, потому что я был новичком в JS. Как я могу решить эту проблему? Я сожалею о своем плохом английском.

Мой HTML: 

<head>
    <!-- jquery latest version -->
    <script src="assets/js/vendor/jquery-2.2.4.min.js"></script>

    <!-- table pagination css -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdn.datatables.net/1.10.20/css/dataTables.bootstrap.min.css">

    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    <script src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/1.10.20/js/dataTables.bootstrap.min.js"></script>
    <script src="js/myscript.js"></script>

</head>
<body>
                        <table id="userlist-table" class="table table-striped table-bordered" style="width:100%">
                            <thead>
                                <tr id="tr">
                                <th>Name</th> 
                                <th>Position</th>
                                <th>Office</th>
                                </tr>  
                            </thead>
                        </table> 
</body>

Мой сценарий: 

var database = firebase.database().ref('MyDatabase');

database.once('value', function(snapshot){
    if(snapshot.exists()){

        var content = '';

        snapshot.forEach(function(data){
            var val = data.val();

            content +='<tr id="' + "++" + data.key + '">';
            content += '<td>' + val.name + '</td>';
            content += '<td>' + val.position + '</td>';
            content += '<td>' + val.office + '</td>';
            content += '</tr>';
        });
        $('#userlist-table').append(content);
    }
});

$(document).ready(function() {
  $('#userlist-table').DataTable();
} );

1 Ответ

0 голосов
/ 06 ноября 2019

Да. Я наконец нашел проблему. Это связано с тем, что использованный мной готовый сценарий подкачки требует "" . Я добавил полый "tbody" в готовый набор и заполнил его данными из базы данных Firebase. Затем, когда скрипт был загружен, я запустил функцию подкачки с таймером , и все, кажется, работает гладко. Это может решить проблему, если кому-то это нужно.

Мой HTML: 

<head>
    <!-- jquery latest version -->
    <script src="assets/js/vendor/jquery-2.2.4.min.js"></script>

    <!-- table pagination css -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdn.datatables.net/1.10.20/css/dataTables.bootstrap.min.css">

    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    <script src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/1.10.20/js/dataTables.bootstrap.min.js"></script>
    <script src="js/myscript.js"></script>

</head>
<body>
                        <table id="userlist-table" class="table table-striped table-bordered" style="width:100%">
                            <thead>
                                <tr id="tr">
                                <th>Name</th> 
                                <th>Position</th>
                                <th>Office</th>
                                </tr>  
                            </thead>
                            <tbody></tbody>//add this element for pagination script
                        </table> 
</body>

Мой сценарий: 

var database = firebase.database().ref('MyDatabase');
window.setTimeout(getDatas, 2000);//add this line for timer with ur function for load datas

database.once('value', function(snapshot){
    if(snapshot.exists()){

        var content = '';

        snapshot.forEach(function(data){
            var val = data.val();

            content +='<tr id="' + "++" + data.key + '">';
            content += '<td>' + val.name + '</td>';
            content += '<td>' + val.position + '</td>';
            content += '<td>' + val.office + '</td>';
            content += '</tr>';
        });
        $('#userlist-table').append(content);
    }
});

function getDatas(){
  $('#userlist-table').DataTable();
} //add this function, when loaded page, works it with timer
...