Добавление кнопок «Предыдущая / Следующая» к подкачке - PullRequest
Новая
       43

Добавление кнопок «Предыдущая / Следующая» к подкачке

0 голосов
/ 06 января 2020

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

Однако я не уверен, как go об этом в текущем коде.

Текущий js (по ссылке выше): 

window.onload = function() {
    var search = new GoogleCustomSearch({
        // take it from here https://code.google.com/apis/console/
        googleApiKey: 'xxxx',
        // http://www.google.com/cse/
        googleCustomSearchId: 'xxxx',
        // callback
        onProcessResults: function(results) {
            var that = this,
                i, len,
                item, resultsStr = '',
                pages, pagesNodes;
            if (that.hasError) {
                alert(that.error.code + ": " + that.error.message);
            }
            else if (results.items.length > 0) {
                // create results HTML
                for (i = 0, len = results.items.length; i < len; i++) {
                    item = results.items[i];
                    resultsStr += '<p>';
                    resultsStr += '<a href="'+ item.link +'" target="_blank">'
                            + item.htmlTitle + '</a>';
                    resultsStr += '<br>';
                    resultsStr += item.htmlSnippet;
                    resultsStr += '</p>';
                }
                // render search results
                document.getElementById('search-results').innerHTML = resultsStr;
                // create paging HTML-nodes
                var pages = search.getPages();
                var pagesNodes = createPagingNodes(pages, search);
                // render paging
                document.getElementById('search-results').appendChild(pagesNodes);
            }
        }
    });
    // form handler
    document.getElementById('search-form').onsubmit = function() {
        var searchInput = document.getElementById('search-query');
        if (searchInput.value.length > 2 && !search.isBusy) {
            document.getElementById('search-results').innerHTML = 'loading...';
            search.doSearch(searchInput.value, 1);
        }
        return false;
    }
};
function createPagingNodes(pages, searchInstance) {
    var i, len,
        page,
        pagesContainer,
        pageNode;
    if (pages === null) {
        return false;
    }
    pagesContainer = document.createElement('div');
    pagesContainer.className = 'search-paging';
    for (i = 0, len = pages.length; i < len; i++) {
        page = pages[i];
        pageNode = document.createElement('span');
        pageNode.className = 'page-num';
        pageNode.innerHTML = page.num;
        if (searchInstance.currentPage === page.num) {
            pageNode.className += ' active';
        }
        // click handler
        (function(page){
            pageNode.onclick = function()
            {
                if (this.className.indexOf('active') != -1) {
                    return false;
                }
                var others = this.parentNode.getElementsByTagName('span');
                for (var i = 0; i < others.length; i++) {
                    others[i].className = others[i].className.replace(' active', '');
                }
                this.className += ' active';
                searchInstance.currentPage = page.num;
                searchInstance.doSearch(document.getElementById('search-query').value, page.num);
            };
        })(page);
        pagesContainer.appendChild(pageNode);
    }
    return pagesContainer;
}

Я пытался добавить свои кнопки в функцию createPagingNodes(pages, searchInstance) {}, например, так : 

//Prev button
var prev = document.createElement('a');
prev.classList.add('nav-btn');
prev.setAttribute('data-nav', (searchInstance.currentPage - 1));
prev.innerHTML = 'Prev';
pagesContainer.prepend(prev);


//Next button
var next = document.createElement('a');
next.classList.add('nav-btn');
next.setAttribute('data-nav', (searchInstance.currentPage + 1));
next.innerHTML = 'Next';
pagesContainer.appendChild(next);

return pagesContainer;

Но я не знаю, как создать функцию, которая установит номер страницы назад или вперед и обновит sh результаты и ссылки на страницы. Может ли кто-нибудь помочь мне в правильном направлении, пожалуйста?

...