当前位置: 开发笔记 > 编程语言 > 正文

第二百零九节，jQueryEasyUI，Pagination(分页)组件

作者：黄乐瞳_319 | 来源：互联网 | 2023-10-12 09:56

jQueryEasyUI，Pagination(分页)组件学习要点：1.加载方式2.属性列表3.事件列表4.方法列表本节课重点了解Eas

jQuery EasyUI，Pagination(分页)组件

学习要点：

　　1.加载方式

　　2.属性列表

　　3.事件列表

　　4.方法列表

本节课重点了解 EasyUI 中 Pagination(分页)组件的使用方法，这个组件依赖于 LinkButton(按钮)组件。

一．加载方式

class 加载方式

<div id="box" class="easyui-pagination"
     data-options="total:2000,pageSize:10"
     style="background:#efefef;border:1px solid #ccc;">
div>

JS 加载调用

pagination()将元素执行分页方法

$('#box').pagination({
　　total : 2000,
　　pageSize : 10,
});

实现一个 panel (面板)结合 pagination(分页)分页例子，需要一个 PHP 分页文件

<div id="content" class="easyui-panel" style="height:200px"
     data-options="href:'user.php?page=1'">div>
<div class="easyui-pagination" style="border:1px solid #ccc;"
     data-options="
    total : 5,
    pageSize : 1,
    pageNumber : 1,
    pageList : [1],
    onSelectPage : function (pageNumber, pageSize) {
        $('#content').panel('refresh', 'user.php?page='+pageNumber);
    }
">div>

二．属性列表

total number 总记录数，在分页控件创建时初始的值。默认值1。也就是数据库总条数

$(function () {
    $('#box').pagination({
        total:50,    //总记录数,也就是数据库总条数
        pageSize:5      //每页显示条数,就是每页显示多少条
    });
});

pageSize number 每页显示条数。默认值10。就是每页显示多少条

$(function () {
    $('#box').pagination({
        total:50,    //总记录数,也就是数据库总条数
        pageSize:5      //每页显示条数,就是每页显示多少条
    });
});

pageNumber number 在分页控件创建的时候显示的页数。默认值为1。

$(function () {
    $('#box').pagination({
        total:50,    //总记录数,也就是数据库总条数
        pageSize:5,      //每页显示条数,就是每页显示多少条
        pageNumber:1    //创建的时候显示的页数。默认值为1。
    });
});

pageList array用户可以改变页面大小。pageList 属性定义了页面导航展示的页码。默认值为[10,20,30,50]。每页显示多少条的选择

$(function () {
    $('#box').pagination({
        total:50,    //总记录数,也就是数据库总条数
        pageSize:10,      //每页显示条数,就是每页显示多少条
        pageNumber:1,    //创建的时候显示的页数。默认值为1。
        pageList:[10,20]   //每页显示多少条的选择
    });
});

loading boolean 定义数据是否正在载入。默认值为 false。，有点异常

/**
     //传递数据，第一页，第一条


 **/

$(function () {
    $('#box').pagination({
        total: 50,    //总记录数,也就是数据库总条数
        pageSize: 10,      //每页显示条数,就是每页显示多少条
        pageNumber: 1,    //创建的时候显示的页数。默认值为1。
        pageList: [10, 20],   //每页显示多少条的选择
        loading:false,          //义数据是否正在载入。默认值为 false。
        onSelectPage: function (pageNumber, pageSize) {     //用户选择一个新页面的时候触发
            // pageNumber：新的页数。
            // pageSize: 每页显示的条数。
            $('#content').panel('refresh', 'user.php?page=' + pageNumber + '&pagesize=' + pageSize);
        }
    });
});

buttons array自定义按钮，可用值有：，新增按钮
　　1.每个按钮都有2个属性：
　　　　iconCls：显示背景图片的 CSS 类 ID
　　　　handler：当按钮被点击时调用的一个句柄函数。
　　2.页面已存在元素的选择器对象（例如：
　　　　buttons:'#btnDiv'）。默认值为 null。

/**
     //传递数据，第一页，第一条


 **/

