使用ivx实现分页获取数据的经验总结

在实际案例中我们经常需要展示一些数据,而这些数据都是存放在后台的数据库之中的而且可能数量庞大,在前台的界面中一下子全都展示出来肯定是不现实的,另外一次性让后台传输如此多的数据到前台也会有很大的延迟,使用户体验较差。因此,我们就需要采取一种分页的方式来少量多次的获取数据,这样用户每次操作之后都能很快得到反馈,同时前台也不用存放很多数据造成案例卡顿,今天就来说说如何实现这种分页效果。

1.组件结构
Demo中的结构比较简单,页面下放置了一个列作为案例主体,列内添加了一个分页组件,还有一个for容器用于循环创建每页显示的图片,而循环创建的数据来源就是对象数组分页数据。

2.分页组件
分页组件是ivx中的一个拓展组件,主要应用场景就是分页显示数据啦,当然我们也可以使用各个基础功能去做一个自定义样式的分页模块。不过今天就只介绍一下分页组件的属性和用法。

数据总条数和每页数据条数可以算出分页组件一个有多少个分页,demo中这里已经设置了一共10条数据并且每页显示3张图片。显示按钮数量对应的是中间有几个页号按钮。

当显示的是第一页时,首页和上一页的按钮会隐藏,同理,在显示最后一页时下一页和尾页也会隐藏。
如果开启精简模式首页,尾页,上一页和下一页的按钮就都会隐藏掉。

3实现分页获取数据的逻辑
首先是前台初始化的时候,先调用了输出分页数据服务,并且调用的时候传给服务的page参数等于1。而服务中让数据库输出的行数是从(page-1)*3+1到page*3,代入page=1,经过计算即1到3行。


所以,打开案例后直接呈现效果的如下图所示。

这里也说一下这两个动作吧,他们的作用就是在服务返回数据库的输出结果前显示一个这样的加载框,当前台拿到服务的返回结果就让加载框隐藏。如果想让案例更完美这样的小细节也是必不可少的。


然后就是案例运行中我们选择了某一个页面后,依旧是调用输出分页数据服务,并设置page参数等于分页组件的“当前页码”,这个变量是在分页组件的“当前页改变”事件下抛出的。。比如我们点击了页号2,“当前页码”等于2,即服务中page=2,数据库依旧按公式输出(page-1)*3+1到page*3行,代入计算可得是第4到第6行,按照我们对数据库三行算一页的划分这正好是第二页的数据。我们把这三行数据传给前台的分页数据对象数组,for循环容器就按照这三行数据创建出三个图片组件显示出来。


4.动态页号
在这个demo中分页组件已经设置好了一共10条数据,然后每页数据条数为3,则一共会有4个分页,但是在实际案例中数据库中的数据可能会随着案例运行增加或者减少,我们很难预先知道实际的数据总条数是多少。另外,虽然服务中有统计数据库数目的功能,但是数据量庞大的话我们也不可能每一次都去统计数据库的数据总量,这是很耗费时间和设备资源的。所以下面就来说说如何实现动态页号。

当前,列表数据数据库中有16条数据,这里不要看最后一条数据的数据ID是16就判定有16条数据,每条数据ID都是唯一的,你把数据ID为1的数据删除再添加一条新的数据,新的数据的ID会是2,所以实际数目其实小于等于最后一行数据的ID。

在后台再添加一个数据库并给它添加一个字段数据总量,然后在第一行数据的该字段下输入16,点击保存。

在后台添加一个对象数组和数值变量,先将分页数据输出后保存到对象数组中,然后获取到数据库中存放的数据总量,最后一起作为服务的返回参数。

找到前台调用输出分页数据服务的两个地方,在回调里将分页组件的数据总量属性的值设置为服务返回的结果。


最后要保证的就是数据总量数据库中存放的值一直是等于列表数据中的数据总条数的。如果列表数据数据库中的数据条数是变化的,那么就会有提交数据和删除数据的两个服务,。在提交服务中,提交后我们就要将数据总量数据库中的数据总量加1,在删除服务中,删除数据后我们就将其减1,也就是加(-1)。(总之就是所有对列表数据有增删时都要知会数据总量数据库一声儿啦)


