Динамическое заполнение новой строки в таблице HTML с использованием Javascript / JQuery

Question

У меня есть таблица HTML, которая заполняется переменными Django:

<h3>Recommended Playlist</h3>
        <table class="table table-dark" id="playlist_table">
            <thead>
                <tr>
                    <th scope="col">
                        <h4>Artist</h4></th>
                    <th scope="col">
                        <h4>Track</h4></th>
                    <th scope="col" style="display:none;">
                        <h4>Track ID</h4></th>
                    <th scope="col">
                        <h4>Album</h4></th>
                    <th scope="col" colspan="2">
                        <h4>Accept/Reject</h4></th>
                </tr>
            </thead>
            <tbody>
                {% for song in playlist %}
                <tr>
                    <td>{{song.artist_name}}</td>
                    <td>{{song.track_name}}</td>
                    <td style="display:none;" class="song_id">{{song.track_id}}</td>
                    <td>{{song.album_name}}</td>
                    <td class="approve"><i class="fas fa-check-circle fa-2x" onclick="approveRow(this)"></i></td>
                    <td class="reject"><i class="fas fa-times-circle fa-2x" onclick="deleteRow(this)"></i></td>
                </tr>
                {% endfor %}
            </tbody>
        </table>

Пользователи могут «принимать» или «отклонять» строки с помощью значков галочки / X: Снимок экрана таблицы

Следующие функции Javascript вызываются, если пользователи «принимают» / «отклоняют» песню:

//if a user accepts a row
function approveRow(r) {
                var i = r.parentNode.parentNode.rowIndex;
                var row = document.getElementById("playlist_table").rows[i];
                row.deleteCell(5);
                row.deleteCell(4);
                var blank1 = row.insertCell(4); //green tick once song approved
                blank1.innerHTML = '<center><i class="fas fa-check-circle fa-2x" style="color:#00ee21;"></i></center>';
                //order of above is important as once a cell is deleted, the other's index is index-1
                approve_counter++;
                console.log(approve_counter);
                song_selection.push('Accept');
            }

//if a user rejects a row
function deleteRow(r) {
                var i = r.parentNode.parentNode.rowIndex;
                document.getElementById("playlist_table").deleteRow(i);//delete existing row
                var table = document.getElementById("playlist_table");
                var row = table.insertRow(i); //insert new blank row
                var artist = row.insertCell(0);
                var track = row.insertCell(1);
                var album = row.insertCell(2);
                var approve = row.insertCell(3);
                var reject = row.insertCell(4);
                artist.innerHTML = "New Artist";
                track.innerHTML = "New Track";
                album.innerHTML = "New Album";
                approve.className = 'approve';
                reject.className = 'reject';
                approve.innerHTML='<i class="fas fa-check-circle fa-2x" onclick="approveRow(this)"></i>';
                reject.innerHTML='<i class="fas fa-times-circle fa-2x" onclick="deleteRow(this)"></i>';
                reject_counter++;
                console.log(reject_counter);
                song_selection.push('Reject');
            }

Если пользователь «отклоняет» песню в данный момент, строка заполнена переменными-заполнителями (см. ниже).

отклонение песни

Мне интересно, есть ли способ динамически 1018 * заполнить строки? Набор запросов Django ({{playlist}}) в настоящее время содержит элементы 10 и заполняет таблицу 10 песнями. Я хочу иметь возможность иметь, например, 50 элементов в наборе запросов и заполнять таблицу 10 за раз . Если пользователь отклоняет песню, следующий элемент в наборе запросов (элемент 11) станет новой строкой в ​​таблице и т. Д.

Любая помощь будет принята с благодарностью, спасибо! :)

Answer 1

Есть несколько способов go об этом.

Вы получаете все песни и пропускаете их через контекст в вашем представлении Django. Затем вы добавляете их в атрибут данных на HTML и затем получаете к ним доступ через JavaScript. Это позволит вам делать все логи c в JavaScript.

Еще один вариант, более идеальный (особенно если речь может идти о тысячах песен), заключается в использовании Django Rest Framework и настройки представление с нумерацией страниц, где вы можете получить указанное c количество песен одновременно. Вы получите доступ к этому представлению через AJAX вызов в JavaScript. Представление Django Rest Framework вернет JSON ответ следующего количества X песен.

https://www.django-rest-framework.org/api-guide/pagination/