EasyUI基础入门之Pagination(分页)

最新推荐文章于 2020-07-24 15:11:02 发布
最新推荐文章于 2020-07-24 15:11:02 发布
阅读量146 收藏
点赞数
文章标签： php 前端 javascript ViewUI

前言

        对于一些企业级的应用来说(非站点),页面上最为基本的内容也就是表格和form了。对于类似于ERP这类系统来说数据记录比較大,前端表格展示的时候必需得实现分页功能了。恰巧EasyUI就提供了分页组件Pagination

       pagination覆盖默认$.fn.pagination.defaults.Pagination分页同意用户通过分页的方式来浏览数据，它支持可配置的选项,页面导航和页面长度的选择,并且用户能够加入�分页的右边定制button来增强分页功能。

      只是pagination是依赖于linkbutton的,因此这里有必要了解下linkbutton。

linkbutton

      使用$.fn.linkbutton.defaults重载默认值。

      链接button用户创建超链接button。它是表示正常的<a>标记。能够显示图标和文字,或只不过图标或文字。button的宽度能够动态收缩/展开,以适应文本标签。依照惯例接下来看看其属性、事件、方法。

属性

名称类型描写叙述信息默认值
idstring该组件的唯一标示IDnull
disabledboolean当设置为true时标示禁用该buttonfalse
toggleboolean设置为true时,用户能够改变button的状态为选择或取消选择,自版本号1.3.3開始false
selectedboolean表明该button的状态是否为选择,自1.3.3開始false
groupstring表明哪些button在同一个组中,開始于1.3.3null
plainboolean设置为true时会显示间接效果false
textstringbutton上的文字null
iconClsstring在左边显示一个16*16大小图标的css类''
iconAlignstringbutton上图标显示的位置,可选值为left、right、top、bottom開始于1.3.2left
sizestringbutton的大小,可选值为small、large開始于1.3.6small

事件

       linkbutton提供了一个onclik事件,当按钮被点击时触发。開始于1.3.6

方法

名称參数描写叙述信息                                                         
optionsnone返回属性对象
disablenone

禁用按钮

实例:

$('#btn').linkbutton('disable')

enablenone启用button,用法类似上面
selectnone选择该button開始于1.3.6
unselectnone取消选择,開始于1.3.6

 使用方式

       linkbutton相同提供两种使用方式。

       1、通过html标记创建

 <a id="btn" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-search'">easyui</a>
       2、通过js脚本创建 
<a id="btn" href="#">easyui</a>
$('#btn').linkbutton({ iconCls: 'icon-search' });
        以上两种方式都能够创建linkbutton。以下看简单的样例,对于主要的链接跳转这里就不多题了。

        下面样例使用JQuery绑定单击处理函数给链接;

<body>
	<a id="btn" href="www.baidu.com" class="easyui-linkbutton" data-options="iconCls:'icon-search'">easyui</a>
	<script>
		$(function () {
			$('#btn').bind('click', function () {
				alert('按钮被点击了');
			});
		});
	</script>
</body>
        好了,关于linkbutton大概也就这么多,我们能够简单的觉得其和普通的<a>标签没啥差别,仅仅是统一了easyui的样式。

 Pagination

       对于linkbutton有了一定的了解之后就能够着手学习pagination了,值域pagination为何会依赖于linkbutton,我想主要原因还是pagination提供分页右边按钮的定制化(那些个按钮就是linkbutton啦)。闲话不多说,相同从官网api開始走起。

       使用$.fn.pagination.defaults重载默认值。

       pagination同意用户导航数据页面。支持可配置选项页面当行和页面长度的选择。并且用户能够加入�自己定义button在正确的分页,增强功能。

       依赖组件:linkbutton

 属性

       分页插件具有的属性还是比較的多的,详细有例如以下一些属性:

名称类型描写叙述信息               默认值
totalnumber总记录数,该属性在创建分页的时候是必须设置的1
pageSizenumber每页显示的记录数10
pageNumbernumber当分页创建完成时显示当前的页码    1
pageListarray

用户可以灵活的改变每页显示的记录数。可选

项存在数组中示比例如以下:

$.('#pager').pagination(
{
    pageList:[10,20,30]
});
 
loadingboolean定义数据是否正在加载(提醒)false
buttonsarray,selector

自己定义button,两个值。

1、一个array数组,每一个button包括两个属性

iconCls:显示背景图片的css类

handler:当button被点击时调用的一个句柄函数

2、selector指示该buttons

一个简单的样例:

1、使用html标记来创建:

<div class="easyui-pagination" style="border:1px solid #ccc" data-options="

    total: 114,
    buttons: [{
        iconCls:'icon-add',
        handler:function(){alert('add')}
       },'-',{
       iconCls:'icon-save',
       handler:function(){alert('save')}
}]">
</div>

  2、使用js脚本创建:

<div class="easyui-pagination" style="border:1px solid #ccc" id="pager">
</div>
<script>
 $('#pager').pagination({
    total: 11,
    buttons: [{
iconCls: 'icon-add',
handler: function () {
alert('add')
}
   }, '-', {
iconCls: 'icon-save',
handler: function () {
alert('save')
}
}]
    });
</script>
null
layoutarray

定义pagination的布局,開始于版本号    1.3.5

布局选项可能包括例如以下的值:

list:页面大小集合

sep:button指间的分隔符

first:第一个button

prev:前一个button

next:后一个button

last:最后一个button

refresh:刷新button

manual:手动页数的输入,同意进入的页码

links:页面数字的链接.

简单演示样例代码:

<script>
$('#pager').pagination({
total: 11,
buttons: [{
iconCls: 'icon-add',
handler: function () {
alert('add')
}
   }, '-', {
iconCls: 'icon-save',
handler: function () {
alert('save')
}
   }],
layout:['list','sep',first','links','last']
}); 
</script>
 
linksnumber链接的数量,当links被定义在layout属性中的时候该设置才有效。開始于1.3.510
showPageListboolean定义是否显示可选择的每页记录数。true
showRefreshboolean定义是否显示刷新button。true
beforePageTextstring在输入框之间显示的符号Page
afterPageTextstring在输入框之后显示的符号of{pages}
dispalyMsgstring在插件右上方显分页信息Displaying {from} to {to} of {total} items

       是吧,pagination属性挺多、挺繁琐的呢。只是不必在意正是由于这样我们才干灵活的对事实上现定制化。须要说明的是最后3个属性通常是不会动的。local里面的语言js就已经定义好了。

事件

名称属性描写叙述信息
onSelectPagepageNumber,pageSize

当用户进行翻页的时候触发,回调函数包括2个參数:

pageNumber:下一页页码

pageSize:下一页显示记录数

演示样例: 

$('#pp').pagination({
onSelectPage:function(pageNumber, pageSize){
$(this).pagination('loading');
alert('pageNumber:'+pageNumber+',pageSize:'+pageSize);
$(this).pagination('loaded');
}
});
 
onBeforeRefreshpageNumber,pageSize刷新之前触发,返回false将取消刷新。
onRefreshpageNumber,pageSize刷新之后触发。
onChangePageSizepageSize当用户改动每页记录数时触发。
 
  
方法
 
  

 
  
 
 
  
名称參数描写叙述信息
optionsnone返回分页属性对象                        
loadingnone提醒分页插件正在下载
loadednone提醒分页插件已经下载
refreshoptions 
刷新并显示信息。1.3可用。
 
$('#pp').pagination('refresh');	// 刷新页面右栏的信息
$('#pp').pagination('refresh',{	// 改变选项并刷新页面右栏的信息
	total: 114,
	pageNumber: 6
});
 
selectpage 
选择一个新页面。页面索引从1開始。1.3可用。
 
$('#pp').pagination('select');	// refresh the current page
$('#pp').pagination('select', 2);	// select the second page
 
 
  

 
  
使用方式
 
  
     1、创建分页标记:
 
  
 
  
<div id="pp" class="easyui-pagination" data-options="total:2000,pageSize:10" style="background:#efefef;border:1px solid #ccc;">
</div>  
       2、使用脚本创建: 
  
 
  
<div id="pp" style="background:#efefef;border:1px solid #ccc;"></div>  
	<div id="pp" style="background:#efefef;border:1px solid #ccc;"></div>
 $('#pp').pagination({   
    total:2000,   
    pageSize:10   
});  
 
  
Demo
 
  
      官网提供的pagination演示样例是一些定制,这里我就不再多提了,读者能够依据上面表格中的一些熟悉、方法自己去灵活的定制。这里我认为比較有意思的demo还是api中的。
 
  
      通过面板和pagination来使用ajax分页。当用户选择一个新页面,面板将显示指定页面的对应内容。代码例如以下:
 
  
 
  
<div id="content" class="easyui-panel" style="height:200px" data-options="href:'show_content.php?page=1'">
	</div>
	<div class="easyui-pagination" style="border:1px solid #ccc;" data-options="   
            total: 2000,   
            pageSize: 10,  
																				
            onSelectPage: function(pageNumber, pageSize){   
                $('#content').panel('refresh', 'show_content.php?page='+pageNumber);依据选择的pageNumber刷新panel里面的页面内容 
            }">
	</div>
 
  
        好了,基于pagination的学习先就到这了,兴许用到的地方目測会很的多的呢。
 
  
        独立网站:liangtao.sinaapp.com/?p=209
 
  

 
 
 


                

        

        




    




            

                    
            

    

      

        

            

              
                
                  weixin_33762321
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                      0
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    0
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                    0
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      










                



	

		

			

				
					
jQuery EasyUI API 中文文档 - Pagination分页

				
			

			

				

					10-28
				

			

		

		

			
				
jQuery EasyUI API 中文文档 - Pagination分页，使用jQuery EasyUI的朋友可以参考下。

			
		

	



                

              
                



	

		

			

				
					
jQuery EasyUI API 中文文档 – Pagination分页

				
			

			

				

					12-11
				

			

		

		

			
				
用 $.fn.pagination.defaults 重写了 defaults。 依赖 linkbutton 用法 代码如下: ”pp” xss=removed></div> 代码如下: $(‘#pp’).pagination({ total:2000, pageSize:10 });  特性      名称  类型  说明  默认值...

			
		

	



                


  
              

                


	

		

			

				
					
【EasyUI篇】Pagination分页组件

				
			

			

				

					ouYang的博客
				

				

					09-16
					
					3391
					
				

			

		

		

			
				

微信公众号：程序yuan
关注可了解更多的教程。问题或建议，请公众号留言;


查看--&gt; 全套EasyUI示例目录

17.Pagination分页组件

注意

这个组件需要配合后台实现，老规矩，使用SSM







 
 


 
JSP文件



&lt;%--
  Created by IntelliJ IDEA.
  User: ooyhao
  Date: 2018/7/...

			
		

	





	

		

			

				
					
EasyUI pagination

				
			

			

				

					wuyujin1997的博客
				

				

					04-29
					
					420
					
				

			

		

		

			
				
intro
easyui-panel 面板
easyui-pagination 分页条
前后端接口
/GetUserList?pageNumber=${pageNumber}&pageSize=${pageSize}
/GetTableCount?tableName=${tableName}
html

<!DOCTYPE html>
<html lang="en"&gt...

			
		

	



		

			
		



	

		

			

				
					
easyui 之pagination分页

				
			

			

				

					weixin_45504270的博客
				

				

					07-24
					
					165
					
				

			

		

		

			
				
</div>
	                     
					</div>
					<div style="height:25px;"></div>
					<div id="page" style="background:#efefef;border:1px solid #ccc;height: 6%"
				   	 >
					</div>...

			
		

	





	

		

			

				
					
EasyUI Pagination 分页的两种做法

					
热门推荐

				
			

			

				

					路漫漫 修远兮
				

				

					02-27
					
					1万+
					
				

			

		

		

			
				
因为是转载文章 在此标明出处，以前有文章是转的没标明的请谅解，因为有些已经无法找到出处，或者与其它原因。

如有冒犯请联系本人，或删除，或标明出处。

因为好的文章，以前只想收藏，但连接有时候会失效，所以现在碰到好的直接转到自己这里。

原文 出处http://www.cnblogs.com/luminji/p/3294439.html

			
		

	





	

		

			

				
					
EasyUI Pagination 分页

				
			

			

				

					Ruoyang666的博客
				

				

					01-24
					
					306
					
				

			

		

		

			
				
前言：大佬们，学编程要做到耐得住寂寞吗？无论男女，下方给个评论，交个朋友呗*@。@*
之前在学校时写了个项目用的就是Easy-UI，当时项目答辩的时候因为时间也没有去做分页，还被老师点出来狠狠的鄙视了一番。今天再次遇到就不能放过了，事情总是要解决的。
先来个链接：Jquery Easy-UI中文网的链接
附上自己所写的代码：
function select(pageNumber){
  

			
		

	





	

		

			

				
					
jQuery EasyUI Pagination实现分页的常用方法

				
			

			

				

					11-23
				

			

		

		

			
				
EasyUI 的 datagrid 支持服务器端分页，但是官方的资料比较少，以下总结了两种 datagrid 的服务器端分页机制，可根据情况具体使用。 一、使用 datagrid 默认机制 后台：  public JsonResult GetQuestionUnit() {  //...

			
		

	





	

		

			

				
					
EasyUI Pagination 分页的两种做法小结

				
			

			

				

					09-02
				

			

		

		

			
				
主要介绍了EasyUI Pagination 分页的两种做法小结的相关资料,需要的朋友可以参考下

			
		

	





	

		

			

				
					
jquery easyui pagination 分页插件扩展

				
			

			

				

					08-13
				

			

		

		

			
				
两种扩展方式，自己看情况选择，重写的分页属性。

			
		

	





	

		

			

				
					
pagination:分页库没有依赖项

				
			

			

				

					04-29
				

			

		

		

			
				
Rayne \ Pagination
 分页库没有依赖项。
内容
安装
建议使用依赖项管理器安装rayne/pagination 。 
composer require rayne/pagination
特征
Yahoo定义的实现
一或零个索引页
从任意用户输入中提取安全页码，例如无效输入或超出范围时的第一页或最后一页
Yahoo定义的实现
（目前尚未正式支持此模式，但代码已准备就绪，可以开始使用）
 没有依赖关系（用于测试的依赖关系除外）
 与框架无关
没有标记（但/examples Bootstrap /examples ）
 没有模板引擎（但/examples Twig /examples ）
 没有数据库后端（但提供了偏移量和限制）
 没有网址构建器
用法
搜索分页
检索项目计数$totalItems
 让Rayne\Pagination计算偏移量
$ pagination = n

			
		

	





	

		

			

				
					
jQuery Easyui快速入门教程

				
			

			

				

					10-21
				

			

		

		

			
				
jQuery EasyUI是一组基于JQuery的UI插件集合，而JQueryEasyUI的目标就是帮助开发者更轻松的打造出功能丰富并且美观的UI界面，下面小编带领大家一起学习jquery easyui入门知识，一起看看吧

			
		

	





	

		

			

				
					
EasyUI学习之DataGird分页显示数据

				
			

			

				

					08-31
				

			

		

		

			
				
主要介绍了EasyUI学习之DataGird分页显示数据，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

			
		

	





	

		

			

				
					
jQuery EasyUI datagrid实现本地分页的方法

				
			

			

				

					01-19
				

			

		

		

			
				
本文实例讲述了jQuery EasyUI datagrid实现本地分页的方法。分享给大家供大家参考。具体如下： 一般分页都是后台做，前端做无论从哪方面考虑都不合适。但是有的时候还是有这种需求。 这里重点用到了pagination的监听...

			
		

	





	

		

			

				
					
easyui的入门教程

				
			

			

				

					11-22
				

			

		

		

			
				
工具类，包含easyui的基本操作说明，绿色版本，入门比较好

			
		

	





	

		

			

				
					
easyui样式改造-pagination挤出窗口

				
			

			

				

					sinat_33811032的博客
				

				

					06-23
					
					759
					
				

			

		

		

			
				
由于toolbar过高使得表格初始化时分页组件挤出屏幕外，当窗口大小变化时才能恢复正常，之前试过很多办法，其实一句代码就能搞定了。如下在index页面加上一下代码：    window.onload=function(){
        $.parser.parse();
    }
以上代码可以在所有静态文件加载后重新渲染css样式，这样就搞定了。

			
		

	





	

		

			

				
					
easyui的pagination每次换页行号都从一开始

				
			

			

				

					qq_41912406的博客
				

				

					11-26
					
					558
					
				

			

		

		

			
				

//分页行号每次都从一开始
    $(function () {
        //获取数据网格的pager对象
        var pager = $('#cbcOrderHeaderDataGrid').datagrid('getPager');  
        //重定义pager对象的pagination
        pager.pagination({
        ...

			
		

	





	

		

			

				
					
easyui使用心得 - datagrid前端分页

				
			

			

				

					u010653281的博客
				

				

					06-27
					
					2962
					
				

			

		

		

			
				
$("#dg").datagrid();

四个相关属性：pageList,pageSize,pagination,loadFilter

pageList和pageSize一起，定义分页的大小
	pagination 显示分页工具栏
	loadFilter 加载过滤器，可以过滤和格式化数据后显示。
利用loadFilter进行前端分页：

  该属性接受一个function，这样写，便能分页...

			
		

	





	

		

			

				
					
修改easyui分页助手的分页栏的样式

				
			

			

				

					漫漫学习成长之路
				

				

					08-13
					
					1954
					
				

			

		

		

			
				
在jsp页面的function方法中写如下代码，获得你的分页栏


var p = $('#message').datagrid('getPager');

接下来按照指定格式书写代码，可以改变样式，例如


p.pagination({layout:['first','prev','links','next','last']});

具体去easyui的网页查看：http://www.jeasy...

			
		

	





	

		

			

				
					
easyui静态数据列表分页

					
最新发布

				
			

			

				

					06-10
				

			

		

		

			
				
可以使用EasyUI的DataGrid组件实现静态数据列表分页的功能。具体步骤如下：  1. 在HTML页面中引入EasyUI相关的CSS和JS文件，以及jQuery文件。  2. 在页面中定义一个div元素，作为DataGrid的容器。  3. 编写...

			
		

	



              



  
“相关推荐”对你有帮助么？

  

      
    
          
  • 
              
    
                  
                  
              
    
              
    非常没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    一般
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    有帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    非常有帮助
    
          
    • 
      

      

      

          
          提交
      

      

  




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值