一个基于Angularjs、layer的分页指令

前端之家收集整理的这篇文章主要介绍了一个基于Angularjs、layer的分页指令前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
HTML代码
  1. <table style="width:100%">
  2. <tr>
  3. <td>总共:<span style="color:#12bdce;font-weight: bold;">{{total_pages}}</span><span style="color:#12bdce;font-weight: bold;">{{total}}</span></td>
  4. <td style="text-align:right;">
  5. <div layer-pages id="page_bar" data-options="url: 'busMaintenanceItem/query.do',callback: 'getPageDataList',pageColor: '#12bdce',pageSize: '10',groups:'3',isSkip: false" style="margin-right: 0px;"></div>
  6. </td>
  7. </tr>
  8. </table>

js回调方法

  1. //获得当前页面数据信息(用于分页指令回调)
  2. $scope.getPageDataList = function (pageInfo){
  3. $scope.maintenanceItemList = pageInfo.data_list;// 数据
  4. $scope.total = pageInfo.total;// 总条数
  5. $scope.total_pages = pageInfo.total_pages;// 总条数
  6. }

具体分页指令代码
  1. App.directive("layerPages",['$rootScope','$compile','Page',function($rootScope,$compile,Page) {
  2. return {
  3. restrict:'AE',link: function (scope,elem,attrs) {
  4. var page_id = attrs.id;
  5. var options =eval('[{' + (attrs.options || '') + '}]')[0]
  6. var url = options.url;// 数据接口
  7. var page_color =options.pageColor;// 颜色
  8. var page_groups = options.groups;// 连续分页
  9. var page_size = options.pageSize;// 每页显示条数
  10. var page_is_skip = options.isSkip;// 是否开启跳页
  11. var callbackFun = scope.$eval(options.callback);// 回调函数
  12. if(!callbackFun || !typeof(callbackFun)=='function'){
  13. return;
  14. }
  15. var page_index = 0;
  16. var param = {};
  17. param._pageIndex = page_index;
  18. param._pageSize = page_size;
  19. Page.ajaxPost(url,param,function (resp) {
  20. var data_list = resp.data.rows;
  21. var total = resp.data.total;// 总页数
  22. var total_pages = Math.ceil(total % page_size == 0? total / pageSize: total / page_size);
  23. var pageInfo = {};
  24. pageInfo.data_list = data_list;
  25. pageInfo.total = total;
  26. pageInfo.total_pages = total_pages;
  27. callbackFun(pageInfo); // 回调
  28. laypage({
  29. cont : page_id,pages : total_pages,// 得到总页数
  30. skin : page_color,skip : page_is_skip,// 是否开启跳页
  31. prev : false,// 若不显示,设置false即可
  32. next : false,// 若不显示,设置false即可
  33. groups : page_groups,// 连续分页
  34. curr: 1,// 初始化当前页
  35. jump : function(obj,first) {// 触发分页后的回调
  36. /*obj是一个object类型。包括分页的所有配置信息。
  37. first一个Boolean类,检测页面是否初始加载。非常有用,可避免无限刷新。*/
  38. if(!first){
  39. param._pageIndex = obj.curr - 1;
  40. Page.ajaxPost(url,function(resp) {
  41. var data_list = resp.data.rows;
  42. pageInfo.data_list = data_list;
  43. callbackFun(pageInfo);// 回调
  44. });
  45. }
  46. }
  47. })
  48. });
  49. }
  50. }
  51. }]);
效果图:

猜你在找的Angularjs相关文章