我来详细讲解一下“无框架 Ajax分页(原创)”的完整攻略。

概述

在传统的网页开发中，分页一般使用后端程序实现，前端只需引入一个分页控件即可。然而，为了提高用户体验，一些网站开始采用 AJAX 方式实现数据分页，即不刷新整个页面，而只刷新分页部分，避免页面重载，加快页面速度。本文将介绍一种无需框架的 AJAX 分页实现方法。

实现过程

准备工作

首先需要准备后端接口，即对请求进行处理后返回数据。这里我们以 PHP 语言为例，接口的代码如下：

$page = !empty($_GET['page']) ? $_GET['page'] : 1;
$size = !empty($_GET['size']) ? $_GET['size'] : 10;
$start = ($page - 1) * $size;
$data = array();
for ($i = $start; $i < $start + $size; $i++) {
    $data[] = "数据$i";
}
echo json_encode(array(
    'code' => 0,
    'msg' => '',
    'data' => $data,
    'total' => 100,
));

这个接口返回一个包含数据和总数的 JSON 对象。

为了方便调试，我们可以设置一个静态 HTML 页面，然后在页面中编写前端代码。

前端代码

HTML 结构

首先，我们需要在页面中添加分页相关的 HTML 结构，如下所示：

<div id="pager">
    <ul class="pagination"></ul>
</div>
<div id="content"></div>

其中 #pager 分为两个部分，#pager .pagination 为分页组件，#content 为显示内容部分。

CSS 样式

接下来，需要为分页组件添加样式，可以自行设计样式，这里提供一个简单的样式供参考：

.pagination {
    display: inline-block;
    margin-bottom: 0;
    padding-left: 0;
    border-radius: 4px;
}
.pagination li {
    display: inline;
}
.pagination a,
.pagination span {
    position: relative;
    float: left;
    padding: 6px 12px;
    margin-left: -1px;
    line-height: 1.42857143;
    color: #428bca;
    text-decoration: none;
    background-color: #fff;
    border: 1px solid #ddd;
}
.pagination a:hover,
.pagination a:focus,
.pagination span:hover,
.pagination span:focus {
    color: #2a6496;
    background-color: #eee;
    border-color: #ddd;
}

JavaScript 代码

然后需要编写分页的 JavaScript 代码，首先声明一组变量：

var pager = $('#pager .pagination'); // 分页组件
var content = $('#content'); // 显示内容
var url = 'your_api_url'; // 后端接口
var size = 10; // 每页显示的条数
var total = 0; // 总条数
var page = 1; // 当前页码

然后编写分页请求方法：

function getPagedData() {
    $.get(url, {page: page, size: size}, function(resp) {
        if (resp.code === 0) {
            content.empty();
            var html = '';
            for (var i = 0; i < resp.data.length; i++) {
                html += '<div>' + resp.data[i] + '</div>';
            }
            content.html(html);
            total = resp.total;
            renderPager(); // 渲染分页组件
        } else {
            console.error(resp.msg);
        }
    }, 'json');
}

此方法通过 AJAX 请求后端接口，获取分页数据并渲染到页面上。

然后需要编写分页渲染方法：

function renderPager() {
    pager.empty();
    var totalPage = Math.ceil(total / size);
    if (totalPage == 1) {
        return;
    }
    for (var i = 1; i <= totalPage; i++) {
        var li = $('<li><a href="#">' + i + '</a></li>');
        if (i === page) {
            li.addClass('active');
        }
        li.click(function() {
            page = parseInt($(this).text());
            getPagedData();
            return false;
        });
        pager.append(li);
    }
}

此方法通过计算总页数和当前页码，生成分页组件 HTML，然后为每个分页按钮绑定点击事件，点击后切换页码并重新请求数据。

最后，页面加载完毕后需要调用 getPagedData() 方法获取第一页数据，代码如下所示：

$(function() {
    getPagedData();
});

示例说明

下面给出两个基于这个无框架 AJAX 分页的示例：

示例 1：图书列表分页

假设我们有一个图书列表，需要分页显示。我们可以使用上面的代码实现分页功能。具体代码如下所示：

<div id="pager">
    <ul class="pagination"></ul>
</div>
<table class="table">
    <thead>
        <tr>
            <th>#</th>
            <th>书名</th>
        </tr>
    </thead>
    <tbody id="content"></tbody>
</table>

var pager = $('#pager .pagination'); // 分页组件
var content = $('#content'); // 显示内容
var url = 'your_api_url'; // 后端接口
var size = 10; // 每页显示的条数
var total = 0; // 总条数
var page = 1; // 当前页码

function getPagedData() {
    $.get(url, {page: page, size: size}, function(resp) {
        if (resp.code === 0) {
            content.empty();
            var html = '';
            for (var i = 0; i < resp.data.length; i++) {
                var book = resp.data[i];
                html += '<tr>';
                html += '<td>' + (i + 1) + '</td>';
                html += '<td>' + book.name + '</td>';
                html += '</tr>';
            }
            content.html(html);
            total = resp.total;
            renderPager(); // 渲染分页组件
        } else {
            console.error(resp.msg);
        }
    }, 'json');
}

function renderPager() {
    pager.empty();
    var totalPage = Math.ceil(total / size);
    if (totalPage == 1) {
        return;
    }
    for (var i = 1; i <= totalPage; i++) {
        var li = $('<li><a href="#">' + i + '</a></li>');
        if (i === page) {
            li.addClass('active');
        }
        li.click(function() {
            page = parseInt($(this).text());
            getPagedData();
            return false;
        });
        pager.append(li);
    }
}

$(function() {
    getPagedData();
});

示例 2：搜索结果分页

假设我们有一个搜索框，用户输入关键字后，我们需要异步加载搜索结果并分页显示。我们同样可以使用上面的代码实现分页功能。具体代码如下所示：

<div id="pager">
    <ul class="pagination"></ul>
</div>
<ul class="list-group" id="content"></ul>
<form class="form-inline">
    <div class="form-group">
        <input type="text" class="form-control" placeholder="关键词" id="keyword">
    </div>
    <button type="submit" class="btn btn-default">搜索</button>
</form>

var pager = $('#pager .pagination'); // 分页组件
var content = $('#content'); // 显示内容
var url = 'your_api_url'; // 后端接口
var size = 10; // 每页显示的条数
var total = 0; // 总条数
var page = 1; // 当前页码

function getPagedData() {
    var keyword = $('#keyword').val();
    $.get(url, {page: page, size: size, keyword: keyword}, function(resp) {
        if (resp.code === 0) {
            content.empty();
            var html = '';
            for (var i = 0; i < resp.data.length; i++) {
                var item = resp.data[i];
                html += '<li class="list-group-item">' + item.title + '</li>';
            }
            content.html(html);
            total = resp.total;
            renderPager(); // 渲染分页组件
        } else {
            console.error(resp.msg);
        }
    }, 'json');
}

function renderPager() {
    pager.empty();
    var totalPage = Math.ceil(total / size);
    if (totalPage == 1) {
        return;
    }
    for (var i = 1; i <= totalPage; i++) {
        var li = $('<li><a href="#">' + i + '</a></li>');
        if (i === page) {
            li.addClass('active');
        }
        li.click(function() {
            page = parseInt($(this).text());
            getPagedData();
            return false;
        });
        pager.append(li);
    }
}

$('form').submit(function() {
    page = 1;
    getPagedData();
    return false;
});

$(function() {
    getPagedData();
});

以上就是基于无框架 AJAX 分页实现的两个示例。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：无框架 Ajax分页(原创) - Python技术站

无框架 Ajax分页(原创)

概述