Плагин Pagination дублирует динамически генерируемые элементы div при нажатии на страницу. - PullRequest
Новая
       16

Плагин Pagination дублирует динамически генерируемые элементы div при нажатии на страницу.

0 голосов
/ 22 апреля 2020

Я занимаюсь разработкой веб-приложения и в настоящее время пытаюсь реализовать плагин для разбивки на страницы, используя jquery, я использовал учебник и добавил плагин jquery с этого сайта: https://www.js-tutorials.com/jquery-tutorials/simple-example-pagination-using-jquery-bootstrap/# и в значительной степени последовал этому, как объяснили. Разница для меня заключается в том, как данные отображаются вместо таблицы, которую я пытаюсь показать каждому элементу в своем собственном динамически генерируемом окне в соответствии с запросом моего клиента. Проблема в том, что когда я щелкаю по следующей странице вместо того, чтобы скрывать элементы div от первой страницы, вместо этого они просто добавляют новые на страницу, а если я вернусь * go, то снова будут генерироваться те же элементы div, добавляя дубликаты.

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

<script>

    var $pagination = $('#pagination'),
        totalRecords = 0,
        records = [],
        displayRecords = [],
        recPerPage = 8,
        page = 1,
        totalPages = 0;
    $.ajax({
        type: 'GET',
        url: "http://localhost:8080/stocklist",
        async: true,
        dataType: 'json',
        success: function(data) {
            records = data;
            console.log(records);
            totalRecords = records.length;
            totalPages = Math.ceil(totalRecords / recPerPage);
            apply_pagination();
        }
    });

     function apply_pagination() {
        $pagination.twbsPagination({
            totalPages: totalPages,
            visiblePages: 6,
            onPageClick: function(event, page) {
                displayRecordsIndex = Math.max(page - 1, 0) * recPerPage;
                endRec = (displayRecordsIndex) + recPerPage;

                displayRecords = records.slice(displayRecordsIndex, endRec);
                create_divs();
            }
        });
    }

    function create_divs() {

        for (let i = 0; i < displayRecords.length; i++) {

                        $("#items").append($('<div class="itemBox" ondblclick="item_click(this)" id="' + displayRecords[i].stock_id + '"/>'));

                        var id = "#" + displayRecords[i].stock_id;

                        $(id).append($('<p class="itemBoxName">' + displayRecords[i].stock_name + '</p>'));
                        $(id).append($('<p class="itemBoxRackLet">' + displayRecords[i].rack_letter + '</p>'));
                        $(id).append($('<p class="itemBoxShelfNum">' + displayRecords[i].shelf_number + '/</p>' + '<br><br>'));
                        $(id).append($('<p class="itemBoxDescription">' + displayRecords[i].stock_description + '</p>' + '<br>'));

                    }
    }

</script>

Вот код сценария, который генерирует div и нумерацию страниц, как упоминалось ранее, что каждый раз, когда я нажимаю на другую страницу, она только добавляет больше на страницу вместо того, чтобы скрывать или удалять то, что на странице 1 и т. д.

Я использую node.js для извлечения данных из базы данных, которая в настоящее время проходит через локальный узел, как показано в URL.

...