总结
分页获取数据实现的难点一个在于动态,这取决于案例中各部分逻辑的计算公式的设计,一个在于对边界的处理,必须考虑到各种情况。这要求我们在制作案例时必须要逻辑缜密,考虑全面,只有开发者把案例使用的全部状况都考虑清楚才能确保用户在使用时不会出现各种“意料之外的状况”,这一直(还将永远?)都是开发者们所努力的方向吧。

原文地址:https://blog.51cto.com/14556317/2481335

时间: 2024-08-14 14:51:49

使用ivx实现分页获取数据的经验总结的相关文章

MVC 分页获取数据 及点选按钮

@model PagedList<Lyxm.Entity.Suggestion>@using Webdiyer.WebControls.Mvc <div>    <ul class="breadcrumb">        <li>            @Html.ActionLink("基础维护", "", "")            <span class=&quo

NHibernte 4.0.3版本中,使用Queryover().Where().OrderBy().Skip().Take()方法分页获取数据失败

问题代码如下: var result=repository.QueryOver<modal>() .Where(p=>p.Code==Code) .OrderBy(p=>p.ID).Asc .Skip(pageSize*(page-1)) .Take(pageSize).List() 当设置page=1,pageSize=10时,获取数据正常:当设置的page大于1时,获取不到任何数据:原因尚未找到. 解决办法:修改代码如下 var result= repository.Query

分页“真分页”获取数据

对于初学的新手来说,做数据分页的时候,经常是去网上下载个控件,所谓控件分页,有的人认为很好,因为方便,但是对于老鸟来说 控件分页查询效率太低,在实际工作中,也会带来致命的弱点,所以,我们一般采用真分页,部分查询,效率没得说!! 石家庄ReactNative交流群 526955818欢迎大家加入 using System;using System.Collections.Generic;using System.Linq;using System.Text;using System.Threadi

SQL Server 分页获取数据

select top 5000 * from ( select top 10000 *,row_number() over(order by MDMZGZD_NM,MDMZGZD_ZGBH) as rowId from ( select * from MDMZGZDMapping where F_YWXTBH IN ('XZSP') AND F_MDMNM in(select MDMZGZD_NM from MDMZGZD ) C order by rowId ) D order by rowI

php高效获取数据分页

mysql.php 获取数据库中的记录,完全个人经验总结,仅供参考! <?php /** *PHP+MYSQL数据库基本功能 *http://blog.csdn.net/yown */ ############################################ #获取序列ID ############################################ function getSequence() { $sql = "update sequence set id=

ligerGrid Ajax分页获取排序 详细介绍

刚开始用ligerGrid作分页排序的时候比较头疼,查找,上下页等处理后台都没法准确的获取前台查找控件里面的值,API里面也没有什么详细的解释 最后网上找了很久感觉都不是很全的资料,现在把这个结合说下 给自己做个笔记 先上个果图 做分页一般需要注意几点的就是,页大小,当前页,排序字段,排序类型(倒叙或顺序),查询条件, 所以这里写了一个公共方法返回所需的排序数据 和查询条件下总数据条数 这个是调用的时候处理的一个方法 /// <summary> /// 得到一页日志数据 /// </su

HBase 高性能获取数据 - 多线程批量式解决办法

在前篇博客里已经讲述了通过一个自定义 HBase Filter来获取数据的办法,在末尾指出此办法的性能是不能满足应用要求的,很显然对于如此成熟的HBase来说,高性能获取数据应该不是问题.下面首先简单介绍了搜索引擎的性能,然后详细说明了HBase与MySQL的性能对比,这里的数据都是经过实际的测试获得的.最后,给出了采用多线程批量从HBase中取数据的方案,此方案经过测试要比通过自定义Filter的方式性能高出很多. Solr和HBase专辑 1.“关于Solr的使用总结的心得体会”(http:

easyui-datagrid连接数据库实现分页查询数据

一.利用MVC思想建立底层数据库: package com.hanqi.dao; import java.util.ArrayList; import java.util.List; import org.hibernate.Session; import org.hibernate.SessionFactory; import org.hibernate.Transaction; import org.hibernate.boot.registry.StandardServiceRegistr

PHP之分页显示数据-新闻系统

一.项目设计 1.项目要求 2.主页面使用frame框架进行设计,内容如下: index.php <span style="font-family:SimSun;font-size:18px;"><html> <frameset rows="80%,20%" frameborder="no" border="0" cols="900px"> <frameset co