文章/答案/技术大牛

发布

js ajax 简易分页

在使用JavaScript进行AJAX简易分页时，主要涉及到以下几个基础概念：

基础概念

AJAX（Asynchronous JavaScript and XML）：一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。
分页（Pagination）：将数据分成多个页面进行显示，以提高用户体验和页面加载速度。

优势

提高用户体验：用户可以快速浏览大量数据而无需等待整个页面重新加载。
减少服务器负载：每次只请求当前页的数据，减少服务器处理的数据量。
提高页面性能：避免一次性加载大量数据导致页面卡顿或崩溃。

类型

前端分页：所有数据一次性加载到前端，前端通过JavaScript进行分页处理。
后端分页：每次请求只从服务器获取当前页的数据。

应用场景

新闻列表：显示大量新闻文章，用户可以分页浏览。
商品列表：电商网站中展示大量商品，用户可以分页查看。
数据报表：展示大量数据报表，用户可以分页查看详细信息。

示例代码

以下是一个使用AJAX进行后端分页的简易示例：

HTML部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>AJAX Pagination</title>
</head>
<body>
    <div id="data-container"></div>
    <button id="prev-page">Previous</button>
    <button id="next-page">Next</button>

    <script src="script.js"></script>
</body>
</html>

JavaScript部分（script.js）

let currentPage = 1;
const pageSize = 10;

function fetchData(page) {
    const xhr = new XMLHttpRequest();
    xhr.open('GET', `https://api.example.com/data?page=${page}&size=${pageSize}`, true);
    xhr.onload = function () {
        if (xhr.status === 200) {
            const data = JSON.parse(xhr.responseText);
            renderData(data);
        }
    };
    xhr.send();
}

function renderData(data) {
    const container = document.getElementById('data-container');
    container.innerHTML = '';
    data.forEach(item => {
        const div = document.createElement('div');
        div.textContent = item.name;
        container.appendChild(div);
    });
}

document.getElementById('prev-page').addEventListener('click', () => {
    if (currentPage > 1) {
        currentPage--;
        fetchData(currentPage);
    }
});

document.getElementById('next-page').addEventListener('click', () => {
    currentPage++;
    fetchData(currentPage);
});

// 初始加载第一页数据
fetchData(currentPage);

可能遇到的问题及解决方法

数据加载缓慢：
- 原因：服务器响应时间过长或网络延迟。
- 解决方法：优化服务器端查询，使用缓存，或增加服务器性能。

分页按钮失效：
- 原因：前端逻辑错误，未正确更新当前页码。
- 解决方法：检查前端代码，确保页码更新逻辑正确。
数据重复或遗漏：
- 原因：后端分页逻辑错误，或前端未正确处理分页数据。
- 解决方法：检查后端分页逻辑，确保每次请求的数据范围正确；前端确保正确渲染当前页数据。

通过以上示例和解释，你可以实现一个简易的AJAX分页功能，并解决常见的问题。

页面内容是否对你有帮助？

有帮助

没帮助

jQuery轻松分页淡出不起作用

、

我使用的是简易分页插件基本上，此分页使用fadein/out显示每个列表项，即： $('ul#items').easyPaginate({

浏览 1提问于2012-04-24得票数 0

回答已采纳

1回答

来自AngularJS ui的分页不可见

、、、

我有一个简单的数据集，我想使用角-js ui分页。它是服务器驱动的分页，因为它可以变得相当大。<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3-- load jquery --> <script src

浏览 4提问于2014-02-07得票数 2

回答已采纳

4回答

在jquery中访问json数组中的单个值

、、

我在jQuery中有一个AJAX返回的数组。我想迭代AJAX成功的结果，并从JSON数组中获取单独的值。数据以字符串的形式返回。我使用jQuery的$.ajax从服务器获得它，这很好。//my View type: "POST", url:"http://localhost:8888/CodeIgniter/index.php/user/usercontrollersuccess:

浏览 7提问于2011-11-23得票数 0

2回答

Angularjs分页错误

、、

我试图从这里集成一个角UI分页指令，-> 。 at https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.7/angular.js:78:12 at parentSet (https://ajax.goo

浏览 0提问于2014-05-07得票数 2

回答已采纳

3回答

在不刷新页面的情况下更新视图上的数据- Laravel

、、、

我想在不刷新页面的情况下，在60秒后频繁加载数据。这行代码是"myquestionodds.blade.php“中的代码，其中的数据是获取的。它工作得很好。但我想经常调用这个刀片php文件，并在"callmeauto“div中显示。我试过这里的一些代码。但不起作用。如下例所示。我确信我走错了方向。 $('#c

浏览 7提问于2020-02-04得票数 0

2回答

添加AJAX时分页不起作用

、、

我有一个基于PHP的分页系统，它工作得很好，我使用GET参数来传递页码：这个分页很好用。 $('#temporary').load($(this).attr('href')).modal(); });

浏览 0提问于2012-05-26得票数 0

回答已采纳

1回答

我正在使用pjax进行主导航和分页(kaminari)。在页面内，我进行ajax调用以更改页面上某些项的状态。ajax调用更新包含分页的部分。问题是，在ajax请求之后，pjaxified分页会中断。分页中的所有链接现在都与最后一次ajax调用相同，而不是显示到下一个/上一个页面的链接。下面是在ajax请求之后调用的模板toggle_state.js.erb： $("#link-list"

浏览 1提问于2011-08-01得票数 4

回答已采纳

2回答

CakePHP 1.2.x - Ajax分页“下一页”不更新，停留在2

、、

我已经实现了一个Ajax分页，它对第一页非常好，但是“下一页”链接永远不会超过第2页。所以，即使加载了第2页，我的分页器的下一个链接仍然是' page :2‘。区别在于我的分页器链接是全局的。我不将分页链接作为新DOM注入的HTML的一部分加载。分页器链接位于我的ajax容器之外，内容在单击时加载到容器中。分页器链接未加载到该容器中。我非常清楚，CakePHP 2.x使用$this->Js->WriteBuff

浏览 4提问于2014-04-09得票数 5

1回答

我应该向googlebot显示页面的任何AJAX版本吗？

、、、

我有一个网站，让我们说有一个产品的分页列表。在打开或关闭JavaScript的情况下，此网址将显示相同的内容。~/products/list/4 { 4 = page number } 当googlebot登陆到我的产品的第1页时，它将无法浏览产品，因为它是基于AJAX的分页。因此，如果我关闭AJAX分页，并退回到“服务器端”分页，如果用户代

浏览 1提问于2013-01-09得票数 0

1回答

CakePHP 2.x开放模式框和AJAX

、、、

我还在CakePHP 2.x中实现了AJAX活动、停用和AJAX分页。/ajax/libs/prototype/1.7.0.0/prototype.js" type="text/javascript" charset="utf-8"></script> <scriptsrc="https://ajax.goo

浏览 4提问于2013-08-21得票数 0

1回答

uib-分页不工作Angularjs

、、、

我尝试并尝试从网站实例化UI分页。我已经搜索过Stack溢出和codeProject以及其他各种站点。我无法为我的一生得到我的分页工作。 $scope.maxSize = 8;})；感激不尽

浏览 6提问于2015-12-08得票数 1

回答已采纳

1回答

为什么我会得到“未知元素‘分页’或.”角/ui.bootstrap.引导分页

、

我使用分页(角/ui.bootstrap)作为我的列表。分页控制显示在我的网站上，但在VS中它说“未知的元素‘分页’或元素不能放在这里”。我已经把分页标签放在我的表后面(ng-重复)，在我的ng控制器div中。我在用这些cdns angular-ui.github.io/boot

浏览 1提问于2014-10-06得票数 0

回答已采纳

2回答

cakephp ajax分页只工作一次-脚本不被评估d？

、

我遵循了cakephp站点上的教程，但是使用ajax的分页只起作用一次--内容会更新，而且没问题。><?> 这是相同的-当我点击link1 it ajax，然后当我点击link2时会有正常的重载-所以这与ajax刷新后的脚本评估有关……

浏览 4提问于2012-04-27得票数 0

1回答

UIkit.pagination不是一个函数

、、、

我正在使用UIkit分页，但它不起作用。我知道我已经在我的环境中安装了UIkit，因为我正在使用UIkit Modal，uploadDrop，uploadSelect等，这些都运行得很好。下面是我的分页按钮HTML：这是Javascript：

浏览 17提问于2017-02-16得票数 0

2回答

无法在分页jquery数据表中的ajax调用中每页发送分页数和分页数据。

、、、、

我试图从html页面的分页中加载ajax调用中的数据，但不知何故它不起作用。不能理解这个问题 <script src="https://cdn.datatables.net/1.10.19&

浏览 3提问于2020-06-10得票数 2

1回答

检测元素何时完成加载新HTML

、、

我在另一个js文件中有一个load事件，它在单击分页时使用.on(' load ')加载新的HTML。但是，在加载html之后，我需要在另一个脚本中执行一些操作。到目前为止我已经试过了，但没有运气。js内容容器是在新HTML中加载的元素。是我单击以启动load事件的分页链接。$('body').on('click', '.js-ajax-link', function() { $('body&#

浏览 5提问于2017-09-13得票数 0

回答已采纳

1回答

使用Power脚本创建简易表格

、、、、

有没有什么方法可以通过PowerShell而不是JS文件来定义简单的表？任何通过CSV创建简易表格的示例或有关通过JS文件定义的文档都会很有帮助。

浏览 0提问于2018-04-13得票数 0

1回答

中设置自定义ajax*分页

如何在不使用默认ajax助手的情况下在cakephp中设置ajax？默认的ajax助手将js代码放在页面本身，我不想这样做。我希望它被设置在一个独立的js文件(即general.js)中。我该怎么做？我已经设置了分页。

浏览 1提问于2013-09-17得票数 0

回答已采纳

2回答

动态表排序在Ajax中根本不起作用

、、、、

我正在使用动态表格和Ajax。排序、搜索、分页都不起作用。我的表中只有一个列表，但单击列标题时什么也没有发生。 </tr> <tbody> </table><s

浏览 3提问于2017-12-04得票数 0

1回答

使用Jquery的AJAX分页插件

、、、

我正在使用pagination.js对ajax进行分页。除了"pageSize“属性之外，一切都运行得很好。我想每页显示3个项目，但它在第一页一次显示所有数据。我该怎么解决它呢？我在这里附上了我的代码： HTML <div class="container"> <div class="dataContainer"></div> <&#

浏览 17提问于2019-10-09得票数 1

回答已采纳

点击加载更多