Pagination分页

分页的步骤:

1.首先根据前台页面传来的分页参数,从数据库查询所得的数据。

2.数据包含查处可以分出多少页,每一页显示的数据。

3.返回给分页插件,数据交给到前端页面显示。

 

//查询参数

                                                 //getFormData获得前台数据

var requestParam = jQuery.extend(this.getFormData(this.options.queryForm) ,

                                     //pageParam 分页请求参数,如果为空默认请求第一页数据

pageParam ? pageParam : {

pagenum : 0

}) ;

 

    //pageobj中包含三个key的数据分别为pagenum(当前页号)、pagesize(当前页大小)、          totalelements(所有记录)、pageNumClickFn//分页点击的处理函数

initPaginationByObject : function(pageobj , initPageNumClickFn){

//分页初始化对象不为空,且需要的分页参数都为数字,则进行分页插件初始化

if(pageobj && !isNaN(pageobj.pagenum) && 

!isNaN(pageobj.pagesize) && !isNaN(pageobj.totalelements)){

this.initPagination(pageobj.pagenum, pageobj.pagesize, 

pageobj.totalelements, initPageNumClickFn) ;

                  }

 

 

 

//每次点击对调函数

var callbackFn = function(clickedPageNum , pageContainer){

//对请求的同一页,不重复发送请求

if(Number(this.pageNum)==Number(clickedPageNum)){

return ;

}

this.pageNum = clickedPageNum ;

//如果设置了回调函数,则执行,第一个参数默认为分页参数

if(this.pageNumClickFn){

                  //获取分页请求参数,包括分页号, 默认不包含每页大小和所有记录数。

this.pageNumClickFn.call(null , this.getPageParam(true)) ;

}

}.bind(this) ;

             //分页插件属性配置

var optInit = {

current_page : this.pageNum ,

items_per_page : this.pageSize ,

num_display_entries : 5 ,

num_edge_entries : 2 ,

prev_text : "上一页" ,

next_text : "下一页" ,

callback : callbackFn ,

prev_show_always : false ,

next_show_always : false

};

//只覆盖分页插件中自定义的属性

for ( var optKey in optInit) {

if(this.options[optKey]){

optInit[optKey] = this.options[optKey] ;

}

}

//初始化分页

$(paginationId).pagination(this.totalelements , optInit); //真正执行分页

 

参数名描述参数值
maxentries总条目数必选参数,整数
items_per_page每页显示的条目数可选参数,默认是10
num_display_entries连续分页主体部分显示的分页条目数可选参数,默认是10
current_page当前选中的页面可选参数,默认是0,表示第1页
num_edge_entries两侧显示的首尾分页的条目数可选参数,默认是0
link_to分页的链接字符串,可选参数,默认是"#"
prev_text“前一页”分页按钮上显示的文字字符串参数,可选,默认是"Prev"
next_text“下一页”分页按钮上显示的文字字符串参数,可选,默认是"Next"
ellipse_text省略的页数用什么文字表示可选字符串参数,默认是"..."
prev_show_always是否显示“前一页”分页按钮布尔型,可选参数,默认为true,即显示“前一页”按钮
next_show_always是否显示“下一页”分页按钮布尔型,可选参数,默认为true,即显示“下一页”按钮
callback回调函数默认无执行效果

 

 

 

 

 

 

 

### 回答1: Pagination分页)是一种常见的网页设计和开发技术,通常用于在列表或搜索结果等长文本内容中显示大量数据,以提高用户体验和页面性能。它将长文本内容分割成多个页面,并允许用户通过点击页面导航按钮或输入页面数字来浏览这些页面。通常,每个页面显示一定数量的项目,例如每页显示10个项目。分页还可以包括一些额外的功能,例如搜索框、排序选项和筛选器,以帮助用户更轻松地浏览和查找所需的内容。 ### 回答2: pagination分页)是指将大量内容或数据按照一定规则划分为多个页面展示,以方便用户浏览和管理。在网页设计和数据库查询中,分页是一种常见的技术手段。 分页的优势在于能够对大量内容进行合理的划分和呈现,避免了用户一次性加载大量数据而导致页面加载速度变慢的问题。同时,分页还可以有效地减小服务器负载,提升系统性能和响应速度。 分页的实现方式主要依靠服务器端和客户端共同配合完成。服务器端通过数据库查询语句的limit和offset来控制返回的数据范围,从而实现数据的分页查询。客户端则通过页面上的分页导航栏或者滚动加载等方式将分页数据展示给用户。 分页通常分为两种基本类型:基于页码的分页和基于滚动的分页。基于页码的分页是指通过点击页码导航栏来切换不同页码对应的数据页面。基于滚动的分页则是指当用户滚动至页面底部时,自动加载下一页数据。 在分页设计中,需要考虑几个关键因素。首先是每页展示的数据量,过多会导致页面加载速度变慢,过少则会增加用户切换页面的频率。其次是分页导航的设计,需清晰明了,方便用户直观操作。再次是当前页码的显示,以及提供跳转至指定页码的功能,以方便用户快速定位到所需页面。 总的来说,pagination分页)是一种有效管理和展示大量内容或数据的技术手段,通过合理的分页设计,可以提高用户体验和系统性能。 ### 回答3: 分页pagination)是一种常见的网页设计技术,用于将大量内容按照一页一页的方式分隔显示,从而提供更好的用户体验。 分页的作用在于将长篇的文章、产品列表或搜索结果等大量信息分割成若干页面,使用户能够逐页浏览,提高浏览效率。通常,一页显示一定数量的内容,用户可以通过点击页码或上一页/下一页按钮来切换页面。在每一页的底部,还会提供快速跳转到指定页码的选项。 分页技术的优势在于它可以减轻页面加载的负担,提高页面加载速度。当页面内容过多时,如果采用一次性加载全部内容的方式,可能导致页面加载时间过长,并且在网速较慢的情况下可能会影响用户的体验。而采用分页技术,只需加载当前页面的内容,可以有效减少等待时间,提升用户的感知满意度。 分页还可以增加网页内部链接和导航的可用性。通过在页面底部提供跳转链接和前后页切换按钮,用户可以更方便地导航到其他页面,从而实现对内容的快速浏览和检索。 需要注意的是,分页的设计要合理,不能过多地划分页面,以免给用户带来翻页频繁、体验不佳的感觉。同时,应该提供直观明了的页面导航元素,为用户提供良好的交互体验。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值