$(function () {
    $('#box').pagination({
        total: 50,    //总记录数,也就是数据库总条数
        pageSize: 10,      //每页显示条数,就是每页显示多少条
        pageNumber: 1,    //创建的时候显示的页数。默认值为1。
        pageList: [10, 20],   //每页显示多少条的选择
        buttons:[{
            iconCls : 'icon-add',
            handler:function () {
               alert('点击时操作')
            }
        },{
            iconCls : 'icon-edit',
            handler:function () {
               alert('点击时操作') } }],
        onSelectPage: function (pageNumber, pageSize) {     //用户选择一个新页面的时候触发
            // pageNumber：新的页数。
            // pageSize: 每页显示的条数。
            $('#content').panel('refresh', 'user.php?page=' + pageNumber + '&pagesize=' + pageSize);
        }
    });
});

layout array分页控件布局定义。布局选项可以包含一个或多个值：数组方式布局
　　1) list：页面显示条数列表。
　　2) sep：页面按钮分割线。
　　3) first：首页按钮。
　　4) prev：上一页按钮。
　　5) next：下一页按钮。
　　6) last：尾页按钮。
　　7) refresh：刷新按钮。
　　8) manual：手工输入当前页的输入框。
　　9) links：页面数链接。

/**
     //传递数据，第一页，第一条


 **/

$(function () {
    $('#box').pagination({
        total: 50,    //总记录数,也就是数据库总条数
        pageSize: 10,      //每页显示条数,就是每页显示多少条
        pageNumber: 1,    //创建的时候显示的页数。默认值为1。
        pageList: [10, 20],   //每页显示多少条的选择
        onSelectPage: function (pageNumber, pageSize) {     //用户选择一个新页面的时候触发
            // pageNumber：新的页数。
            // pageSize: 每页显示的条数。
            $('#content').panel('refresh', 'user.php?page=' + pageNumber + '&pagesize=' + pageSize);
        },
        layout:['list','sep','first','prev','links','next','last','manual']
    });
});

showPageList boolean 定义是否显示页面导航列表。是否显示可选每页显示多少条

/**
     //传递数据，第一页，第一条


 **/

$(function () {
    $('#box').pagination({
        total: 50,    //总记录数,也就是数据库总条数
        pageSize: 10,      //每页显示条数,就是每页显示多少条
        pageNumber: 1,    //创建的时候显示的页数。默认值为1。
        pageList: [10, 20],   //每页显示多少条的选择
        onSelectPage: function (pageNumber, pageSize) {     //用户选择一个新页面的时候触发
            // pageNumber：新的页数。
            // pageSize: 每页显示的条数。
            $('#content').panel('refresh', 'user.php?page=' + pageNumber + '&pagesize=' + pageSize);
        },
        showPageList:false      //是否显示可选每页显示多少条
    });
});

showRefresh boolean 定义是否显示刷新按钮。

$(function () {
    $('#box').pagination({
        total: 50,    //总记录数,也就是数据库总条数
        pageSize: 10,      //每页显示条数,就是每页显示多少条
        pageNumber: 1,    //创建的时候显示的页数。默认值为1。
        pageList: [10, 20],   //每页显示多少条的选择
        onSelectPage: function (pageNumber, pageSize) {     //用户选择一个新页面的时候触发
            // pageNumber：新的页数。
            // pageSize: 每页显示的条数。
            $('#content').panel('refresh', 'user.php?page=' + pageNumber + '&pagesize=' + pageSize);
        },
        showRefresh:false      //定义是否显示刷新按钮。
    });
});

beforePageText string 在输入组件之前显示一个 label 标签。输入页前的文字

/**
     //传递数据，第一页，第一条


 **/

$(function () {
    $('#box').pagination({
        total: 50,    //总记录数,也就是数据库总条数
        pageSize: 10,      //每页显示条数,就是每页显示多少条
        pageNumber: 1,    //创建的时候显示的页数。默认值为1。
        pageList: [10, 20],   //每页显示多少条的选择
        onSelectPage: function (pageNumber, pageSize) {     //用户选择一个新页面的时候触发
            // pageNumber：新的页数。
            // pageSize: 每页显示的条数。
            $('#content').panel('refresh', 'user.php?page=' + pageNumber + '&pagesize=' + pageSize);
        },
        beforePageText:'目前第',      //输入页前的文字
        afterPageText:'一共{pages}页'  //输入页后的文字
    });
});

