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

第二百零九节，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 重写默认值对象。见前面章节

推荐阅读

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

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

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

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

蜡笔小新 2023-12-14 14:37:52
list
Hibernate基础映射

在说Hibernate映射前，我们先来了解下对象关系映射ORM。ORM的实现思想就是将关系数据库中表的数据映射成对象，以对象的形式展现。这样开发人员就可以把对数据库的操作转化为对 ... [详细]

蜡笔小新 2023-12-14 10:57:47
list
Voicewo在线语音识别转换jQuery插件的特点和示例

本文介绍了一款名为Voicewo的在线语音识别转换jQuery插件，该插件具有快速、架构、风格、扩展和兼容等特点，适合在互联网应用中使用。同时还提供了一个快速示例供开发人员参考。 ... [详细]

蜡笔小新 2023-12-13 20:01:16
数组
java 线程死锁模拟

1，关于死锁的理解死锁，我们可以简单的理解为是两个线程同时使用同一资源，两个线程又得不到相应的资源而造成永无相互等待的情况。 2，模拟死锁背景介绍：我们创建一个朋友 ... [详细]

蜡笔小新 2023-12-13 19:12:25
数组
后台获取视图对应的字符串

1.帮助类后台获取视图对应的字符串publicclassViewHelper{将View输出为字符串(注：不会执行对应的ac ... [详细]

蜡笔小新 2023-12-13 18:03:01
数组
工程中添加Android Dependencies

在project.properties添加#Projecttarget.targetandroid-19android.library.reference.1..Sliding ... [详细]

蜡笔小新 2023-12-13 12:08:09
数组
Html5-Canvas实现简易的抽奖转盘效果

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

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

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

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

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

蜡笔小新 2023-12-12 15:59:36
nodejs
前端人员必须知道的三个问题及其发展阶段

本文介绍了前端人员必须知道的三个问题，即前端都做哪些事、前端都需要哪些技术，以及前端的发展阶段。初级阶段包括HTML、CSS、JavaScript和jQuery的基础知识。进阶阶段涵盖了面向对象编程、响应式设计、Ajax、HTML5等新兴技术。高级阶段包括架构基础、模块化开发、预编译和前沿规范等内容。此外，还介绍了一些后端服务，如Node.js。 ... [详细]

蜡笔小新 2023-12-12 12:45:59
spring
springboot项目引入jquery浏览器报404错误的解决办法

本文介绍了在springboot项目中引入jquery时，可能会出现浏览器报404错误的问题，并提供了解决办法。问题可能是由于将jquery.js文件复制粘贴到错误的目录导致的，解决办法是将文件复制粘贴到正确的目录下。如果问题仍然存在，可能是其他原因导致的。 ... [详细]

蜡笔小新 2023-12-12 12:06:25
jar
Swing组件及其用法，图标接口的定义和创建方法

本文介绍了Swing组件的用法，重点讲解了图标接口的定义和创建方法。图标接口用来将图标与各种组件相关联，可以是简单的绘画或使用磁盘上的GIF格式图像。文章详细介绍了图标接口的属性和绘制方法，并给出了一个菱形图标的实现示例。该示例可以配置图标的尺寸、颜色和填充状态。 ... [详细]

蜡笔小新 2023-12-11 21:03:59
jar
HTML5网页模板怎么加百度统计？

本文介绍了如何在HTML5网页模板中加入百度统计，并对模板文件、css样式表、js插件库等内容进行了说明。同时还解答了关于HTML5网页模板的使用方法、表单提交、域名和空间的问题，并介绍了如何使用Visual Studio 2010创建HTML5模板。此外，还提到了使用Jquery编写美好的HTML5前端框架模板的方法，以及制作企业HTML5网站模板和支持HTML5的CMS。 ... [详细]

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

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

蜡笔小新 2023-12-11 09:19:45

黄乐瞳_319

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

Tags | 热门标签

RankList | 热门文章