jEasyUI 添加分页组件学习笔记

1. 什么是 jEasyUI 分页组件？

jEasyUI 是一款基于 jQuery 的 UI 组件库，它提供了一套易于使用、功能强大的 UI 组件，其中包括分页组件。分页组件可以让用户轻松地浏览大量数据，并且按照自己的需求进行分页。

2. 如何添加 jEasyUI 分页组件？

在 HTML 页面中引入 jEasyUI 的样式文件和脚本文件：

htmlCopy Code
<link rel="stylesheet" type="text/css" href="jeasyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="jeasyui/themes/icon.css">
<script type="text/javascript" src="jeasyui/jquery.min.js"></script>
<script type="text/javascript" src="jeasyui/jquery.easyui.min.js"></script>

在页面中设置一个 div 容器，并在该容器中添加分页组件：

htmlCopy Code
<div id="pagination"></div>

在 JavaScript 中初始化分页组件，并设置相关参数：

javascriptCopy Code
$('#pagination').pagination({
    total: 1000,
    pageSize: 10,
    pageNumber: 1,
    pageList: [10, 20, 30, 40, 50],
    onSelectPage: function(pageNumber, pageSize) {
        // 执行相应的操作
    }
});

其中各个参数的含义如下：

total：数据总数
pageSize：每页显示的数据条数
pageNumber：当前页码
pageList：可供选择的每页显示数据条数
onSelectPage：分页组件选中某页时触发的回调函数，可以在该函数中执行相应的操作。

3. 实例

在以下实例中，我们通过 jEasyUI 的分页组件来展示一段长度为 1000 的文本。每页显示 10 条数据，总共需要分成 100 页。

htmlCopy Code
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>jEasyUI 添加分页组件学习笔记</title>
    <link rel="stylesheet" type="text/css" href="jeasyui/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="jeasyui/themes/icon.css">
    <script type="text/javascript" src="jeasyui/jquery.min.js"></script>
    <script type="text/javascript" src="jeasyui/jquery.easyui.min.js"></script>
</head>
<body>
    <div id="pagination"></div>

    <div id="data"></div>

    <script type="text/javascript">
        const data = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce dictum, tortor a pellentesque consequat, magna augue blandit risus, semper bibendum metus enim sed metus. Nullam malesuada purus sed ligula ultrices, nec viverra nulla congue. Donec vel aliquam tellus, eget sodales quam. Donec euismod libero id elit mattis, a accumsan dolor egestas. Aliquam molestie, mi at pretium tempus, nibh velit fringilla justo, ut auctor sapien sapien nec ex. Donec ac sapien vel ex consectetur lacinia. Fusce bibendum dolor in placerat suscipit. Sed ac nisi tortor. Vestibulum id convallis risus. Sed ullamcorper, nisl vel fringilla facilisis, augue mi malesuada nunc, et sodales urna elit euismod ligula.';

        $('#pagination').pagination({
            total: 1000,
            pageSize: 10,
            pageNumber: 1,
            pageList: [10, 20, 30, 40, 50],
            onSelectPage: function(pageNumber, pageSize) {
                showData(pageNumber, pageSize);
            }
        });

        function showData(pageNumber, pageSize) {
            let start = (pageNumber - 1) * pageSize;
            let end = start + pageSize;
            let content = data.substring(start, end);

            $('#data').html(content);
        }

        showData(1, 10);
    </script>
</body>
</html>

在实际使用中，我们可以将实例中的数据替换为我们自己的数据，并根据需要更改各个参数的值和回调函数中的操作。