html页面中的分页

Question

我正在制作一个词汇表页面。在本页。当前设计将在单个页面上显示索引中的所有条目，并带有长滚动条。我想将其转换为分页并在每个索引上仅显示 4 个条目。我无法获得每个索引 (A-Z) 上条目的分页。例如索引 A 上的所有条目的分页，索引 B 上的所有条目的分页等等。谁能帮我解决这个问题？

<script>
$(document).ready(function() {
  // Filter per data-key="value"
  $.fn.filterData = function(key, value) {
    return this.filter(function() {
      return $(this).data(key) == value;
    });
  };
  // :contains case-insensitive
  $.expr[":"].contains = $.expr.createPseudo(function(arg) {
    return function(elem) {
      return $(elem).text().toUpperCase().indexOf(arg.toUpperCase()) >= 0;
    };
  });
  // reset
  function resetAlphabet(ab, letter) {
    var starter = (letter == '') ? $(ab).children('button').first().data('value') : letter;
    var lettercode = starter.charCodeAt(0);
    if ((lettercode >= 65) && (lettercode <= 90) && (ab != '')) {
      activateLetter($(ab).children('button').filterData("value", starter));
    }
  }
  // active div letter
  function activateLetter(ellet) {
  
    var thisletter = $(ellet).data('value');
    window.scrollTo(0, 0);
    $(ellet).addClass('active');
    $(ellet).siblings().removeClass('active');
    if (!$("#" + thisletter).hasClass('active')) {
      $('#glossary').find('.letter').find('h4').removeClass('found');
      $(source).children('div').removeClass('active');
      $("#" + $(ellet).data('value')).addClass('active');
    }
  }
  // delay 
  function delay(callback, ms) {
    var timer = 0;
    return function() {
      var context = this,
        args = arguments;
      clearTimeout(timer);
      timer = setTimeout(function() {
        callback.apply(context, args);
      }, ms || 0);
    };
  }

  // Startup
  var $ts = $('.text-search');
  var source = '';
  var alphabet = '';
  var searchtitle = '';
  var searchin = '';
  var lbl = '';
  var $elemsfound;
  var offset = 0;

  if ($ts.length > 0) {
    alphabet = $ts.data('alphabet') || alphabet;
    source = $ts.data('source') || source;
    searchtitle = $ts.data('searchtitle') || searchtitle;
    lbl = $("label[for='" + $ts.attr('id') + "']");
    offset = $ts.data('offset') || 0;
    offset = ((searchtitle != '') && offset == 0) ? parseInt($(searchtitle).css('marginTop')) : offset;

    if ($(source).length == 1) {
      if (alphabet != '') {
        var $ab = $(alphabet);
        if ($ab.length > 0) {
          var alphaletters = $(source).children('div');
          $(alphaletters).css('backgroundColor', '').css('border', '');
          $ab.html('');
          $(alphaletters).each(function(id, elem) {
            $ab.append('<button type="button" data-value="' + $(elem).attr('id') + '">' + $(elem).attr('id') + '</button>' + " | ");
          });
          $ab.on('click', 'button', function(e) {
            e.preventDefault();
            e.stopPropagation();
            $('.text-search').val('');
            activateLetter($(this))
          });
          resetAlphabet(alphabet, '');
        } else {
          alphabet = '';
          $(source).children('div').addClass('active');
        }
      } else {
        $(source).children('div').addClass('active');
      }

      $('body').on('keyup', '.text-search', delay(function(e) {
        var sSearch = $(this).val();
        if (sSearch != '') {
          var fl = sSearch.substring(0, 1).toUpperCase();
          $(searchin + '.found').removeClass('found');
          searchin = source + ((alphabet == '') ? '' : ' > div#' + fl) + ((searchtitle == '') ? '' : ' ' + searchtitle);
          console.log('search for a word: "' + sSearch + '" in "' + searchin + '"');
          $elemsfound = $(searchin + ':contains("' + sSearch + '")');
          console.log('elementi trovati: ' + $elemsfound.length);
          if ($elemsfound.length > 0) {
            resetAlphabet(alphabet, fl);
            if (searchtitle != '') {
              var goto = $elemsfound.first().offset().top - offset;
              $("html,body").animate({
                scrollTop: goto
              }, 500);
            } else {
              console.log('it is a global search')
              $(source).html().replace(sSearch, '<span class="found">' + sSearch + '</span>');
            }
          } else {
            searchin = source + ((alphabet == '') ? '' : ' > div') + ((searchtitle == '') ? '' : ' ' + searchtitle);
            console.log('I DID NOT FIND ANYTHING so I am looking for a word:"' + sSearch + '" in "' + searchin + '"');
            $elemsfound = $(searchin + ':contains("' + sSearch + '")');
            if ($elemsfound.length > 0) {
              fl = $elemsfound.first().parent().attr('id');
              resetAlphabet(alphabet, fl);
              searchin = source + ((alphabet == '') ? '' : ' > div#' + fl) + ((searchtitle == '') ? '' : ' ' + searchtitle);
              $elemsfound = $(searchin + ':contains("' + sSearch + '")');
              var goto = $elemsfound.first().offset().top - offset;
              console.log(goto);
              $("html,body").animate({
                scrollTop: goto
              }, 500);
            }
          }
          $elemsfound.addClass('found');
          if (lbl.length == 1) {
            lbl.html('Found' + ($elemsfound.length == 1 ? '' : '') + ' ' + $elemsfound.length + ' word' + ($elemsfound.length == 1 ? '' : 's'))
          };
        } else {
          resetAlphabet(alphabet, '');
          $(searchin).removeClass('found');
          if (lbl.length == 1) {
            lbl.html('Browse the glossary using this index')
          }
        }
      }, 500));
    }
  }
});
var items = $(".list-item");
    var numItems = items.length;
    var perPage = 3;

    items.slice(perPage).hide();

    $('#pagination-container').pagination({
        items: numItems,
        itemsOnPage: perPage,
        prevText: "&laquo;",
        nextText: "&raquo;",
        onPageClick: function (pageNumber) {
            var showFrom = perPage * (pageNumber - 1);
            var showTo = showFrom + perPage;
            items.hide().slice(showFrom, showTo).show();
        }
    });
