JavaScript 中的简单分页

当前位置：主页 > 学无止境 > WEB前端 > JavaScript >

Vue React JavaScript Angular CSS HTML

JavaScript 中的简单分页

作者：迹忆客最近更新：2024/03/21 浏览次数：

在 JavaScript 中，我们经常定义我们首选的函数范围来提取某些活动。JavaScript 中的分页可以通过多个函数的组合手动编写脚本。

我们将演示如何创建分页以从一个页面浏览到另一个页面。我们将创建基本的分页函数来操作它，我们还将看到另一个使用 jquery 插件 pagination.js 的示例，这将使我们的编码体验更轻松。

自定义分页功能对网页进行分页

我们将首先声明包含我们数据的对象。下一步是计算每个数据以及我们希望在一页上预览多少。在此过程中，我们还将获得网页上的总页数。

在 totNumPages 函数计算出我们的总页数之后，我们将创建基础函数来点击 prev 和 next。

让我们检查代码块以有一个清晰的概念。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
<div id="TableList"></div>
<a href="javascript:prevPage()" id="btn_prev">Prev</a>&nbsp;
<a href="javascript:nextPage()" id="btn_next">Next</a><br>
page: <span id="page"></span>
</body>
</html>

var obj = [
  {number: 'Number 1'}, {number: 'Number 2'}, {number: 'Number 3'},
  {number: 'Number 4'}, {number: 'Number 5'}, {number: 'Number 6'},
  {number: 'Number 7'}, {number: 'Number 8'}, {number: 'Number 9'},
  {number: 'Number 10'}, {number: 'Number 11'}, {number: 'Number 12'},
  {number: 'Number 13'}, {number: 'Number 14'}, {number: 'Number 15'}
];
var current_page = 1;
var obj_per_page = 3;
function totNumPages() {
  return Math.ceil(obj.length / obj_per_page);
}

function prevPage() {
  if (current_page > 1) {
    current_page--;
    change(current_page);
  }
}
function nextPage() {
  if (current_page < totNumPages()) {
    current_page++;
    change(current_page);
  }
}
function change(page) {
  var btn_next = document.getElementById('btn_next');
  var btn_prev = document.getElementById('btn_prev');
  var listing_table = document.getElementById('TableList');
  var page_span = document.getElementById('page');
  if (page < 1) page = 1;
  if (page > totNumPages()) page = totNumPages();
  listing_table.innerHTML = '';
  for (var i = (page - 1) * obj_per_page; i < (page * obj_per_page); i++) {
    listing_table.innerHTML += obj[i].number + '<br>';
  }
  page_span.innerHTML = page;
  if (page == 1) {
    btn_prev.style.visibility = 'hidden';
  } else {
    btn_prev.style.visibility = 'visible';
  }
  if (page == totNumPages()) {
    btn_next.style.visibility = 'hidden';
  } else {
    btn_next.style.visibility = 'visible';
  }
}
window.onload = function() {
  change(1);
};

输出：

在这种情况下，change 函数在可视化导航和每页对象限制方面起着至关重要的作用。此外，第一页和最后一页上的 prev 和 next 可点击项的可见性。每当页面加载和任何重新加载后，默认页面设置为 page 1。

使用 `Jquery` 插件 `pagination.js` 在网页上冲浪

Jquery 插件使在网页中实现分页变得更加容易。你需要在 header 部分为插件添加 CDN，轻松导入预定义的约定来处理分页创建。

在下面的示例中，我们将定义一个 datasource。datasource 可以初始化为 array、object、URL、JSON 和类似的格式。多个参数在此插件中起作用。例如，我们可以添加 pageSize:10 来选择每页的条目。

让我们首先深入研究代码块。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>pagination example</title>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/paginationjs/2.1.4/pagination.min.js"></script>

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/paginationjs/2.1.4/pagination.css"/>
</head>
<body>

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

<script>
    $(function () {
        let container = $('#pagination');
        container.pagination({
            dataSource: [
{number: "Number 1"},
{number: "Number 2"},
{number: "Number 3"},
{number: "Number 4"},
{number: "Number 5"},
{number: "Number 6"},
{number: "Number 7"},
{number: "Number 8"},
{number: "Number 9"},
{number: "Number 10"},
{number: "Number 11"},
{number: "Number 12"},
{number: "Number 13"},
{number: "Number 14"},
{number: "Number 15"},
{number: "Number 16"},
{number: "Number 17"},
            ],
            pageSize: 5,
            callback: function (data, pagination) {
                var dataHtml = '<ul>';

                $.each(data, function (index, item) {
                    dataHtml += '<li>' + item.number + '</li>';
                });

                dataHtml += '</ul>';

                $("#container").html(dataHtml);
            }
        })
    })
</script>
</body>
</html>

输出：

代码变小了，生成函数的工作量也减少了。所需要的只是专注于定义指定参数的关键字或构造函数，以在页面之间快速更改导航。

有关插件的更详细说明和使用方法，请查看此处的文档。

上一篇：JavaScript 中的回文

下一篇：JavaScript 中的命名空间

转载请发邮件至 1244347461@qq.com 进行申请，经作者同意之后，转载请以链接形式注明出处

本文地址：

迹忆客专注技术分享