详解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 相关文章推荐
用javascript编写的第一人称射击游戏
Feb 25 Javascript
JMenuTab简单使用说明
Mar 13 Javascript
Javascript中的arguments与重载介绍
Mar 15 Javascript
在JavaScript中处理数组之reverse()方法的使用
Jun 09 Javascript
在JavaScript中用getMinutes()方法返回指定的分时刻
Jun 10 Javascript
JavaScript学习小结(一)——JavaScript入门基础
Sep 02 Javascript
结合代码图文讲解JavaScript中的作用域与作用域链
Jul 05 Javascript
Javascript实现信息滚动效果
May 18 Javascript
ztree简介_动力节点Java学院整理
Jul 19 Javascript
使用layer弹窗,制作编辑User信息页面的方法
Sep 27 Javascript
详解JSON.parse和JSON.stringify用法
Feb 18 Javascript
vue自定义右键菜单之全局实现
Apr 09 Vue.js
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处理restful请求的路由类分享
2014/02/27 PHP
PHP用星号隐藏部份用户名、身份证、IP、手机号等实例
2014/04/08 PHP
php生成RSS订阅的方法
2015/02/13 PHP
php排序算法实例分析
2016/10/17 PHP
强悍无比的WEB开发好助手FireBug(Firefox Plugin)
2007/01/16 Javascript
jQuery获取地址栏参数插件(模仿C#)
2010/10/26 Javascript
前台js调用后台方法示例
2013/12/02 Javascript
浅析jquery ajax异步调用方法中不能给全局变量赋值的原因及解决方法
2014/01/10 Javascript
ECMAScript6函数默认参数
2015/06/12 Javascript
使用Jasmine和Karma对AngularJS页面程序进行测试
2016/03/05 Javascript
Angular.JS中指令ng-if、ng-show/ng-hide和ng-switch的使用教程
2017/05/07 Javascript
vue深入解析之render function code详解
2017/07/18 Javascript
js常见遍历操作小结
2019/06/06 Javascript
Python实现获取操作系统版本信息方法
2015/04/08 Python
Python语言的面相对象编程方式初步学习
2016/03/12 Python
使用Python读取二进制文件的实例讲解
2018/07/09 Python
Python统计纯文本文件中英文单词出现个数的方法总结【测试可用】
2018/07/25 Python
详解如何为eclipse安装合适版本的python插件pydev
2018/11/04 Python
深入解析python中的实例方法、类方法和静态方法
2019/03/11 Python
Python实现简单层次聚类算法以及可视化
2019/03/18 Python
python绘制已知点的坐标的直线实例
2019/07/04 Python
python Django中models进行模糊查询的示例
2019/07/18 Python
Python作用域与名字空间原理详解
2020/03/21 Python
Python如何定义接口和抽象类
2020/07/28 Python
详解win10下pytorch-gpu安装以及CUDA详细安装过程
2021/01/28 Python
Python 里最强的地图绘制神器
2021/03/01 Python
GNC健安喜官方海外旗舰店:美国著名保健品牌
2017/01/04 全球购物
美国猫狗药物和用品网站:PetCareRx
2017/01/05 全球购物
《天游峰的扫路人》教学反思
2014/04/25 职场文书
金融系应届毕业生求职信
2014/05/26 职场文书
绿色校园广播稿
2014/10/13 职场文书
自我评价优缺点范文
2015/03/11 职场文书
英文慰问信范文
2015/03/24 职场文书
2015新学期校长寄语(3篇)
2015/03/25 职场文书
2015年乡镇环保工作总结
2015/04/22 职场文书
Python中Permission denied的解决方案
2021/04/02 Python