</script>

body {
  font-family: helvetica;
  font-size: 14px;
}

label {
  display: block;
}

input[type='text'] {
  width: 100%;
  font-size: 0.9em;
  font-family: helvetica;
  font-style: italic;
  padding: 5px 8px;
}

h4{
  margin-top: 30px;
}

.alphabet {
  display: block;
  width: 1210px;
}

.alphabet button {
  font: inherit;
  color: #398FFF;
  ;
  cursor: pointer;
  display: inline-block;
  position: relative;
  width: 40px;
  height: 40px;
  line-height: 40px;
  font-size: 14px;
  margin: 0 -6px 10px -5px;
  border: none;
  background: none;
  padding: 0;
  box-shadow: 0;
  transition: all 0.3s ease-in-out;
  outline: 0;
}

.alphabet:focus {
  outline: 0;
}

.alphabet button:hover {
  background-color: #FFF;
  font-weight: bold;
}

.alphabet button.active {
  background-color: #ffa505;
  font-weight: bold;
  color: #FFF;
  box-shadow: 0px 0px 0px 2px #FFF inset;
}

.glossary {
  display: block;
  width: 100%;
  clear: both;
}

.glossary .letter {
  display: none;
  width: 1115px;
  ;
  clear: both;
  text-align: justify;
  padding-bottom: 30px;
}

.glossary .letter.active {
  display: block;
}

.glossary h4{
  font-size: 18px;
  font-weight: 300;
  margin-bottom: 5px;
}

.glossary h4.found {
  font-weight: bold;
  color: #800020;
}

.glossary span.found {
  background-color: red;
}

h4.gloss {
  font-family: Helvetica;
  font-size: 1.3rem;
  font-weight: 600;
}

h.browse {
  font-size: 1.1rem;
  font-family: helvetica;
  font-weight: 600;
}

hr {
  border-top: 1px solid #C4C4C4;
}
.list-wrapper {
    padding: 15px;
    overflow: hidden;
}

.list-item {
    border: 1px solid #EEE;
    background: #FFF;
    margin-bottom: 10px;
    padding: 10px;
    box-shadow: 0px 0px 10px 0px #EEE;
}


.list-item p {
    margin: 0;
}

.simple-pagination ul {
    margin: 0 0 20px;
    padding: 0;
    list-style: none;
    text-align: center;
}

.simple-pagination li {
    display: inline-block;
    margin-right: 5px;
}

.simple-pagination li a,
.simple-pagination li span {
    color: #666;
    padding: 5px 10px;
    text-decoration: none;
    border: 1px solid #EEE;
    background-color: #FFF;
    box-shadow: 0px 0px 10px 0px #EEE;
}

.simple-pagination .current {
    color: #FFF;
    background-color: #FF7182;
    border-color: #FF7182;
}

.simple-pagination .prev.current,
.simple-pagination .next.current {
    background: #e04e60;
}

<head>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js'></script>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/simplePagination.js/1.6/jquery.simplePagination.js'></script><script  src="./script.js"></script>
</head>
<body>
  <div class="container">
    <div class="row">
      <div class="col-lg-4 col-md-6">
        <div class="sticky">
          <input type="text" placeholder="Enter search terms..." id="text-search" class="text-search" data-source="#glossary" data-alphabet="#alphabet" data-searchtitle="h4" data-offset="300" />

          <h4class="browse">Browse by alphabet</h4>
          <label for="text-search">Browse the glossary using this index</label>
          <div class="alphabet" id="alphabet">
          </div>
        </div>

        <div class="glossary" id="glossary">
          <div class="letter" id="A">
          <div class="list-item">
            <h4>A</h4><br>
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.
</div>
            <hr>
<div class="list-item">
            <h4>Actual</h4><br>
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.
            </div>
            <hr>
            <div class="list-item">
            <h4>Acurral</h4><br>
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.
            </div>
            <hr>
            <div class="list-item">
            <h4>AD</h4><br>
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.
            </div>
            <hr>

<div id="pagination-container"></div>

          </div>

         <div class="letter" id="B">
          <div class="list-item">
            <h4>B</h4><br>
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.
</div>
            <hr>
<div class="list-item">
            <h4>BAC</h4><br>
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.
            </div>
            <hr>
            <div class="list-item">
            <h4>BAD</h4><br>
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.
            </div>
            <hr>
            <div class="list-item">
            <h4>BASE</h4><br>
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.
            </div>
            <hr>

<div id="pagination-container"></div>

          </div>


          <div class="letter" id="C">
  <div class="list-item">
            <h4>Custom</h4><br>
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</div>
            <hr>
              <div class="list-item">
            <h4>Customer</h4><br>
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</div>
            <hr>
              <div class="list-item">
            <h4>CC</h4><br>
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</div>
            <hr>
              <div class="list-item">
            <h4>CDE</h4><br>
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</div>
            <hr>
              <div class="list-item">
            <h4>CGH</h4><br>
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</div>

          </div>
          <div class="letter" id="X">
            No entries found in this section
          </div>

          <div class="letter" id="Y">
            No entries found in this section
          </div>


          <div class="letter" id="Z">
            No entries found in this section
          </div>

        </div>


      </div>
    </div>
  </div>
</body>

Answer 1

试试jquery插件Pagination.js