详解angularjs结合pagination插件实现分页功能


Posted in Javascript onFebruary 10, 2017

angularjs与pagination插件可以完美实现前端的分页,筛选,搜索等功能,前提当然需要有后台开发配合,今天我们只说前端实现:

1、引入pagination插件,在angularjs引入之前先加载pagination插件;

2、在定义controller的时候,需要注入pagination插件;

3、分页前端原理基本需要有个默认异步请求,当点击分页,再次请求数据并向后台发送当前页码,如果有搜索数据或者筛选数据功能,在发送请求的同时需要带上与后台开发共同定义的搜索参数;

4、废话不多上,上代码,基本模板:

var url = '请求路径';
  
  $http({
    method:"post",
    url:url
  }).success(function(_data) {
    $scope.contentlist = _.data.items;//数据列表
        $scope.pageparameters = _data.data;
    $scope.Searchparameters = {
        //定义你的搜索参数
    }
    // 初始化分页数据
    var pagination;
    $scope.paginationInt = function($data) {
      pagination = $scope.pagination = Pagination.create({
        
        itemsCount: $data.total_items, // 总数
        itemsPerPage: $data.epage, // 每页条数
        currentPage: $data.page // 当前页码
      });
      
      // 分页操作
      pagination.onChange = function(page) {
        $scope.page(page);
      };
    };
    $scope.paginationInt($scope.pageparameters);
    // 筛选过滤列表页时传递的参数
    $scope.borrowSearch = function(type, val) {
      $scope.borrowData[type] = val;
      $scope.page(1);//每次搜索都从第一页开始
    };
    // 排序
    $scope.SearchTab = {};
    $scope.SearchStatus = true;
    $scope.current = {
      //你的参数
    };
    // 页码跳转操作
    $scope.skipInput = function(page, endPage) {
      if (!isNaN(page)) {
        var page = parseInt(page, 20),
          endPage = parseInt(endPage, 20);
        if (page > endPage || page <= 0) {
          $scope.skipError = true;
        } else {
          $scope.skipError = false;
        }
      } else {
        $scope.skipError = true;
      }
    };

    $scope.page = function(page) {
      $scope.Searchparameters.current_page = page;

// 分页方法 
$http({ url:url, method:"post", params:$scope.Searchparameters }).success(function(data) { $scope.contentlist = data.items; }); }; });

HTML方法在此略过,不明白的小伙伴可以私信!

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery之排序组件的深入解析
Jun 19 Javascript
网站如何做到完全不需要jQuery也可以满足简单需求
Jun 27 Javascript
javascript通过className来获取元素的简单示例代码
Jan 10 Javascript
javascript中var的重要性分析
Feb 11 Javascript
聊一聊jQuery插件uploadify使用方法
Aug 24 Javascript
AngularJS  自定义指令详解及实例代码
Sep 14 Javascript
javascript 中的继承实例详解
May 05 Javascript
详解webpack babel的配置
Jan 09 Javascript
解决vue2中使用axios http请求出现的问题
Mar 05 Javascript
vue3.0 CLI - 2.6 - 组件的复用入门教程
Sep 14 Javascript
使用VUE+iView+.Net Core上传图片的方法示例
Jan 04 Javascript
生成无限制的微信小程序码的示例代码
Sep 20 Javascript
js仿QQ邮箱收件人选择与搜索功能
Feb 10 #Javascript
BootStrapValidator初使用教程详解
Feb 10 #Javascript
bootstrap jquery dataTable 异步ajax刷新表格数据的实现方法
Feb 10 #Javascript
JavaScript轻松创建级联函数的方法示例
Feb 10 #Javascript
JS实现的数字格式化功能示例
Feb 10 #Javascript
Vue.js 2.0窥探之Virtual DOM到底是什么?
Feb 10 #Javascript
BootStrap Datepicker 插件修改为默认中文的实现方法
Feb 10 #Javascript
You might like
php读取3389的脚本
2014/05/06 PHP
php的socket编程详解
2016/11/20 PHP
flash javascript之间的通讯方法小结
2008/12/20 Javascript
使用Js让Html中特殊字符不被转义
2013/11/05 Javascript
jquery中获取元素里某一特定子元素的代码
2014/12/02 Javascript
javascript中call apply 的应用场景
2015/04/16 Javascript
详解JS正则replace的使用方法
2016/03/06 Javascript
Extjs4.0 ComboBox如何实现三级联动
2016/05/11 Javascript
prototype.js常用函数详解
2016/06/18 Javascript
Angular实现购物车计算示例代码
2017/02/21 Javascript
JS传参及动态修改页面布局
2017/04/13 Javascript
vue 页面加载进度条组件实例
2018/02/05 Javascript
vue watch监听对象及对应值的变化详解
2018/02/24 Javascript
angular6.0使用教程之父组件通过url传递id给子组件的方法
2018/06/30 Javascript
微信小程序canvas实现刮刮乐效果
2018/07/09 Javascript
微信小程序实现笑脸评分功能
2018/11/03 Javascript
Vue infinite update loop的问题解决
2019/04/23 Javascript
vue实现多条件和模糊搜索功能
2019/05/28 Javascript
vue element upload实现图片本地预览
2019/08/20 Javascript
[32:07]完美世界DOTA2联赛PWL S3 LBZS vs Rebirth 第一场 12.16
2020/12/17 DOTA
在Python的web框架中编写创建日志的程序的教程
2015/04/30 Python
Ruby元编程基础学习笔记整理
2016/07/02 Python
Flask框架的学习指南之开发环境搭建
2016/11/20 Python
Python3视频转字符动画的实例代码
2019/08/29 Python
python 实现多维数组(array)排序
2020/02/28 Python
Pycharm如何运行.py文件的方法步骤
2020/03/03 Python
解决python对齐错误的方法
2020/07/16 Python
Python使用jpype模块调用jar包过程解析
2020/07/29 Python
Python模拟键盘输入自动登录TGP
2020/11/27 Python
PyCharm Ctrl+Shift+F 失灵的简单有效解决操作
2021/01/15 Python
美国独家设计师眼镜在线光学商店:Glasses Gallery
2017/12/28 全球购物
Yahoo-PHP面试题3
2012/01/14 面试题
静态变量和实例变量的区别
2015/07/07 面试题
个人贷款担保书
2014/04/01 职场文书
2016年校园植树节广播稿
2015/12/17 职场文书
人事部:年度述职报告范文
2019/07/12 职场文书