如何使用 jQuery / javascript 对文本进行分页？答案

【问题标题】：how do I paginate text with jQuery / javascript?如何使用 jQuery / javascript 对文本进行分页？
【发布时间】：2012-10-26 07:52:55
【问题描述】：

这是简短的...

我需要使用 jQuery 或 javascript 对大量文本进行分页。现在我考虑过进行字符计数等，但问题是我没有使用等宽文本，所以这是行不通的。

相反，我使用的是动态输入的文本（直接来自我最好的朋友 wordpress）。

设置如下：

我已将文本放在名为 bodytext 的 div 中，该 div 已将溢出设置为自动。这是它的样式：

.bodytext {
width: 465px;
height: 454px;
display: block;
position: absolute;
display: block;
margin: 136px 25px;
font-family: 'Gentium Basic', serif;
color: #141414;
line-height: 1.5;
line-height: 1.5;
font-size: 17px;
overflow: hidden;
}

无论如何...文本溢出。

我想要做的是创建一系列的 div（带有 bodytext 类），它们彼此相邻，我可以连接我的按钮以在它们之间切换。

不过，我发现了一些很好的信息：每 18 行我需要创建一个新的 div。

不过我不知道如何解决这个问题。

我还需要它能够处理大量文本...一次最多 1000 个字...导致说 10 页...

任何帮助都会很可爱！感谢阅读！

【问题讨论】：

参考这个script-tutorials.com/how-to-create-easy-pagination-with-jquery
当我不得不这样做时，我使用了这个 jQuery 插件：welcome.totheinter.net/columnizer-jquery-plugin 这是我遵循的示例：welcome.totheinter.net/autocolumn/sample10.html 如果您需要更多信息，请告诉我。

标签： javascript jquery wordpress pagination

【解决方案1】：

这个概念证明可以工作（也适用于 css3 列），但请注意，这会消耗 CPU；它是 DOM 密集型的，并且需要 jQuery。

这需要将文本分成更短的段落（或任何其他标签），但如果文本太大，甚至应该可以在客户端进行。

伪标记：

文章标题，介绍等部分带有（文本）内容的段落、div、span 等

代码：

function paginate() {
  var screen_height = $(window).height();
  var max_page_height = screen_height * 0.8;

  var articles = $('article').toArray().map(function(node) {
    node = $(node);
    var sections = node.find('section');

    return {
      node: node,
      sections: sections,
      sectionChildren: sections.children(),
    };
  });

  function appendNewSection(article) {
    var section = $('<section class="columns page">')
    article.append(section);
    return section;
  }

  function re_paginate(article) {
    article.sections.detach(); // Important magic
    var section = appendNewSection(article.node);

    // Clone `sectionChildren` and append to DOM
    article.sectionChildren.clone().each(function(_, child) {
      child = $(child);

      if (section.height() > max_page_height) {
        section = appendNewSection(article.node);
      }

      if (child.is('ul') || child.is('ol')) {
        // Split list into shorter lists
        // NOTE! This approach can also be used to split long paragraphs...
        var list_children = child.children();
        list_children.detach(); // Important magic
        var blueprint = child.clone(); // Empty list blueprint
        var list = child;

        section.append(list);

        list_children.each(function(_, list_child) {
          if (section.height() > max_page_height) {
            // Append a new section with a new list and continue appending `list_children` therein
            section = appendNewSection(article.node);
            list = blueprint.clone();
            section.append(list);
          }
          list.append(list_child);
        });
      }
      else {
        section.append(child);
      }
    });
  }

  // Re-paginate articles
  confirm('Paginate articles to screen height?') && articles.filter(re_paginate);
}

【讨论】：

【解决方案2】：

假设您的目标浏览器支持 CSS3 多列布局，则可以完成这项工作：http://caniuse.com/#feat=multicolumn

您需要裁剪文本的外部 div、具有固定宽度和高度的列的内部 div 以及可以修改内部 div 左侧边距的按钮。

许多功能只是部分支持（根据我的经验 Opera 表现最好），但对于许多情况来说应该足够了。请参阅http://www.w3.org/TR/css3-multicol/，您可以在其中找到许多很好的示例（尤其是示例 XXIII，“多列元素之外的分页和溢出”）。

【讨论】：