详解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 相关文章推荐
比较全面的event对像在IE与FF中的区别 推荐
Sep 21 Javascript
对字符串进行HTML编码和解码的JavaScript函数
Feb 01 Javascript
javascript父、子页面交互技巧总结
Aug 08 Javascript
JavaScript中exec函数用法实例分析
Jun 08 Javascript
jquery中的工具使用方法$.isFunction, $.isArray(), $.isWindow()
Aug 09 Javascript
深入理解jQuery 事件处理
Jun 14 Javascript
JavaScript省市区三级联动菜单效果
Sep 21 Javascript
Node.js包管理器Yarn的入门介绍与安装
Oct 17 Javascript
bootstrap daterangepicker双日历时间段选择控件详解
Jun 15 Javascript
基于JS实现网页中的选项卡(两种方法)
Jun 16 Javascript
JS实现小球的弹性碰撞效果
Nov 11 Javascript
微信小程序实现录音时的麦克风动画效果实例
May 18 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
zf框架的zend_cache缓存使用方法(zend框架)
2014/03/14 PHP
函数中使用require_once问题深入探讨 优雅的配置文件定义方法推荐
2014/07/02 PHP
PHP数组相关函数汇总
2015/03/24 PHP
php实现Session存储到Redis
2015/11/11 PHP
取得传值的函数
2006/10/27 Javascript
jQuery解决iframe高度自适应代码
2009/12/20 Javascript
Jquery截取中文字符串的实现代码
2010/12/22 Javascript
web的各种前端打印方法之jquery打印插件jqprint实现网页打印
2013/01/09 Javascript
用jquery实现输入框获取焦点消失文字
2013/04/27 Javascript
浅谈javascript中call()、apply()、bind()的用法
2015/04/20 Javascript
jQuery简单实现iframe的高度根据页面内容自适应的方法
2016/08/01 Javascript
如何使用Bootstrap创建表单
2017/03/29 Javascript
用javascript获取任意颜色的更亮或更暗颜色值示例代码
2017/07/21 Javascript
极简主义法编写JavaScript类
2017/11/02 Javascript
使用mint-ui实现省市区三级联动效果的示例代码
2018/02/09 Javascript
node.js中fs文件系统目录操作与文件信息操作
2018/02/24 Javascript
详解基于vue-cli3.0如何构建功能完善的前端架子
2018/10/09 Javascript
vue计算属性computed的使用方法示例
2019/03/13 Javascript
js利用递归与promise 按顺序请求数据的方法
2019/08/30 Javascript
利用d3.js实现蜂巢图表带动画效果
2019/09/03 Javascript
刷新页面后让控制台的js代码继续执行
2019/09/20 Javascript
vue实现表格过滤功能
2019/09/27 Javascript
JS实现打砖块游戏
2020/02/14 Javascript
Python3 正在毁灭 Python的原因分析
2014/11/28 Python
python 将print输出的内容保存到txt文件中
2018/07/17 Python
python遍历小写英文字母的方法
2019/01/02 Python
Python多重继承之菱形继承的实例详解
2020/02/12 Python
jupyter notebook 实现matplotlib图动态刷新
2020/04/22 Python
加拿大购物频道:The Shopping Channel
2016/07/21 全球购物
优秀员工自荐信范文
2013/10/05 职场文书
销售自荐信
2013/10/22 职场文书
民事诉讼代理授权委托书
2014/10/11 职场文书
遗嘱格式范本
2015/08/07 职场文书
学困生帮扶工作总结
2015/08/13 职场文书
PyTorch的Debug指南
2021/05/07 Python
SQLServer中JSON文档型数据的查询问题解决
2021/06/27 SQL Server