afterPageText string 在输入组件之后显示一个 label 标签。输入页后的文字

/**
     //传递数据，第一页，第一条


 **/

$(function () {
    $('#box').pagination({
        total: 50,    //总记录数,也就是数据库总条数
        pageSize: 10,      //每页显示条数,就是每页显示多少条
        pageNumber: 1,    //创建的时候显示的页数。默认值为1。
        pageList: [10, 20],   //每页显示多少条的选择
        onSelectPage: function (pageNumber, pageSize) {     //用户选择一个新页面的时候触发
            // pageNumber：新的页数。
            // pageSize: 每页显示的条数。
            $('#content').panel('refresh', 'user.php?page=' + pageNumber + '&pagesize=' + pageSize);
        },
        beforePageText:'目前第',      //输入页前的文字
        afterPageText:'一共{pages}页'  //输入页后的文字
    });
});

displayMsg string 设置显示页面信息。

/**
     //传递数据，第一页，第一条


 **/

$(function () {
    $('#box').pagination({
        total: 50,    //总记录数,也就是数据库总条数
        pageSize: 10,      //每页显示条数,就是每页显示多少条
        pageNumber: 1,    //创建的时候显示的页数。默认值为1。
        pageList: [10, 20],   //每页显示多少条的选择
        onSelectPage: function (pageNumber, pageSize) {     //用户选择一个新页面的时候触发
            // pageNumber：新的页数。
            // pageSize: 每页显示的条数。
            $('#content').panel('refresh', 'user.php?page=' + pageNumber + '&pagesize=' + pageSize);
        },
        beforePageText:'目前第',      //输入页前的文字
        afterPageText:'一共{pages}页',  //输入页后的文字
        displayMsg:'显示{from}到{to}个会员,共{total}会员'
    });
});

三．事件列表

onSelectPage pageNumber,pageSize用户选择一个新页面的时候触发。回调函数包含2个参数：
　　pageNumber：新的页数。
　　pageSize: 每页显示的条数。

/**
     //传递数据，第一页，第一条


 **/

$(function () {
    $('#box').pagination({
        total: 50,    //总记录数,也就是数据库总条数
        pageSize: 10,      //每页显示条数,就是每页显示多少条
        pageNumber: 1,    //创建的时候显示的页数。默认值为1。
        pageList: [10, 20],   //每页显示多少条的选择
        onSelectPage: function (pageNumber, pageSize) {     //用户选择一个新页面的时候触发
            // pageNumber：新的页数。
            // pageSize: 每页显示的条数。
            $('#content').panel('refresh', 'user.php?page=' + pageNumber + '&pagesize=' + pageSize); }
    });
});

onBeforeRefresh pageNumber,pageSize在点击刷新按钮刷新之前触发，返回false 可以取消刷新动作。

　　pageNumber：新的页数。
　　pageSize: 每页显示的条数。

/**
     //传递数据，第一页，第一条


 **/

$(function () {
    $('#box').pagination({
        total: 50,    //总记录数,也就是数据库总条数
        pageSize: 10,      //每页显示条数,就是每页显示多少条
        pageNumber: 1,    //创建的时候显示的页数。默认值为1。
        pageList: [10, 20],   //每页显示多少条的选择
        onSelectPage: function (pageNumber, pageSize) {     //用户选择一个新页面的时候触发
            // pageNumber：新的页数。
            // pageSize: 每页显示的条数。
            $('#content').panel('refresh', 'user.php?page=' + pageNumber + '&pagesize=' + pageSize);
        },
        onBeforeRefresh:function (pageNumber,pageSize) {
            alert('在点击刷新按钮刷新之前触发');
        }
    });
});

onRefresh pageNumber,pageSize 刷新之后触发。

　　pageNumber：新的页数。
　　pageSize: 每页显示的条数。

/**
     //传递数据，第一页，第一条


 **/

