AngularJS 进阶 (二十六) 实现分页操作

​一、前言

      项目开发过程中，进行查询操作时有可能会检索出大量的满足条件的查询结果。在一页中显示全部查询结果会降低用户的体验感，故需要实现分页显示效果。受前面“JS 实现时间选择插件”的启发，自己首先需要查看一下 HTML5 能否实现此效果。

      整了半天，不管是用纯 CSS3 也好，还是用 tmpagination.js 还是 bootstrap 组件也好，到最后自己静下心来理一理，也就豁然开朗了，其实分页很容易，无非就是两种方式：请求一次，然后将分页交给前台处理，不过这种比较占内存，还有一种就是根据设置的起始页、每页数据量来分批次请求服务端，以此达到分页的效果。对比之前移动端实现的下拉刷新操作，其实也是分页的一种实现方式。按照移动端的实现思路，自己再次实现一次分页操作。

      在做分页过程中，自己迷糊了一把。实际思路应是这样的:分页应是针对最后的查询结果而言的。紧抓这一点才是解决问题的关键。

      由于业务逻辑的关系，搞了一天，分页只做了一部分，继续加油！

二、SQL 语句对比

      3 种 sql 统计语句(统计非重复记录)的对比

select count(billid) from lm_bill_dtl where medid='感冒灵颗粒' OR medname LIKE '感冒灵颗粒%' AND cnt='0'

结果:167

select count(distinct(billid)) from lm_bill_dtl where medid='感冒灵颗粒' OR medname LIKE '感冒灵颗粒%' AND cnt='0'

结果:167

select count(distinct(billid)) from lm_bill_dtl where medid='感冒灵颗粒' OR medname LIKE '感冒灵颗粒%'

结果:179

      结合自己的业务员数据综合分析，最后一种统计方法是正确的，因为有的药品存在于订单详情中的第二位，这样的话，前两种统计方法得出的结果均为 0，而第三种方法却可以得出正确结果。以以下 sql 语句为例:

select count(distinct(billid)) from lm_bill_dtl where medid='六味增食合剂' OR medname LIKE '六味增食合剂%' AND cnt='0'

结果:0

select count(distinct(billid)) from lm_bill_dtl where medid='六味增食合剂' OR medname LIKE '六味增食合剂%'

结果:1

      使用前后台响应的方式进行分页遇到了问题：数据丢失，页码计算不正确。

      在将复杂的“平台管理”模块成功完成分页之后，对其他各需要分页的模块进行分页操作。加油！

三、困惑

      三天时间终于把项目中所有需要实现分页效果的页面全部实现了。不过自己还是遇到了一个奇怪的问题:在药店端的订单维护页面相应的控制器中，按照前面的编码思想进行分页操作，结果发现药店端左侧的导航栏失效，点击没有反应。通过查看 Chrome 调试器，错误提示如下:

显示获取不到相应的翻页 ID，自己就纳了闷了，不可能啊，前面都表现的好好的，到这怎么就不行了呢。于是自己写了 alert(btn_PrePage);语句输出相应 button 的 ID，结果显示如下:

难道是因为没有获取到相应的 ID 值，不可能啊，在网上搜索了一番，最后得出的结论是：js 代码需要写在 html 代码之后，也就是必须先得等 html 加载完毕，才能获取相应组件 ID。于是自己在别的页面尝试相应的操作，结果发现均获取不到值，自己就更纳闷了，获取不到值？但是后面与组件 ID 相关的操作都表现正常啊！在 html 页面中的 javascript 脚本中也同样是获取不到 ID 值，纳闷！但是操作均一切正常啊，难道这是一个潜在的巨大 BUG？！不能吧？！

      结合代码查看，错误发生在 initFun()方法体中。

$scope.initFun = function(){
....
unDisplayBtn(btn_PrePage); // 进入查询结果列表首页时"上一页"按钮不可用
unDisplayBtn(btn_NextPage);// 进入查询结果列表首页时"下一页"按钮不可用
};

四、感悟

      随着对数据库操作的逐渐了解，自己慢慢意识到熟悉数据库的各种查询技术十分重要，各种管理系统，说到底，其实就是对数据库的各种操作，有时一条 SQL 语句就可以解决稍显复杂的问题。

五、核心代码

//控件生效控制函数function displayBtn(object){var ui = object; ui.removeAttribute("disabled");} // 控件失效控制函数function unDisplayBtn(object){var ui = object; ui.setAttribute("disabled", true);}var btn_PrePage = document.getElementById("PrePage");var btn_NextPage = document.getElementById("NextPage"); $scope.totalItems = data.cnt;// 若总数据条数小于单页显示数if(data.cnt < pagenum){unDisplayBtn(btn_PrePage);	// 进入查询结果列表首页时"上一页"按钮不可用unDisplayBtn(btn_NextPage);// 进入查询结果列表首页时"下一页"按钮不可用}// 匹配正浮点数if(checkFloat(data.cnt/pagenum)){$scope.pageCnt = Math.ceil(data.cnt/pagenum);	// 总页数}else{$scope.pageCnt = data.cnt/pagenum;	// 总页数

效果图