Есть ли способ добавить нумерацию страниц в элементы управления изменениями страницы JSON API Google Custom Search? - PullRequest
Новая
       16

Есть ли способ добавить нумерацию страниц в элементы управления изменениями страницы JSON API Google Custom Search?

0 голосов
/ 16 сентября 2018

Я нашел сценарий Брента Килбоя в Есть ли рабочий образец API остального пользовательского поиска Google? , и я смог изменить его, чтобы получить более 100 результатов. Однако я не могу понять, как добавить нумерацию страниц в элементы управления сменой страницы. Например, на странице 10 результатов, и если у вас 40 страниц, будет 40 ссылок на страницы, например: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 ..... и так далее. Я хотел бы иметь возможность отображать элементы управления страницы так, как они делают на google.com, если это возможно.

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

Ниже приведено то, что у меня есть для формы поиска: 

    <form action="search-results.html" id="cse-search-box">
      <div>
        <input class="" name="q" type="text"> 
        <input class="" type="submit">
      </div>
    </form>

, а затем страница результатов поиска: 

<body>
<div class="gsc-result-info" id="resInfo-0"></div>
<hr/>
<div id="googleContent"></div>

<script>

//Handler for response from google.
function hndlr(response) {
    if (response.items == null) {
        //Sometimes there is a strange thing with the results where it says there are 34 results/4 pages, but when you click through to 3 then there is only 30, so page 4 is invalid now.
        //So if we get to the invalid one, send them back a page.
        window.location.replace("search-results.html?start=" + (start - 10) + "&q=" + query);
        return;
    }

    //Search results load time
    document.getElementById("resInfo-0").innerHTML = "Approximately " + response.searchInformation.formattedTotalResults + " results (" + response.searchInformation.formattedSearchTime + " seconds)";

    //Clear the div first, CMS is inserting a space for some reason.
    document.getElementById("googleContent").innerHTML = "";

    //Loop through each item in search results
    for (var i = 0; i < response.items.length; i++) {
        var item = response.items[i];
        var content = "";

        content += "<div class='gs-webResult gs-result'>" +
            "<table class='gsc-table-result'><tbody><tr>";

        //Link
        content += "<td><a class='gs-title' href='" + item.link + "' target='_blank'>" + item.htmlTitle + "</a><br/>";

        //File format for PDF, etc.
        if (item.fileFormat != null)
            content += "<div class='gs-fileFormat'><span class='gs-fileFormat'>File Format: </span><span class='gs-fileFormatType'>" + item.fileFormat + "</span></div>";

        //description text and URL text.
        content += item.htmlSnippet.replace('<br>','') + "<br/><div class='gs-bidi-start-align gs-visibleUrl gs-visibleUrl-long' dir='ltr' style='word-break:break-all;'>" + item.htmlFormattedUrl +"</div>" +
            "<br/></td></tr></tbody></table></div>";
        document.getElementById("googleContent").innerHTML += content;
    }

    //Page Controls
    var totalPages = Math.ceil(response.searchInformation.totalResults / 10);
    console.log(totalPages);
    var currentPage = Math.floor(start / 10 + 1);
    console.log(currentPage);
    var pageControls = "<ul id='gcsPageLinks'>";

    //Page change controls, 10 max originally, but I changed to 10000
    //for (var x = 1; x <= totalPages && x<=10; x++) {
    for (var x = 1; x <= totalPages && x<=10000; x++) {
        pageControls += "<li class='gsc-cursor-page";
        if (x === currentPage)
            pageControls += " gsc-cursor-current-page";
        var pageLinkStart = x * 10 - 9;
        pageControls+="'><a href='search-results.html?start="+pageLinkStart+"&q="+query+"'>"+x+"</a></div>";
    }
    pageControls += "</ul>";
    document.getElementById("googleContent").innerHTML += pageControls;
}

//Get search text from query string.
var query = document.URL.substr(document.URL.indexOf("q=") + 2);
var start = document.URL.substr(document.URL.indexOf("start=") + 6, 2);
if (start === "1&" || document.URL.indexOf("start=") === -1)
    start = 1;

//Load the script src dynamically to load script with query to call.
// DOM: Create the script element
var jsElm = document.createElement("script");

// set the type attribute
jsElm.type = "application/javascript";

// make the script element load file
jsElm.src = "https://www.googleapis.com/customsearch/v1/siterestrict?key=YOUR_API_KEY_GOES_HERE&cx=YOUR_SEARCH_ENGINE_ID_GOES_HERE&start="+start+"&q=" +query +"&callback=hndlr";

// finally insert the element to the body element in order to load the script
document.body.appendChild(jsElm);

...