当前位置：首页 > 文章列表 > 文章 > 前端 > DataTables每页显示5行设置方法

DataTables每页显示5行设置方法

2026-01-19 08:37:12 0浏览收藏

文章小白一枚，正在不断学习积累知识，现将学习到的知识记录一下，也是将我的所得分享给大家！而今天这篇文章《DataTables 设置每页显示5行方法》带大家来了解一下##content_title##，希望对大家的知识积累有所帮助，从而弥补自己的不足，助力实战开发！

如何在 DataTables 中正确设置每页显示 5 行数据

本文详解在使用 DataTables（尤其是服务端分页模式）时，为何 `pageLength: 5` 失效，并提供可立即生效的配置方案，包括关键参数组合、常见陷阱及完整可运行示例。

在 DataTables 中，设置每页显示行数看似简单（如 pageLength: 5），但在 服务端分页（serverSide: true） 场景下，若后端未同步响应分页参数，前端配置将无法生效——这正是你遇到“仍显示 14 行而非 5 行”的根本原因。

✅ 正确配置要点（服务端分页必备）

pageLength 必须显式声明（推荐带引号写法 "pageLength": 5，兼容性更佳）；
paging: true 必须启用（即使 serverSide: true 默认开启，显式声明可避免某些版本兼容问题）；
lengthMenu 应为一维数组或标准二维数组：
- ✅ 推荐简洁写法："lengthMenu": [5, 10, 20]（隐藏“全部”选项，避免干扰）；
- ⚠️ 避免混用字符串与数字（如 ['Todos']）导致解析异常；
后端必须接收并应用 start 和 length 参数：
DataTables 在服务端模式下会自动在 AJAX 请求中携带 start（起始偏移）和 length（每页数量）字段（例如 ?start=0&length=5）。你的后端 API 必须据此截取数据并返回对应数量结果，否则前端无论怎么配都无效。

? 修正后的完整代码（已验证可用）

var select_server_table = $("#select_server_table_example").DataTable({
    processing: true,
    serverSide: true,
    paging: true,              // ✅ 关键：显式启用分页
    pageLength: 5,             // ✅ 每页默认显示 5 行
    lengthMenu: [5, 10, 20],  // ✅ 简洁一维菜单，避免字符串歧义

    ajax: {
        url: "http://192.168.03.30:8000/api/ipc/all",
        type: "GET",
        headers: {
            Authorization: "Bearer " + getToken,
        },
        data: function(d) {
            // ✅ DataTables 自动注入 start/length，无需手动拼接
            d.search = d.search?.value || ''; // 安全取值
            return d; // 直接返回对象，避免 JSON.stringify 导致参数丢失
        },
        dataSrc: function (response) {
            console.log("Backend response:", response);
            return response.ipcs || [];
        }
    },

    columns: [
        { data: "device_id", title: "Device ID" },
        { data: "name", title: "Name" },
        { data: "group", title: "Group" }
    ],

    error: function(xhr, error, thrown) {
        console.error("DataTables AJAX Error:", thrown);
    }
});

⚠️ 常见错误排查清单

❌ 错误：data: function(d) { return JSON.stringify(d); }
→ 后果：AJAX 请求体变为字符串，后端无法解析 start/length，导致忽略分页逻辑。
✅ 正确：直接 return d;，让 DataTables 自动序列化为查询参数。
❌ 错误：后端未读取 length 参数，始终返回全部 14 条数据。
→ 验证方法：在浏览器 Network 面板中检查请求 URL 是否含 &length=5，再确认后端是否据此限制 SQL LIMIT 或数组切片。
❌ 错误：lengthChange: false 禁用了长度选择器，但未配合 pageLength 强制初始值 → 可能继承旧状态。
✅ 建议：保留 lengthChange: true（方便调试），上线前设为 false 并确保 pageLength 明确。

? 总结

Datatables 的 pageLength 不是“前端展示上限”，而是向后端发起的分页指令。在 serverSide: true 下，它的生效链条是：
前端配置 pageLength → DataTables 发送 length=N 参数 → 后端严格按此截取数据 → 前端渲染 N 行。
任一环节断裂（尤其后端未实现），都将导致“配置失效”。务必前后端协同验证，方能稳定实现每页 5 行的目标。

理论要掌握，实操不能落！以上关于《DataTables每页显示5行设置方法》的详细介绍，大家都掌握了吧！如果想要继续提升自己的能力，那么就来关注golang学习网公众号吧！