<强>需要用到的js
angular.js(用angular.min.js会导致分页控件不显示)
ui-bootstrap-tpls.min.js
angular-animate.js
<强>需要用到的css
bootstrap.min.css
由于本项目使用了路由,所以讲js以及css文件的应用都放在一个主html,请同学们在html页面中添加以上文件
在开始之前,我先简单介绍下分页的原理。
分页的实质其实就是一条sql语句,
,比如查找第二页,即第16到30条第数据
,在MySQL中是<代码> select * from表限制15、15个订单的id desc
Sql server中是选择从(选择前15名* *
(从表选择最高(30)*订单id desc)命令可用asc desc)订单id
甲骨文是(Oracle中的行从1开始):select *
(选择一个。*,rownum从
(select *从平板电脑订单id desc)
b)
在b。rownum 16至30
一般情况下,查询得到的数据采用倒序排序,这样可以将用户最新插入的数据放在最前面。
那么这三条sql语句中的这些数值是怎么计算得到的呢?它们就是根据1,当前页当前在哪一页2页大小每页展示多少条,来的到的,因此后台需要从前端获取这两个数的值。又为了告诉用户一共有多少页,我们还要3 TotalSize一共多少条。
现在有了上面1 2 3值,我们就可以来进行分页了。在前端我们需要一个表来帮我们展示数据,还需要一个小控件,让用户去选择第几页,而引导就为我们提供了这个小控件(uib-pagination),大大减轻了我们的工作量。在后端Jpa又为我们提供了分页接口,我们只需要继承JapRepository即可,零代码量!
下面就重点看表,uib-pagination以及JapRepository提供的接口的用法。
html页面代码:
& lt; div data-ng-controller=癚uestionCtrl”class=叭萜鳌北?
& lt; br>
& lt;表类="表table-bordered table-hover”比;
& lt; thead>
& lt; tr>
& lt; th类=" text-center "祝辞& lt;输入类型=案囱】颉?
data-ng-model=" allChecked " data-ng-change=" checkAll (allChecked)”/祝辞;& lt;/th>
& lt; th类=" text-center "祝辞序号& lt;/th>
& lt; th类=" text-center "祝辞题目& lt;/th>
& lt; th类=" text-center "祝辞A
& lt; th类=" text-center "祝辞B
& lt; th类=" text-center "祝辞C
& lt; th类=" text-center "祝辞D
& lt; th类=" text-center "祝辞答案& lt;/th>
& lt; th类=" text-center "祝辞答题数& lt;/th>
& lt; th类=" text-center "祝辞正确数& lt;/th>
& lt; th类=" text-center "祝辞正确率& lt;/th>
& lt;/tr>
& lt;/thead>
& lt; tbody>
& lt; tr data-ng-repeat=跋钕钅俊痹?
& lt; td类=" text-center "祝辞& lt;输入类型=案囱】颉?
data-ng-model="项目。检查" data-ng-changed=" checkedChange美元(item.id项。检查美元)“/祝辞;& lt;/td>
& lt; td类=" text-center "祝辞& lt;跨度data-ng-bind=懊涝甘? 1”祝辞& lt;/span> & lt;/td>
& lt; td类=" text-center "
data-ng-bind=" item.test "祝辞& lt;/td>
& lt; td类=皌ext-center data-ng-bind”=癷tem.op1”祝辞& lt;/td>
& lt; td类=皌ext-center data-ng-bind”=癷tem.op2”祝辞& lt;/td>
& lt; td类=皌ext-center data-ng-bind”=癷tem.op3”祝辞& lt;/td>
& lt; td类=皌ext-center data-ng-bind”=癷tem.op4”祝辞& lt;/td>
& lt; td类=皌ext-center data-ng-bind”=癷tem.answer”祝辞& lt;/td>
& lt; td类=皌ext-center data-ng-bind”=癷tem.total”祝辞& lt;/td>
& lt; td类=皌ext-center data-ng-bind”=癷tem.totalCorrect”祝辞& lt;/td>
& lt; td类=皌ext-center”比;
& lt;跨越data-ng-if=癷tem.total !=0 " data-ng-bind="项目。totalCorrect/项。* 100 |总数量:2“祝辞& lt;/span>
& lt;跨度data-ng-if="项目。总==0”data-ng-bind=" 0 "祝辞& lt;/span>
% & lt;/td>
& lt;/tr>
& lt;/tbody>
& lt;/table>
& lt; div类=皌ext-right”比;
& lt;按钮类=癰tn btn-defualt data-ng-click”=癲eleteItems()在删除& lt;/button>
& lt;跨度祝辞& lt; uib-pagination total-items=癟otalItems”ng-model=暗鼻耙场眎tems-per-page=皀umPerPage”最大尺寸=白畲笕萘俊崩?first text“分页”=笆滓场皃revious-text=鄙弦灰场敝?跋乱灰场發ast-text=澳┮场眀oundary-links=" true " ng-change=皃ageChanged ()“force-ellipses=癴alse”祝辞& lt;/uib-pagination> & lt;/span>
& lt;/div>
& lt;/div>之前
分页是通过uib-pagination标签来实现的,用到标签属性有:
