Question

您好，我使用此JavaScript代码按“标签名称”检索Blogger帖子。它工作正常，但问题出在分页列表中。它看起来不合适，特别是当标签确实有很多帖子时。看下面的照片

我的问题是如何使此分页在页面中更易于使用。例如，只有3个页面显示增加，当用户单击然后点直到最后一页

也许像这样

.pagination{display: inline-block;list-style:none;padding: 5px;border:1px solid blue}
.pagination li{display: inline-block;padding: 0 5px}

<ul class="pagination">
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li>...</li>
<li><a href="#">32</a></li>
</ul>

这是我使用的完整Java脚本，@ Prayag Verma 向下滚动到 //分页

function syb_showrecentpostswiththumbs(json) {
  var syb_FullContainer = document.createElement("div");
  var syb_ListContainer = document.createElement("ul");
  syb_ListContainer.setAttribute("id", "label_with_thumbs");
  syb_ListContainer.className = 'syb_recent_posts_with_thumbs';

  for (var i = 0; i < json.feed.entry.length; i++) {
    var syb_entry = json.feed.entry[i];
    var syb_posttitle = syb_entry.title.$t;
    var syb_location = syb_entry.georss$featurename.$t;
    var syb_posturl;
    if (i == json.feed.entry.length) break;
    for (var k = 0; k < syb_entry.link.length; k++) {
      if (syb_entry.link[k].rel == 'replies' && syb_entry.link[k].type ==
        'text/html') {
        var syb_commenttext = syb_entry.link[k].title;
        var syb_commenturl = syb_entry.link[k].href;
      }
      if (syb_entry.link[k].rel == 'alternate') {
        syb_posturl = syb_entry.link[k].href;
        break;
      }
    }
    var syb_thumburl;
    try {
      syb_thumburl = syb_entry.media$thumbnail.url;
    } catch (error) {
      s = syb_entry.summary.$t;
      a = s.indexOf("<img");
      b = s.indexOf("src=\"", a);
      c = s.indexOf("\"", b + 5);
      d = s.substr(b + 5, c - b - 5);
      if ((a != -1) && (b != -1) && (c != -1) && (d != "")) {
        syb_thumburl = d;
      } else syb_thumburl =
        '';
    }
    var syb_postdate = syb_entry.published.$t;
    var syb_cdyear = syb_postdate.substring(0, 4);
    var syb_cdmonth = syb_postdate.substring(5, 7);
    var syb_cdday = syb_postdate.substring(8, 10);
    var syb_monthnames = new Array();
    syb_monthnames[1] = "January";
    syb_monthnames[2] = "February";
    syb_monthnames[3] = "March";
    syb_monthnames[4] = "April";
    syb_monthnames[5] = "May";
    syb_monthnames[6] = "June";
    syb_monthnames[7] = "July";
    syb_monthnames[8] = "August";
    syb_monthnames[9] = "September";
    syb_monthnames[10] = "October";
    syb_monthnames[11] = "November";
    syb_monthnames[12] = "December";

    var syb_ItemContainer = document.createElement("li");
    syb_ItemContainer.className = 'clearfix';

    var ItemWrapperLink = document.createElement("a");
    ItemWrapperLink.setAttribute("href", syb_posturl);
    ItemWrapperLink.setAttribute("target", "_blank");
    ItemWrapperLink.className = 'link-wrapper';


    if (syb_showpostthumbnails == true) {
      var ItemImageContainer = document.createElement("div");
      ItemImageContainer.className = 'image-container';
      ItemImageContainer.innerHTML = '<img class="label_thumb" title="' + syb_posttitle + '" src="' + syb_thumburl + '"/>'
      ItemWrapperLink.appendChild(ItemImageContainer);
    }

    var contentWrapper = document.createElement("div");
    contentWrapper.className = 'content-wrapper';
    contentWrapper.innerHTML = '<h3 class="posttitle" title="' + syb_posttitle + '">' + syb_posttitle + '</h3>';



    if ("content" in syb_entry) {
      var syb_postcontent = syb_entry.content.$t;
    } else if ("summary" in syb_entry) {
      var syb_postcontent = syb_entry.summary.$t;
    } else var syb_postcontent = "";


    var re = /<\S[^>]*>/g;
    syb_postcontent = syb_postcontent.replace(re, "");



    if (syb_showpostsummary == true) {
      var syb_ItemLinkSummaryContainer = document.createElement("div");
      syb_ItemLinkSummaryContainer.className = 'itemSnippedCont';

      if (syb_postcontent.length < syb_numchars) {
        syb_ItemLinkSummaryContainer.innerHTML = '<p class="SnippedParag"> ' + syb_postcontent + '</p>';
      } else {
        syb_postcontent = syb_postcontent.substring(0, syb_numchars);
        var quoteEnd = syb_postcontent.lastIndexOf(" ");
        syb_postcontent = syb_postcontent.substring(0, quoteEnd);
        syb_ItemLinkSummaryContainer.innerHTML = '<p class="SnippedParag"> ' + syb_postcontent + '</p>';
      }
      contentWrapper.appendChild(syb_ItemLinkSummaryContainer)
    }




    var dateContainer = document.createElement("span");
    dateContainer.className = 'dateposted';
    dateContainer.innerHTML = '<time class="timeago" datetime="' + syb_postdate + '" title="' + syb_monthnames[parseInt(syb_cdmonth, 10)] + ' ' + syb_cdday + ', ' + syb_cdyear + '">' + syb_monthnames[parseInt(syb_cdmonth, 10)] + ' ' + syb_cdday + ', ' + syb_cdyear + '</time>'

    contentWrapper.appendChild(dateContainer);
    ItemWrapperLink.appendChild(contentWrapper);
    syb_ItemContainer.appendChild(ItemWrapperLink);
    syb_ListContainer.appendChild(syb_ItemContainer);
    syb_FullContainer.appendChild(syb_ListContainer);

  }


  //Pagination

  syb_numberofpages = Math.ceil(json.feed.openSearch$totalResults.$t / json.feed.openSearch$itemsPerPage.$t);
  var syb_pagestoshow = (syb_pagetoshow <= syb_numberofpages) ? syb_pagetoshow : syb_numberofpages;

  var syb_PaginationContainer = document.createElement("div");
  syb_PaginationContainer.className = 'PaginationContainer';
  var syb_PageContainer = document.createElement("ul");
  syb_PageContainer.className = 'pagination';
  for (g = 1; g <= syb_pagestoshow; g++) {
    var syb_SinglePage = document.createElement("li");
    syb_SinglePage.className = 'PaginationLists';
    var syb_SinglePageLink = document.createElement("a");
    syb_SinglePageLink.setAttribute("data-href", "#");
    syb_SinglePageLink.className = 'syb_page-link';
    var syb_SinglePageLinkText = document.createTextNode(g);
    syb_SinglePageLink.appendChild(syb_SinglePageLinkText);
    syb_SinglePage.appendChild(syb_SinglePageLink);
    syb_PageContainer.appendChild(syb_SinglePage);

  }

  syb_PaginationContainer.appendChild(syb_PageContainer);
  syb_FullContainer.appendChild(syb_PaginationContainer);
  document.querySelector('.syb_featuredpostlist').innerHTML = '';
  document.querySelector('.syb_featuredpostlist').appendChild(syb_FullContainer);

  for (j = 0; j < document.querySelectorAll('a.syb_page-link').length; j++)(function(j) {
    document.querySelectorAll('a.syb_page-link')[j].onclick = function(event) {
      event.preventDefault();
      syb_PaginationScript = document.createElement('script');
      syb_PaginationScript.src = "/feeds/posts/summary/-/" + syb_labelname + "?orderby=published&alt=json-in-script&max-results=" + syb_numposts + "&start-index=" + ((j * syb_numposts) + 1) + "&callback=syb_showrecentpostswiththumbs";
      var syb_PaginationScriptPosition = document.querySelector('.syb_featuredpostlist');
      syb_PaginationScriptPosition.parentNode.insertBefore(syb_PaginationScript, syb_PaginationScriptPosition);
    };
  })(j);
}


var syb_pagetoshow;
var syb_labelname = "Test Label Name";
var syb_numposts = 10;
var syb_showpostthumbnails = true;
var syb_showpostdate = true;
var syb_showpostsummary = false;
var syb_numchars = 100;

var syb_ScriptLoad = document.createElement('script');
syb_ScriptLoad.src = "/feeds/posts/summary/-/" + syb_labelname + "?orderby=published&alt=json-in-script&max-results=" + syb_numposts + "&callback=syb_showrecentpostswiththumbs";
var syb_ScriptPosition = document.querySelector('.syb_featuredpostlist');
syb_ScriptPosition.parentNode.insertBefore(syb_ScriptLoad, syb_ScriptPosition);

<div class='syb_featuredpostlist'>
</div>

如何简化自定义分页

0 个答案: