搜索结果分页显示
1.功能要求:
我们之前在后台学过一个分页控件.但是那个控件可以用在后端,因为后台不用考虑美观等等;但是分页在前台我们常常会根据自己的要求作出不同的改变,这时候再用分页控件就不太好了,因为一旦用了这个控件,分页栏的样式就很难更改(别人写的,都封装完了),所以这种真正展示给用户看的页面的分页我们通常自己写,自己来控制样式
2.业务思考:
后台的处理
①:我们知道,分页需要后台的数据支持和前台的样式处理.那么后台应该做什么呢?我们知道,要想在后台查询数据,前台应该给后台传入两个参数,分别是当前页码和每页显示的记录数;我们在前台把这两个参数封装在搜索条件选项里,在后台接收;首先进行的就是需要进行判断,如果这两个的值是空的话,我们应该给他们设置默认值,这样就不会出现没有数据的情况了
②:进行了判断之后,我们需要加上两个条件,才能在dao层完成分页,其实就是在query中设置值,分别是设置setOffset:从第几条记录开始查询(这个数的值是:(当前页-1)*每页显示的记录数)和setRows(每页显示的记录数)
③:我们加上了条件之后,返回的数据中就会有关于分页的数据,我们定义一个Map集合,把关于分页的数据放进这个Map集合中就可以了;我们需要的数据是:总页数:getTotalPage 总记录数:getTotalElements 每页显示的记录数据:getContent 最后再返回这个amp集合,这样前台就能获取后台的分页数据了
前台的处理:
①:其实这个分页的难点就在前台js的controller中的处理,我后台的返回结果中有总记录数和总页数了,我们想要在前台显示多少页,怎么控制呢?很简单,我们如果有起始页和末尾页,然后我们根据这两个值进行遍历,然后把每个值放进同一个数组中,我们在前台页面用ng-repeat遍历取值就行了
②:那么我们就想了,我们想在前台页面框显示几页呢?这就有了两种情况:一种是奇数,我们让当前页的前面和后面有这个奇数减去1再除以2,这样就有了我们想要的页数;另一种是偶数,偶数比奇数麻烦一点,我们采用一个规则:前面少,后面多,比如10页,我们就让当前页前4后5;这样一来,我们只要判断一下我们想要显示的页数的奇偶性,然后就能算出起始页了,末尾页就等于起始页加上显示页数-1就行了
③:要注意的事:我们要考虑集中情况:一种是当前页的前面不足我们想要的页数,我们就让起始页等于1;一种是当前页的后面不足我们想要的页数,我们就要让末尾页数等于总页数(最大页数);还有就是我们在设置了末尾页后,要重新设值初始页(因为如果当前页数后面不足我们想要的,那么一开始计算的初始页就是不对的,就会导致显示的页数不足),为了处理这种情况,我们利用末尾页减去要显示的页数-1,然后判断是不是小于等于1,是就让初始页等于1,大于1就让初始页等于末尾页减去要显示的页数-1
④:我们在js的controller中设置一个构建分页数据的方法,方法的参数是我们想要显示的页数,然后根据传入的数进行判断,用三元运算式进行赋值;得出初始页和末尾页,然后遍历望数组中放入值就可以了;这样一来,我们想要修改显示的页数,修改传入的数就行了
⑤:再就是处理上一页\下一页和页面跳转的功能,我们需要在js的controller中创建一个方法,这个方法是根据页码查询分页数据的方法,这个方法中首先是要判断传入的页码是不是小于1或者大于总页数,如果是就打断程序;如果不是就给搜索条件中的当前页赋值,然后在调用查询方法,加载分页数据
⑥:最后就在页面中的上一页\下一页和跳转页面的上面,添加ng-click调用我们根据页码查询的方法;还有一个不要忘了,就是我们点击当前页也加上方法,里面传入的是当前页码;还有不要忘了在查询方法中,在查询业务执行之前,把当前页进行一下parseInt的转换,防止传到后台的是字符串
分页显示的优化
其实做完上面的这些操作,基本的功能都已经实现了,不过有一些小得bug或者功能需要去优化
①:第一个需要优化的就是:跳转之后,当前页不刷新的问题.这个问题就是我们在上一个搜索结果中跳转完页面,比如说是共有10页,我们跳到第九页,然后我们再搜索下一个,如果这个搜索结果不足九页就不会显示;换句话说就是开启新的搜索时,当前页没有刷新,我们需要保证在每次开始搜索之前初始化一下当前页,所以在body标签中ng-init里让当前页为1就行了
②:上一页和下一页的disabled属性:这个属性是为了让我们的上一页在第一页的时候显示固定的样式,并且不能使用,同理下一页是在最后一页时失效;想要到达这个效果,我们控制上一页和下一页的disabled的出现时机就行了,我们用{{条件?'disabled':''}}这样就能解决这个问题了
③:省略号的显示:如果起始页前面还有页码就显示省略号,没有就不显示;末尾页后面如果没有页码了,就不显示,还有就显示省略号.为了好理解,我们在js的controller中创建两个变量,这两个变量开始的时候都是true,当起始页<=1或者末尾页>总页数时,改变对应的变量为false;然后在页面中的省略号位置,用ng-if调用对应的变量就行了
