详解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库 开发规则
Jan 31 Javascript
Javascript 按位与赋值运算符 (&amp;=)使用介绍
Feb 04 Javascript
angular.element方法汇总
Jan 07 Javascript
jQuery中outerWidth()方法用法实例
Jan 19 Javascript
js中常用的Math方法总结
Jan 12 Javascript
ES6 Promise对象概念与用法分析
Apr 01 Javascript
socket.io学习教程之深入学习篇(三)
Apr 29 Javascript
利用vue + element实现表格分页和前端搜索的方法
Dec 25 Javascript
浅析vue深复制
Jan 29 Javascript
Bootstrap Fileinput 4.4.7文件上传实例详解
Jul 25 Javascript
vue实现一个炫酷的日历组件
Oct 08 Javascript
javascript头像上传代码实例
Sep 28 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
解析Win7 XAMPP apache无法启动的问题
2013/06/26 PHP
PHP内置过滤器FILTER使用实例
2014/06/25 PHP
Laravel实现通过blade模板引擎渲染视图
2019/10/25 PHP
用javascript实现页面打印的三种方法
2007/03/05 Javascript
javascript显示选择目录对话框的代码
2008/11/10 Javascript
Jquery+ajax请求data显示在GridView上(asp.net)
2010/08/27 Javascript
javascript showModalDialog 内跳转页面的问题
2010/11/25 Javascript
JavaScript基础知识之数据类型
2012/08/06 Javascript
js类型转换与引用类型详解(Boolean_Number_String)
2014/03/07 Javascript
深入理解jquery中的事件与动画
2016/05/24 Javascript
javascript深拷贝的原理与实现方法分析
2017/04/10 Javascript
深入浅析javascript继承体系
2017/10/23 Javascript
基于iScroll实现内容滚动效果
2018/03/21 Javascript
JavaScript继承定义与用法实践分析
2018/05/28 Javascript
vue富文本编辑器组件vue-quill-edit使用教程
2018/09/21 Javascript
JavaScript 实现HTML DOM增删改查操作的常见方法详解
2020/01/04 Javascript
使用vue编写h5公众号跳转小程序的实现代码
2020/11/27 Vue.js
arcgis.js控制地图地体的显示范围超出区域自动弹回(实现思路)
2021/01/28 Javascript
[02:19]2014DOTA2国际邀请赛 专访820少年们一起去追梦吧
2014/07/14 DOTA
Python入门篇之函数
2014/10/20 Python
在Python程序中实现分布式进程的教程
2015/04/28 Python
Python捕捉和模拟鼠标事件的方法
2015/06/03 Python
Python实现的读写json文件功能示例
2018/06/05 Python
用Python实现大文本文件切割的方法
2019/01/12 Python
PyCharm搭建Spark开发环境实现第一个pyspark程序
2019/06/13 Python
python+selenium 点击单选框-radio的实现方法
2019/09/03 Python
pytorch之添加BN的实现
2020/01/06 Python
安全的后院和健身蹦床:JumpSport
2019/07/15 全球购物
小学少先队活动方案
2014/02/18 职场文书
秋季开学典礼主持词
2014/03/19 职场文书
党员公开承诺书范文
2014/03/25 职场文书
教师学习八项规定六项禁令思想汇报
2014/09/27 职场文书
2015年乡镇统计工作总结
2015/04/22 职场文书
2015年环卫工作总结
2015/04/28 职场文书
2019财务管理制度最新范本!
2019/07/09 职场文书
Vue.js中v-for指令的用法介绍
2022/03/13 Vue.js