基于Angularjs的分页

序

在学习任何语言之前，必须有业务需求来驱动你去学习它。当然，ng也不例外。在学习ng之前，我想做的第一个演示就是实现基于ng的分页。除了基本的计算思路，就是把指令打包成一个插件，在需要分页的列表页面中直接引用。

插件组件

当我封装分页插件时，我意识到几个方法通常是分散的。最后发现了一个朋友封装的插件(http://www .缪月月.com/archives/813.html)，还不错。看完他的源代码，我直接在项目中使用。

原理和操作说明

1.该插件源代码主要基于angular指令。

2.调用时的关键点是后台请求处理函数，即从后台取数据。

3.该插件有两个关键参数：currentPage、itemsPerPage、当前页码和每页记录数。

4.调用实现方法后，每次点击分页插件的页码，都需要重新提交后台，获取对应的页码数据。在被叫的页码里，我用$watch来监控。第一次使用的时候，我把调用函数放在插件的onchange里，发现每次都会触发两次后台。这个地方需要注意。

5.我将请求背景封装到一个Service层，然后在Controller中调用，这也符合MVC的思想。

翻译

调用代码

div ng-app=' DeMoapp ' ng-controller=' DeMocontroller ' table class=' table table-striped ' the ad tr TDid/TD TDfirst name/TD TDlastname/TD TDSTatus/TD TDADdress/TD/tr/the ad t body tr ng-repeat=' EMP in persons ' TD { { EMP }。ID}}/td td{{emp。FirstName}}/td td{{emp。LastName}}/td td{{emp。状态}}/td td{{emp。address } }/TD/tr/t body/table TM-pagination conf=' pagination conf '/TM-pagination/div script type=' text/JavaScript ' var app=angular . module(' Demoapp '，[' TM . pagination '])；app.controller('DemoController '，['$scope '，' BusinessService '，function ($scope，business service){ var getallemploye=function(){ var post data={ page index : $ scope . paginationconf . current page，pagesize : $ scope . paginationconf . items perpage } business service . list(post data)。success(function(response){ $ scope . pagination conf . totalitems=response . count；$ scope . persons=response . items；});}//配置基本分页参数$ scope。分页conf={currentpage: 1，items perpage 3360 5 }；/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *作用域。$ watch(' pagination conf . current page pagination conf . items perpage '，GetalLemployee)；}]);//business class app . factory(' business service '，['$ http '，function($ http){ var list=function(post data){ return $ http . post('/employee/getallemployee '，post data)；}返回{ list:函数(PostDATa){ return list(PostDATa)}；} } }]);/脚本插件和演示下载

http://yunpan.cn/cQEhnLrpnkniQ访问密码be74

以上是AngularJS实现分页功能的数据整理，后续继续补充相关数据。感谢您对本网站的支持！