$(function () {
    $('#box').pagination({
        total: 50,    //总记录数,也就是数据库总条数
        pageSize: 10,      //每页显示条数,就是每页显示多少条
        pageNumber: 1,    //创建的时候显示的页数。默认值为1。
        pageList: [10, 20],   //每页显示多少条的选择
        onSelectPage: function (pageNumber, pageSize) {     //用户选择一个新页面的时候触发
            // pageNumber：新的页数。
            // pageSize: 每页显示的条数。
            $('#content').panel('refresh', 'user.php?page=' + pageNumber + '&pagesize=' + pageSize);
        },
        onRefresh:function (pageNumber,pageSize) {
            alert('刷新之后触发'); }
    });
});

onChangePageSize pageSize '改变每页显示条数触发。

　　pageSize: 每页显示的条数。

$(function () {
    $('#box').pagination({
        total: 50,    //总记录数,也就是数据库总条数
        pageSize: 10,      //每页显示条数,就是每页显示多少条
        pageNumber: 1,    //创建的时候显示的页数。默认值为1。
        pageList: [10, 20],   //每页显示多少条的选择
        onSelectPage: function (pageNumber, pageSize) {     //用户选择一个新页面的时候触发
            // pageNumber：新的页数。
            // pageSize: 每页显示的条数。
            $('#content').panel('refresh', 'user.php?page=' + pageNumber + '&pagesize=' + pageSize);
        },
        onChangePageSize:function (pageSize) {
            alert('改变每页显示条数触发'); }
    });
});

三．方法列表

options none 返回参数对象。

/**
     //传递数据，第一页，第一条


 **/

$(function () {
    $('#box').pagination({
        total: 50,    //总记录数,也就是数据库总条数
        pageSize: 10,      //每页显示条数,就是每页显示多少条
        pageNumber: 1,    //创建的时候显示的页数。默认值为1。
        pageList: [10, 20],   //每页显示多少条的选择
        onSelectPage: function (pageNumber, pageSize) {     //用户选择一个新页面的时候触发
            // pageNumber：新的页数。
            // pageSize: 每页显示的条数。
            $('#content').panel('refresh', 'user.php?page=' + pageNumber + '&pagesize=' + pageSize);
        },
    });
    alert($('#box').pagination('options'));    //返回参数对象
});

loading none 提醒分页控件正在加载中。在加载分页时刷新按钮旋转

/**
     //传递数据，第一页，第一条


 **/

$(function () {
    $('#box').pagination({
        total: 50,    //总记录数,也就是数据库总条数
        pageSize: 10,      //每页显示条数,就是每页显示多少条
        pageNumber: 1,    //创建的时候显示的页数。默认值为1。
        pageList: [10, 20],   //每页显示多少条的选择
        onSelectPage: function (pageNumber, pageSize) {     //点击分页时触发
            $('#box').pagination('loading');    //在加载分页时刷新按钮旋转
            $('#content').panel('refresh','user.php?page=' + pageNumber + '&pagesize=' + pageSize);  //重新加载数据
            setTimeout(function () {
                $('#box').pagination('loaded'); //分页加载完成时刷新按钮停止
            }, 1000);
        }
    });
});

loaded none 提醒分页控件加载完成。分页加载完成时刷新按钮停止

/**
     //传递数据，第一页，第一条


 **/

$(function () {
    $('#box').pagination({
        total: 50,    //总记录数,也就是数据库总条数
        pageSize: 10,      //每页显示条数,就是每页显示多少条
        pageNumber: 1,    //创建的时候显示的页数。默认值为1。
        pageList: [10, 20],   //每页显示多少条的选择
        onSelectPage: function (pageNumber, pageSize) {     //点击分页时触发
            $('#box').pagination('loading');    //在加载分页时刷新按钮旋转
            $('#content').panel('refresh','user.php?page=' + pageNumber + '&pagesize=' + pageSize);  //重新加载数据
            setTimeout(function () {
                $('#box').pagination('loaded'); //分页加载完成时刷新按钮停止
            }, 1000);
        }
    });
});

refresh options 刷新并显示分页栏信息。值为一个对象里面写要改变的信息属性

/**
     //传递数据，第一页，第一条


 **/

$(function () {
    $('#box').pagination({
        total: 50,    //总记录数,也就是数据库总条数
        pageSize: 10,      //每页显示条数,就是每页显示多少条
        pageNumber: 1,    //创建的时候显示的页数。默认值为1。
        pageList: [10, 20],   //每页显示多少条的选择
        onSelectPage: function (pageNumber, pageSize) {     //点击分页时触发
            $('#box').pagination('loading');    //在加载分页时刷新按钮旋转
            $('#content').panel('refresh', 'user.php?page=' + pageNumber + '&pagesize=' + pageSize);  //重新加载数据
            setTimeout(function () {
                $('#box').pagination('loaded'); //分页加载完成时刷新按钮停止
            }, 1000);
        }
    });
    $(document).click(function () {
        $('#box').pagination('refresh', {
            pageSize: 20, }); });
});

select page 选择一个新页面，页面索引从1开始。值为要改变的分页索引

/**
     //传递数据，第一页，第一条


 **/

$(function () {
    $('#box').pagination({
        total: 50,    //总记录数,也就是数据库总条数
        pageSize: 10,      //每页显示条数,就是每页显示多少条
        pageNumber: 1,    //创建的时候显示的页数。默认值为1。
        pageList: [10, 20],   //每页显示多少条的选择
        onSelectPage: function (pageNumber, pageSize) {     //点击分页时触发
            $('#box').pagination('loading');    //在加载分页时刷新按钮旋转
            $('#content').panel('refresh', 'user.php?page=' + pageNumber + '&pagesize=' + pageSize);  //重新加载数据
            setTimeout(function () {
                $('#box').pagination('loaded'); //分页加载完成时刷新按钮停止
            }, 1000);
        }
    });
    $(document).click(function () {
        $('#box').pagination('select', 2); });
});

PS：我们可以使用$.fn.pagination.defaults 重写默认值对象。见前面章节

推荐阅读

select
关于cuowu类的错误提示和使用AdjustmentListener的问题

本文讨论了一个关于cuowu类的问题，作者在使用cuowu类时遇到了错误提示和使用AdjustmentListener的问题。文章提供了16个解决方案，并给出了两个可能导致错误的原因。 ... [详细]

蜡笔小新 2023-12-13 22:09:56
function
PHP图片截取方法及应用实例

本文介绍了使用PHP动态切割JPEG图片的方法，并提供了应用实例，包括截取视频图、提取文章内容中的图片地址、裁切图片等问题。详细介绍了相关的PHP函数和参数的使用，以及图片切割的具体步骤。同时，还提供了一些注意事项和优化建议。通过本文的学习，读者可以掌握PHP图片截取的技巧，实现自己的需求。 ... [详细]

蜡笔小新 2023-12-14 16:44:09
select
CSS3选择器的使用方法详解，提高Web开发效率和精准度

本文详细介绍了CSS3新增的选择器方法，包括属性选择器的使用。通过CSS3选择器，可以提高Web开发的效率和精准度，使得查找元素更加方便和快捷。同时，本文还对属性选择器的各种用法进行了详细解释，并给出了相应的代码示例。通过学习本文，读者可以更好地掌握CSS3选择器的使用方法，提升自己的Web开发能力。 ... [详细]

蜡笔小新 2023-12-14 14:37:52
cookie
如何限制php数据库链接数和连接超时时间？

本文介绍了如何使用php限制数据库插入的条数并显示每次插入数据库之间的数据数目，以及避免重复提交的方法。同时还介绍了如何限制某一个数据库用户的并发连接数，以及设置数据库的连接数和连接超时时间的方法。最后提供了一些关于浏览器在线用户数和数据库连接数量比例的参考值。 ... [详细]

蜡笔小新 2023-12-14 14:06:10
select
如何使用Java获取服务器硬件信息和磁盘负载率

本文介绍了使用Java编程语言获取服务器硬件信息和磁盘负载率的方法。首先在远程服务器上搭建一个支持服务端语言的HTTP服务，并获取服务器的磁盘信息，并将结果输出。然后在本地使用JS编写一个AJAX脚本，远程请求服务端的程序，得到结果并展示给用户。其中还介绍了如何提取硬盘序列号的方法。 ... [详细]

蜡笔小新 2023-12-14 13:56:20
main
OC学习笔记之@property和@synthesize

本文介绍了OC学习笔记中的@property和@synthesize，包括属性的定义和合成的使用方法。通过示例代码详细讲解了@property和@synthesize的作用和用法。 ... [详细]

蜡笔小新 2023-12-14 12:05:06
select
VB.NET在线急等问题解决方法，如何统计数据库字段下的数据并显示在文本框里？

本文介绍了一个在线急等问题解决方法，即如何统计数据库中某个字段下的所有数据，并将结果显示在文本框里。作者提到了自己是一个菜鸟，希望能够得到帮助。作者使用的是ACCESS数据库，并且给出了一个例子，希望得到的结果是560。作者还提到自己已经尝试了使用"select sum(字段2) from 表名"的语句，得到的结果是650，但不知道如何得到560。希望能够得到解决方案。 ... [详细]

蜡笔小新 2023-12-13 15:15:30
select
高质量SQL书写的30条建议

本文提供了30条关于优化SQL的建议，包括避免使用select *，使用具体字段，以及使用limit 1等。这些建议是基于实际开发经验总结出来的，旨在帮助读者优化SQL查询。 ... [详细]

蜡笔小新 2023-12-13 13:24:33
split
Html5-Canvas实现简易的抽奖转盘效果

本文介绍了如何使用Html5和Canvas标签来实现简易的抽奖转盘效果，同时使用了jQueryRotate.js旋转插件。文章中给出了主要的html和css代码，并展示了实现的基本效果。 ... [详细]

蜡笔小新 2023-12-13 06:02:20
select
深入理解CSS中的margin属性及其应用场景

本文主要介绍了CSS中的margin属性及其应用场景，包括垂直外边距合并、padding的使用时机、行内替换元素与费替换元素的区别、margin的基线、盒子的物理大小、显示大小、逻辑大小等知识点。通过深入理解这些概念，读者可以更好地掌握margin的用法和原理。同时，文中提供了一些相关的文档和规范供读者参考。 ... [详细]

蜡笔小新 2023-12-12 18:01:10
main
单击时动态创建
元素 - Dynamically create
element on click

Ihavethefollowingonhtml我在html上有以下内容<html><head><scriptsrc..3003_Tes ... [详细]

蜡笔小新 2023-12-12 15:59:36
version
MooTools和JQuery并排 - MooTools and JQuery Side by Side

IjustinheritedsomewebpageswhichusesMooTools.IneverusedMooTools.NowIneedtoaddsomef ... [详细]

蜡笔小新 2023-12-12 13:43:58
select
Android Material Design风格的日期时间选择器TimeSelector

本文介绍了一款名为TimeSelector的Android日期时间选择器，采用了Material Design风格，可以在Android Studio中通过gradle添加依赖来使用，也可以在Eclipse中下载源码使用。文章详细介绍了TimeSelector的构造方法和参数说明，以及如何使用回调函数来处理选取时间后的操作。同时还提供了示例代码和可选的起始时间和结束时间设置。 ... [详细]

蜡笔小新 2023-12-11 13:07:46
cookie
Android实战——jsoup实现网络爬虫，糗事百科项目的起步

本文介绍了Android实战中使用jsoup实现网络爬虫的方法，以糗事百科项目为例。对于初学者来说，数据源的缺乏是做项目的最大烦恼之一。本文讲述了如何使用网络爬虫获取数据，并以糗事百科作为练手项目。同时，提到了使用jsoup需要结合前端基础知识，以及如果学过JS的话可以更轻松地使用该框架。 ... [详细]

蜡笔小新 2023-12-11 09:19:45
select
如何在Jquery中通过其样式值获取元素

本文介绍了如何在Jquery中通过元素的样式值获取元素，并将其赋值给一个变量。提供了5种解决方案供参考。 ... [详细]

蜡笔小新 2023-12-10 04:03:11

黄乐瞳_319

这个家伙很懒，什么也没留下！

Tags | 热门标签

RankList | 热门文章